起因
最近一直在使用Notion，Notion真的是一款非常强大的软件，我目前用它来整理知识，整理阅读列表等。偶然在网上发现有人用Notion来搭建博客网站，利用Notion强大的编辑能力，然后再将文档渲染成网页，整个流程并不麻烦，正好想有一个地方可以分享自己的经历感想等，便试着搭了一个，整个过程还是挺简单的
Notion Blog
我找到有两个开源的框架，搭建起来都比较简单
Notion Next 是国人开源的，功能非常全面，支持主题切换、评论、外部插件等，而且文档也非常的全面，参照文档可以非常轻松的搭建出一个博客网站。文档
nextjs-notion-starter-kit 是一个轻量的博客系统，不支持评论，也不能切换主题，我使用的正是这一个框架，为什选择这一个呢，因为我比较喜欢简单一点的，分享自己的经历和观点就好了，不需要用到评论。
这两个系统用到的底层框架都是react-notion-x，一个可以将notion渲染成网页的react组件，react-notion-x的README中，推荐了Super.so，使用Notion创建网站的Sass服务，暂时还没有体验，有兴趣的可以试试。
搭建
我使用的是 nextjs-notion-starter-kit，两个之间的原理和框架类似，NotionNext的说明文档已经非常详细了，需要的可以参考他们的文档。
搭建时你需要准备的资源如下
- 域名
- Notion帐号
- Vercel帐号
- 带有Node的系统环境
首先，当然是把源码下载下来
$ git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git $ cd nextjs-notion-starter-kit $ npm install $ npm run dev
这时，你打开浏览器，输入localhost:3000, 就可以看到你搭建的博客网站了，当然，现在的博客都是默认的模板，你需要修改一些内容，将它变成你自己的网站，它的所有配置都在site.config.ts中，你只需要打开该文件，修改配置即可，其它的基本上都能看懂，我只讲一个最重要的配置项，rootNotionPageId，这个参数是用来关联你的博客和Notion文档的。
注意：这里会遇到一个问题，你点击右上角的Search时，后台会报错，解决方案如下
将Notion模板复制到你自己的Notion帐号中，模板链接，你也可以在本地运行的网页中直接点击复制
然后，在你的Notion中找到模板，将其修改成公开分享，然后再将分享的ID拷贝出来，填入到rootNotionPageId参数中，记住，ID是链接结尾中划线后面的那一串字母，不要复制错了
在你的Notion中，修改模板的内容为你自己的内容，重新打开网址，你就可以看到修改后的效果了
部署
部署之前你需要一个vercel帐号，vercel注册后可以免费使用
注册完之后再安装vercel-cli， 就可以将博客部署到线上了，在运行部署命令时，vercel会先绑定你的帐号。
$ npm install -g vercel $ npm run deploy
部署成功后，命令行中会展示一个可以访问的地址，打开地址，你就可以看到线上的效果了，接下来，你需要将你的域名绑定到你的Vercel Project中
打开你的Vercel管理后台，设置域名
添加之后，vercel会提供domain的配置参数，将配置参数填写到你的域名配置中，整个部署就完成了。在网址中输入你的域名，你就可以访问你自己的博客系统啦。
总结
在整个搭建过程中，你需要付费的，只有你的域名，其它的都是免费的，如果你选择一个比较便宜的域名，那整个的成本就非常低了，当然如果你很有钱，就当我什么都没说。