工具说明

Nextjs-Notion-Starter-Kit ： 这是用于支撑个人博客/文件网站的开源项目。它使用 Notion 作为 CMS，从 Notion 获取内容数据，然后使用Next.js和react-notion-x来静态渲染所有内容，生成一个静态的”影子网站“。然后将该站点部署到 Vercel 。

Vercel ：对个人用户基本免费的程序托管平台，本文用来托管”影子网站“。

快速搭建

<aside> 💡 熟悉开源github项目的话，可以直接看官方README文档 Nextjs-Notion-Starter-Kit 本文只包含简洁的步骤

</aside>

1. Fork 项目

https://github.com/transitive-bullshit/nextjs-notion-starter-kit

2. 修改配置

在fork好的仓库下，编辑 site.config.js

只需填写 site.config.js 中的rootNotionPageId。这个值用来指定要呈现在网站上的入口页面；这个值指定为要分享的notion page 的 id，在notion 里右上角→ Share 按钮→ 分享 Share to web，编辑框内有链接，例如https://timecat.notion.site/Notion-Next-js-Notion-Starter-Kit-922589c12e6d441cb8874ecfa4371c0c 则 id 为922589c12e6d441cb8874ecfa4371c0c

填写完rootNotionPageId就可以下一步了。如果爱折腾可以看看 site.config.js 中的其他配置，看官方 README 即可，变量名通俗易懂。

3. 部署

1. 注册并登录Vercel后台(建议是用Github登录)，点击部署新项目【New Project】
2. 点击从github仓库导入项目，选择第一步 fork 的仓库。
3. 在项目配置中找到deploy，直接点击部署。Vercel 会自动拉取仓库、编译、部署。
4. 部署完成后，点击 Visit 按钮访问你的站点。

4. 域名映射（可选）

1. 在项目面板中找到 Settings→Domains ； 输入你的域名，并点击Add。
2. 根据提示，在域名服务商后台配置Verccel的Cname，这里我距离用CloudFlare的域名解析服务；