Vercel部署NotionNext | NotionNext帮助手册

前言

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

❓

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

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

复制我的Notion模板

复制我的Github源代码

在Vercel中一键部署。

部署文档已经过大量网友实践验证，如您实在无法完成独立部署，可以考虑向我们求助。

视频

我录了一个1分38秒的简略视频，演示了整个部署过程，最终以文档为主。

另外有Youtube网友也分享了部署的过程，可以参考

将您的Notion笔记变为博客站，所有文章的编写发布都只在您的Notion笔记中完成，小白也能快速地搭建自己的网站

首先，借助NotionNext建站，所有文章的编写发布都只在您的Notion笔记中完成，Notion笔记支持在电脑与手机上随时访问；因此您无需登录任何第三方平台、或打开WordPress后台、或者通过写Git上传等繁琐的方式来发布文章。其次，Notion 是一款将笔记、在线文档、知识库和任务管理无缝整合的「All-In-One」应用，它也是我一直在用、并且极力推荐的一款笔记软件借助Notion灵活的排版以及便捷的写作体验，您不需要专门学习Markdown语法，也可以轻松随时随地写出调理清晰的文章，以便记录您的创意与灵感。站点数据完全保存在Notion笔记当中，您可以随时导出本地进行备份。 Notion AI Notion集成了Open AI，能大大提升您的写作效率，这也是Notion作为笔记工具的理由之一。最后，NotionNext 只是一个将您的笔记转成网站的小工具，并不是一个繁重的系统，之后还可以选择其他的工具和软件渲染您的笔记。 =============================== 🔔订阅我的频道，第一时间通知您最新的更新!🔔 👉Subscribe: https://www.youtube.com/@maple_tech =============================== chapter章节： 00:00 介绍 00:30 安装NotionNext 01:30 配置Github 01:48 配置Vercel 03:40 绑定自己的域名 04:35 把域名配置到cloudflare管理 06:32 效果演示 =============================== 相关资源： https://github.com/tangly1024/NotionNext https://www.namesilo.com/ =============================== 🔽 与我联系 Twitter: https://twitter.com/MapleNext Telegram: https://t.me/+1UCf0K0yi4tiMDEx =============================== #notion #博客 #建站

https://www.youtube.com/watch?v=zWlPyDQCkrk

零基础入门NotionNext网站搭建、个人博客、网站快速搭建部署教程 | 无需编程教学 | All in one | 404实验室

订阅频道▶https://www.youtube.com/channel/UCm84OFeAJCPqerpjCFOrVwg?sub_confirmation=1 博客▶https://404lab.cc/ TG群组▶https://bit.ly/404Lab 海豚湾▶https://bit.ly/3Y2DgBZ 接码平台▶https://bit.ly/3ryxig9

https://www.youtube.com/watch?v=AbI70b9KfXE

一、创建您的Notion页面

复制模板

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

点击下方链接，打开模板

Notion Blog

一个NotionNext搭建的博客

https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5

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

获取页面ID

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

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

复制页面ID

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

如下图所示：

页面ID注意

❓

👇以下我的共享链接，其中标红加粗下划线部分才是页面ID！要忽略?v=后面的英文数字。

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(复刻)项目。

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

三、Vercel部署

准备账号

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

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

若注册时提示 Error:This user account is blocked.Contact [email protected] for more information.

这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。

但是根据群友反应，将 github 账号主邮箱切换为 Gmail 以后，Vercel 又会提示需要使用手机号码验证。然而 github 并没有提供手机号码绑定的内容。

综上，建议一开始注册 github 账号时就使用 Gmail 等国外邮箱进行注册。

国内访问Gmail的方案：

直接使用 QQ 邮箱手机版，它提供 Gmail 的访问路线，可以直接注册并使用。使用 Ghelper 等浏览器插件访问。详情可以参考这篇文章：玩转 Microsoft-Edge

若是执着于当前Github账号，可以参考以下方案进行尝试:

完成了 Gmail 等国外邮箱的注册，打开 github-> 头像 ->settings->Emails>Add email address, 并完成邮箱验证。在Add email address 下方的Primary email address 选项中将 Gmail 设置为主邮箱。

导入代码

点击下方创建新项目

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按钮，先看下方教程。

配置页面ID并部署

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

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

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

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

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

四、完成🎉🎉🎉

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

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

注意事项

💡

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

⚠️

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