Vercel部署NotionNext | Roxy の Blog

type

status

date

slug

summary

前言

遵循此教程您将在Vercel上免费搭建一个NotionNext博客。

NotionNext是一个完全开源免费的建站脚本，将您的Notion笔记实时渲染成博客。 Vercel是一个来自国外的在线脚本托管平台，对于个人使用，其免费版已经完全足够，因此您无需购买服务器即可搭建自己的网站。

部署站点只需三步，分别是：

复制我的Notion模板

复制我的Github源代码

在Vercel中一键部署

一、创建您的Notion页面

复制模板

请先注册登陆您的Notion账号。

点击下方链接，打开模板

Notion Blog一个NotionNext搭建的博客https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5

在右上角点击Duplicate复制模板，如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。

点击右上角的Duplicate，将模板复制到您的笔记中

获取页面ID

在Notion笔记中：在页面右上角的菜单栏中，依次点击Share→Published→Share To Web，开启页面分享，获取共享链接

如下图所示，点击右上角 Share ，在弹出窗口中点击 Publish → Share to web (点击展开截图)

复制页面ID

页面ID在您的共享链接中、域名中间的一串32位字母与数字。

如下图所示：

页面ID注意

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

👇我的页面ID 是 02ab3b8678004aa69e9e415905ef32a5

新版的notion中，页面ID的格式可能会有一点不同，例如会把页面的标题也带上： https://www.notion.so/tanghh/Today-261c36d269a74acd97682af86d7bc9a0?pvs=4 但不变的是，页面url中的那串连续32为的字符串就是id。

请将您的页面ID记录下来，在步骤三会用到。

二、复制源代码

注意，请不要使用qq邮箱等国内邮箱，尽量使用hotmail或gmail等国际邮箱，否则下一步登陆vercel后会提示账号被封禁。

请先注册并登陆Github账号，

仅需点击下方链接，即可一键Fork(复刻)项目。

https://github.com/tangly1024/NotionNext/fork

三、Vercel部署

准备账号

注册登陆Vercel ，这里推荐选择Github账号登录。

注册vercel账号可能遇到的问题

导入代码

点击下方创建新项目

https://vercel.com/new

在代码仓库列表中选择导入NotionNext

2.点击导入您的NotionNext项目

注意：这里步骤放慢些，不要急着点击页面上的Deploy按钮，先看下方教程。

配置页面ID并部署

点击Environment Variables（环境变量），并添加一个属性名称为NOTION_PAGE_ID，值为步骤一获取的页面ID。

例如，我的页面ID是：02ab3b8678004aa69e9e415905ef32a5，则配置如下：

属性名称 Name	属性值 Valve
NOTION_PAGE_ID	02ab3b8678004aa69e9e415905ef32a5

左侧填写 NOTION_PAGE_ID ，右侧填写页面ID的值

填写后要点击右边的Add按钮确认添加

点击Deploy按钮，静候两分钟等待部署。

四、完成🎉🎉🎉

在部署完成页面，点击Go to Dashboard访问控制台

在控制台右上角的Visit按钮访问您的站点。或在DOMAINS中获取您的网站地址

2.在Vercel控制台中找到访问地址

注意事项

NotionNext会实时抓取Notion笔记内容 (由于缓存和网络延迟，最多刷新两次页面即可看到同步结果)。

若您的站点始终无法同步笔记的数据

，请再次检查上面的步骤，或者干脆重来一遍： 1. 在Notion中检查您的

格式是否正确、并已开起页面分享。 2. Vercel后台环境变量中

是否配置，并重新配置后尝试

如何检查Vercel后台环境变量配置：

如何重新部署

自定义您的站点

到这里，您已拥有了自己的独立博客，站点的一切内容：标题、描述、头像、菜单栏等所有配置都可随心所欲地定制。