NotionNext部署-Vercel版本

前言

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

❓

Vercel是一个在线代码托管平台，对于个人使用，其免费版已经完全足够，因此您无需购买服务器即可搭建自己的网站。除了Vercel云托管、您还可以选择Zeabur部署、服务器本地部署、导出静态网页、Docker容器化、CloudFlare部署等方案。

操作步骤

1.准备您的Notion页面

💡

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

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

NOTION BLOG

演示站点描述

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

❓

如何复制？点击右上角的Duplicate 即可（如下图所示）

开启页面分享权限

❓

如何开启？点击 Share ，在弹出窗口中点击 Share to web

复制页面ID

❓

页面ID在哪里？ 在右上角分享的弹框中找到页面的共享链接，链接中的32位字符就是页面ID。

👇以下是示例页面，对应的页面ID 是 02ab3b8678004aa69e9e415905ef32a5

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

⚠️注意！只有其中标红加粗部分才是页面ID！

页面ID 在步骤三部署时会用到。

2.Fork此Github项目

❓

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

💡

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

Build software better, together

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

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

New Project - Vercel

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

https://vercel.com/new

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

💡

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

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

添加完环境变量后，点击Deploy按钮，静候两分钟等待部署。

4.完成🎉🎉🎉

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

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

注意事项

💡

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

⚠️

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

自定义您的站点

💡

到这里，您已拥有了自己的独立博客，站点的一切内容都可随心所欲地定制。

请访问下方的《NotionNext 操作手册》获取更多站点配置的帮助！

NotionNext 操作手册 | TANGLY’s BLOG

介绍NotionNext的所有功能和常见问题说明

https://tangly1024.com/article/notion-next-guide