notion搭建博客方法二：nextjs-notion-star

说明

notion搭建博客的方法很多，今天介绍一个Notion+Vercel+Next.js搭建博客的方法，作者的Github。

演示

演示地址: Sky's Blog

搭建方法

1. 首先注册一个GitHub账号。

2. 注册一个Notion账号，创建一个页面，选择右上角Share，选择Share to web，选择Copy link，找到此页面的PageID，就是下图中Blog后面的一串字符。

   image-20210609101228904

3. 打开此仓库 Fork一份，根据自己的情况修改**site.config.js**的相关内容。

  // 此处填写第二步中获取到的字符串
  rootNotionPageId: '78fc5a4b88d74b0e824e29407e9f1ec1',
 
  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,
 
  // 站点基础设置
  name: '名称',
  domain: '域名',
  author: '作者',
 
  // 一些其他设置 (可选)
  description: 'Example site description',
  socialImageTitle: 'Transitive Bullshit',
  socialImageSubtitle: 'Hello World! 👋',
 
  // SNS设置 (可选)
  twitter: 'transitive_bs',
  github: 'transitive-bullshit',
  linkedin: 'fisch2',
 
  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,
 
  // image CDN host to proxy all image requests through (optional)
  // NOTE: this requires you to set up an external image proxy
  imageCDNHost: null,
 
  // Utteranc.es comments via GitHub issue comments (optional)
  utterancesGitHubRepo: null,
 
  // whether or not to enable support for LQIP preview images (optional)
  // NOTE: this requires you to set up Google Firebase and add the environment
  // variables specified in .env.example
  isPreviewImageSupportEnabled: false,
 
  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null
 }

4. 打开Vercel，使用Github账号登录，选择New Project，找到Frok过来的库，点击Import。

   image-20210609101921941

5. 选择 Select ->修改PROJECT NAME（可选）->点击Deploy。

6. 等待部署完成即可。

7. 绑定域名，选择Domains，按描述进行域名解析即可绑定成功。

8. 此方法搭建的博客，样式部分可以通过修改components 、lib、styles、pages、public等几个文件夹的内容来进行调整，比如将默认的twitter等海外SNS服务修改为QQ微博等国内服务。