Type
Status
Date
Tags
Slug
Summary
Category
Password
✍️ Related to MyNotes
Icon
如何不写代码，不经过复杂的配置，快速的搭建个人博客。本文主要记录和分享自己利用NotionNext这一Notion笔记展示的建站工具，搭建属于自己的第一个博客的。
I 前言
用来建立个人博客的工具有很多，比如WordPress、Hexo等，一方面自己是一个新人小白，目前的想法只是想快速搭建自己的个人博客，分享自己的学习过程中的心得与体会;另一方面自己是Notion的重度使用者，已有一些自己的笔记知识，因此不想在搭建的过程中投入太多的经历。所以经过简单的了解，最终选择了NotionNext这一建站工具。
II NotoinNext是什么？
NotionNext是基于NextJS框架开发的免费开源的Notion建站工具。简单的讲，它通过调用Notion官方提供的API，最终将以数据库记录的Notion笔记变成博客，愿景就是帮助一个不懂代码的技术小白，最低成本、最快速的搭建自己的个人网站。可以从Github项目页面获取到最新的项目代码：
III 一步一步搭建个人博客
一、域名的注册
这里我使用的是NameSilo。
注册账号，登录后直接在如下页面购买可用的域名即可：
获取到属于自己的域名后，按如下步骤配置域名解析服务器地址：
上图中Name Server 1和Name Server 2的新值将在下一步中填入。
二、域名解析
域名解析这里使用CloudFlare。注册CloudFlare账号并登录，点击Add a Site添加上一步中购买的域名
然后点击DNS进行该域名的DNS的配置
首先将上图中1,2标记处的值填入步骤一的Name Server 1和Name Server 2中。
然后按如下图添加A记录和CNAME记录，值1,2,3,4分别在第三步中获取。
三、博客Notion模板的获取与准备
1. 准备用来做博客的Notion页面
这里假设已经有Notion账号（注册很简单，直接打开Notion官网注册即可，不再详细说明），登录Notion账号，打开如下链接获取用来做博客的Notion模板，并Duplicate到自己的Notion工作空间
2. 共享博客Notion模板页面到网络
到自己的Notion工作空间，将上述得到的Notion页面Publish to Web
点击Publish to web后，将得到如下图所示的链接
3. 获取Notion模板的NOTION_PAGE_ID
在上一步中，模板页面Publish之后，会得到外部访问的链接，如上图中红框所示。在这个链接中包含了NOTION_PAGE_ID，这个ID值会在下一步中用到。
比如我的链接是【https://mesq******.notion.site/NOTION_PAGE_ID?********v=8e9f2********ac988bf7&pvs=4】，其中的部分就是NOTION_PAGE_ID(即是/和？之间的字符)
四、Vercel部署NotionNext项目
Vercel是一个在线代码托管平台，其免费版就个人使用完全够用，因此，我们不需要买服务器，可以把NotionNext项目部署到Vercel平台，实现自己个人博客的搭建。
1. Fork NotionNext项目
Fork的意思就是将NotionNext项目拷贝到一份到自己的Github下，为后续的项目部署作准备。
这里同样有Github账号（注册比较简单），登录后找到NotionNext项目，点击Fork。
2. 在Vercel中导入NotionNext项目
打开如下链接，登录Vercel账号(可以使用Github账号登录)，导入上一步中Fork到自己仓库的NotionNext项目（为了防止因NotionNext原项目的升级更新带来自动合并掩盖了自己目前的版本，建议将自己Fork到的NotionNext项目创建一个分支用来进行后续的部署）。
3. 新增NOTION_PAGE_ID环境变量，值为三.3获取到的页面ID
4. 设置域名
在步骤二中的A记录和CNAME记录分别填入如下值：
然后在cloudflare中开启SSL/TLS开启，并设置等级为完全（默认为灵活，但访问域名时会出现“重定向次数过多，而无法打开网页”,如果设置为完全都还出现“重定向次数过多”，那直接设置成完全(严格)）。
5. 设置非main分支(可选)
该设置是为了防止原项目更新而导致自己Fork的项目强行合并带来部署不稳定的风险，因此建议采用非main分支部署项目
6. 部署项目
部署成功后的效果图，输入域名即可访问搭建的个人博客。
IV 搭建后的一些配置
一、添加评论插件
实现的方式挺多，具体可查看【NotionNext文档中心】，我采用的是github扩展应用Utterance实现博客的评论，这种方式配置比较简单，但不支持匿名评论，必须得登录Github账号。
1. Github中创建公开的仓库用于存放评论
2. 在github中安装utterance插件
访问该链接安装：
3. 在Vercel部署的NotionNext中添加环境变量
环境变量的名称为【NEXT_PUBLIC_COMMENT_UTTERRANCES_REP0】, 值为【你的Github用户名/存放评论的仓库名】
4. 重新部署该项目
二、修改项目配置文件blog.config.js
这部分配置详细请看【NotionNext文档中心站点配置】部分。
三、Notion模板中修改站点信息
1 | 作者头像 |
2 | 站点标题 |
3 | 站点描述 |
4 | 封面大图 |
📎 参考资料
有关安装或使用的问题，欢迎您在底部评论区留言，一起交流~
- Author:Mr.Charley
- URL:https://blog.rahc.top/article/how-to-setup-blog
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts