NotionNext部署-Vercel版本 | Tangly Blog

type

status

date

slug

summary

操作步骤

1.准备您的Notion页面

💡

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

复制下方模板到您的Notion中：

NOTION BLOG演示站点描述https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

如何复制？

Duplicate

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

开启页面分享权限

Share ，

Share to web

复制页面ID

在哪里？页面ID

共享链接中

32位字符。

页面ID

02ab3b8678004aa69e9e415905ef32a5

标红

加粗

页面ID

页面ID

2.Fork此Github项目

❓

什么是Fork：意为将NotionNext源代码复制一份到您的Github账号中。

💡

请先注册并登陆Github账号，并点击下方链接一键fork项目。

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.https://github.com/tangly1024/NotionNext/fork

3.将Github项目导入Vercel

使用您的Github账号登陆Vercel

1.使用Github账号登录Vercel

点击下方创建新项目，并选择从Github导入NotionNext代码

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

2.点击导入您的NotionNext项目

不要

Deploy

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

如图所示，左侧填写 NOTION_PAGE_ID ，右侧填写页面ID的值

1.点击Deploy进行自动部署

4.完成🎉🎉🎉

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

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

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

注意事项

💡

NotionNext会实时抓取Notion笔记内容 (由于缓存和网络延迟等原因，可能要刷新两次网页才能看到同步结果)。

⚠️

若您的站点始终无法同步笔记的数据，请再次检查上面的步骤3： 1. 在Notion中检查您的NOTION_PAGE_ID 格式是否正确、并已开起页面分享。 2. Vercel后台环境变量中NOTION_PAGE_ID是否配置，并重新配置后尝试Redploy。 3. 配置文件blog.config.js的NOTION_PAGE_ID不能被写死。 4. 或者您可以删掉vercel中的项目，重新导入一次即可。