type
status
date
slug
summary
tags
category
icon
password
一. 准备工作1. 注册Notion2. 注册Github3. 登录Vercel二. 开始搭建1. 为项目点个赞2. 准备Notion模板3. 复制NotionNext项目4. 将项目部署到Vercel三. 完结撒花🎉四. 博客使用
一. 准备工作
你可以先完成以下准备工作，再开始搭建
1. 注册Notion
在下面网站注册Notion账号并进行登录
2. 注册Github
在下面网站注册Github账号并登录
3. 登录Vercel
在下方网站通过Github账号进行登录
二. 开始搭建
1. 为项目点个赞
本着吃井不忘挖水人的原则，既然我们使用了这么优秀的项目，那么请给她一个大大的赞
首先打开下方链接
照着下图右上角
⭐Started位置点击单数下，切记单数下，单数下，单数下… 确保星星变成黄色就可以了
2. 准备Notion模板
- 打开下方网址
- 在打开的网址中找到下图箭头所示位置，名字叫
Duplicate，点击它，将会复制这个模板到你的Notion账户下。
- 点击
Duplicate后，你将进入自己Notion下的模板页面(前提：已登录Notion)，接下来我们修改这个这个页面的分享权限，将它分给到Web，公开给每个人都可以访问。如下图所示，先找到右上角Share按钮，点击后出现弹框，再点击弹框中的Share to web 后的开关按钮。
- 接下来找到这个模板页面的ID，并复制保存起来，后续部署会用到这个页面ID。ID在我们上一步分享时出现了，也就是我们点击分享开关后，下方出现的分享链接中。我们需要的ID在链接中的位置是.notion.site/ID?，即.notion.site/后，?前的32位字符。
如下链接示例的红色部分就是ID：
https://eastern-fernleaf-3cb.notion.site/02b5803c4ebf48da8bae17a1134b743e?v=c08a102d13484840bf0766fc41b57dcd
所以ID为：02b5803c4ebf48da8bae17a1134b743e
至此，我们Notion中的准备工作就到此结束了。接下来开始部署博客。
3. 复制NotionNext项目
复制NotionNext的源代码到自己的Github中，打开下方项目链接。
点击右上方
Fork按钮，如下图
4. 将项目部署到Vercel
- 点击下方链接到创建Vercel项目页面(前提：确保已完成准备工作中的通过Github登录Vercel)。找到NotionNext一项，并点击
import按钮，打开后如下图所示：
- 配置项目信息
这一步是配置部署到Vercel的项目信息，以及项目的环境变量，配置环境变量将把部署的项目与我们之前创建的Notion模板页面相关联起来。如下图步骤操作：
- 填写项目名称，非必须，可以默认
- 配置环境变量，Name为
NOTION_PAGE_ID，Value为我们之前保存的页面ID，并单击Add按钮进行添加环境变量
- 点击Deploy按钮
Deploy后，需要等待两三分钟时间，下图是点击Deploy后的页面，
三. 完结撒花🎉
等待Deploy结束后会跳转到成功页面，Vercel贴心的为我们撒花庆祝
接下来我们点击页面上的
Continue to Dashboard进入控制台
点击
Visit就可以访问了。
四. 博客使用
上面我们已经完成了博客搭建，接下来就是如何去管理我们博客的文章了，当我们访问我们部署完成的网站时，发现其中已经有一些示例文章存在了，细心的你会发现这些文章就是我们Notion模板页面中的文章。
- 新建一篇文章
进入Notion，并点击下图所示位置的
New按钮新增一篇文章
点击新增后，列表中会新增一条，右边会打开新增的内容，如下
我们就可以在右边开始自己的创作了。
这是一篇记录了我个人搭建NotionNext博客的全过程，也是刚开始接触，后续有其他相关问题将继续记录在这里。
感谢开发者提供如此优秀的项目！