基于Notion搭建个人博客

一、注册Notion账号

官网地址： https://notion.so

注册并登录后会进入以下界面

复制Notion模版

登录账号之后，打开 Notion模版

点击 Duplicating 可将模板复制到自己网站了

模版克隆到到个人账户之后，点击右上角的Share->Publish->Publish to Web，那么互联网上的用户就能使用这个链接来访问我们的个人页面了。

二、Github拉取NotionNext项目

将 NotionNext项目 fork到自己的github

这份代码就是我们搭建个人网站的关键，这个NotionNext调用了Notion的API来展示Notion的页面，同时提供了一些主题和特效，可以定制化我们的网站效果。

对于这个仓库，我们唯一需要关注的就是blog.config.js文件，我们的所有主题特效修改都只需要改这个配置文件即可。

三、Vercel部署

注册或登录 Vercel，建议用github账号进行登录，选择添加新项目

选择 NotionNext 项目点击 import 导入

需要配置一下环境变量

即 blog.config.js 中的 NOTION_PAGE_ID

复制Notion的分享链接

仅需复制id即可

点击 Add 添加到环境变量，然后点击Display进行部署

部署需要几分钟，部署成功如下所示

四、绑定域名

由于中国大陆专属的域名污染，vercel自动分配域名可能访问不成功,可以绑定注册好的域名进行访问

可以直接点击Add Domain进行添加，也可以直接打开 Setting 页面进行添加

填写已经注册好的域名

添加后提示不合法，需要添加 A记录 和 CNAME 记录

到域名管理平台绑定域名，此处以 CloudFlare 为例，由于我已经添加过CNAME记录，再添加一条 A记录即可

配置好可以看到已经显示配置合法了

点击域名即可直接访问了

五、信息修改

基本信息修改

博客介绍的一些基本信息可以从 blog.config.js 直接修改，也可以从Vercel的环境变量进行修改

具体操作为： Project => Settings => Environment Variables 进行添加

所有带有process.env前缀的变量，都可以在Notion里面添加环境变量配置来覆盖，同NOTION_PAGE_ID一样，意味着如果你不想修改NotionNext代码仓库，是完全可行的。

同时NotionNext代码仓库还有着其它非常丰富的配置可以修改，甚至可以显示主题选项，随时一键切换主题，显示鼠标点击特效，动态特效，宠物挂件，音乐播放插件，等等。

在github上修改并提交后会触发Vercel自动部署

Notion模版介绍

这个模版是一个表格，表格的每一行是一篇博客，我们可以在表格上面进行编辑，

解释一下表格各个列的意义：

• type - Post：博客，Menu: 菜单， SubMenu: 子菜单 ， Page：菜单（归档，留言，友链等），Notice：公告
• status - Published: 已发布，Invisible：不可见，Draft：草稿
• title - 具体的博客内容，点击Open即可打开编辑
• slug - 链接后缀，不填就是默认的notion的随机字符串，可读性不好，建议填写

模板修改后需在Vercel上重新部署方可生效