说明
notion搭建博客的方法很多，今天介绍一个Notion+Vercel+Next.js搭建博客的方法，作者的Github。
演示
演示地址: Sky's Blog
搭建方法
首先注册一个GitHub账号。
-
注册一个Notion账号，创建一个页面，选择右上角
Share，选择Share to web，选择Copy link，找到此页面的PageID，就是下图中Blog后面的一串字符。image-20210609101228904 打开此仓库 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
}
-
打开Vercel，使用Github账号登录，选择
New Project，找到Frok过来的库，点击Import。image-20210609101921941 选择
Select->修改PROJECT NAME（可选）->点击Deploy。等待部署完成即可。
绑定域名，选择
Domains，按描述进行域名解析即可绑定成功。此方法搭建的博客，样式部分可以通过修改
components、lib、styles、pages、public等几个文件夹的内容来进行调整，比如将默认的twitter等海外SNS服务修改为QQ微博等国内服务。
