Vercel 部署 NotionNext

type

status

date

slug

summary

前言

本文按照 NotionNext 的说明实际操作时编写，感谢 tangly 。

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

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

复制 Notion 模板

复制 Github 源代码

在 Vercel 中一键部署

一、创建您的Notion页面

复制模板

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

点击下方链接，打开模板 Notion Blog一个NotionNext搭建的博客。

如图所示在右上角点击 Duplicate 复制模板，点击后将模板复制到您的笔记空间中。

获取页面ID

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

复制 页面ID 32位字母与数字

二、复制源代码

💡

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

请先注册并登陆Github账号，

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

github.com

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

三、Vercel 部署

准备账号

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

导入代码

点击下方创建新项目

Dashboard

To deploy a new Project, import an existing Git Repository or get started with one of our Templates.

https://vercel.com/new

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

💡

不要急着 Deploy

配置页面ID并部署

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

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

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

点击右边的 Save 按钮

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

四、完成查看

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

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

五、注意事项

💡

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

⚠️

若您的站点始终无法同步笔记的数据，请再次检查上面的步骤，或者干脆重来一遍： 1. 在Notion中检查您的NOTION_PAGE_ID 格式是否正确、并已经开启页面分享。 2. Vercel后台环境变量中NOTION_PAGE_ID是否配置，并重新配置后尝试Redploy。如何检查Vercel后台环境变量配置：

前言