如何使用Vercel快速部署 NotionNext

前言

NotionNext 是由 Tangly1024 等人开发的，一个基于 Next.js + Notion API 的开源博客系统，而 Vercel 是 Next.js 官方团队打造的 Serverless 托管平台——两者可以说是天作之合。用 Vercel 部署 NotionNext，你不需要购买服务器，不需要配置环境，甚至不需要敲命令，全程点点鼠标就能完成。

这篇文章将带你从零开始，完整走一遍 Vercel 部署 NotionNext 的全流程：从复制 Notion 模板，到 Fork 代码，到配置环境变量，到绑定自定义域名，再到后续的站点维护。无论你是完全的技术新手，还是想快速搭一个博客的创作者，都能跟着这篇教程顺利上线你的网站。

视频帮助

一、你需要准备什么

在开始之前，请确保你已经有以下三样东西：

项目	说明	是否免费
Notion 账号	用于存放博客内容，个人版免费	✅ 免费
GitHub 账号	用于托管代码和自动部署	✅ 免费
Vercel 账号	用于托管网站，用 GitHub 账号直接登录	✅ 免费

三个平台对个人用户都完全免费，也就是说你可以零成本拥有一个自己的博客网站。

二、准备你的 Notion 页面

NotionNext 的所有内容都来自一个 Notion 页面，所以我们需要先把官方模板复制到自己的 Notion 中。

2.1 复制官方模板

打开浏览器，访问官方模板页面：NOTION BLOG 模板；

Notion 博客 | Notion

一个NotionNext搭建的博客

https://app.notion.com/p/02ab3b8678004aa69e9e415905ef32a5?source=copy_link

点击页面右上角的 Duplicate（复制）按钮；

在弹出的窗口中选择你要复制到的工作区，点击 Duplicate 确认；

等待几秒钟，模板就会出现在你的 Notion 工作区中。

💡

小提示：如果你看不到 Duplicate 按钮，说明你还没登录 Notion 账号，先登录再试。

2.2 开启网页分享

NotionNext 需要通过公开链接读取你的页面内容，所以必须开启网页分享权限：

打开你刚复制的 Notion 页面

点击右上角的 Share 按钮

在弹出的面板中，打开 Share to web（分享到网页）的开关

开关变成蓝色即表示已开启

2.3 获取页面 ID

页面 ID 是连接 NotionNext 和你的 Notion 页面的桥梁，它是一串 32 位的字母和数字。获取方式如下：

在 Share 面板中，点击 Copy link 复制分享链接

把链接粘贴到记事本或任意文本编辑器中

找到链接中 ?v= 前面的那一段 32 位字符，那就是页面 ID

举个例子，假设你的分享链接是：

那么页面 ID 就是：02ab3b8678004aa69e9e415905ef32a5

💡

常见错误：很多人会把 ?v= 后面的内容也一起复制进去，导致页面 ID 错误。记住只取 ?v= 前面的 32 位字符。

<ins/>

三、Fork NotionNext 代码

💡

提示

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

Vercel 需要从你的 GitHub 仓库拉取代码来部署，所以我们需要先把 NotionNext 的源码复制一份到你自己的 GitHub 账号下，这个操作叫做 Fork。

3.1 什么是 Fork

Fork 就是在 GitHub 上把别人的项目复制一份到你自己的账号下。复制之后，你就拥有了这个副本的完全控制权，可以随意修改，而且不会影响原始项目。

3.2 操作步骤

访问 NotionNext 的 GitHub 仓库：tangly1024/NotionNext

点击页面右上角的 Fork 按钮

在新页面中，确认仓库名称（默认 NotionNext 即可），可以勾选「Copy the main branch only」

点击 Create fork 按钮

等待几秒钟，页面会自动跳转到你账号下的 NotionNext 仓库

看到页面顶部显示 你的用户名 / NotionNext，并且下面标注 forked from tangly1024/NotionNext，就说明 Fork 成功了。

四、在 Vercel 中部署

现在代码已经在你的 GitHub 上了，接下来就是用 Vercel 把它变成一个可以访问的网站。

4.1 登录 Vercel

访问 vercel.com

点击右上角的 Sign Up 或 Log In

选择 Continue with GitHub，用你的 GitHub 账号登录

按照提示完成授权

4.2 导入项目

登录后，点击 Add New... → Project，进入新建项目页面

在 Import Git Repository 区域，找到你刚 Fork 的 NotionNext 仓库

如果列表里看不到，点击 Adjust GitHub App Permissions 授权 Vercel 访问你的仓库

找到 NotionNext 后，点击右侧的 Import 按钮

4.3 配置环境变量（关键步骤）

进入配置页面后，先不要急着点 Deploy，我们需要先配置环境变量，告诉 NotionNext 去哪里读取你的 Notion 内容。

往下滚动页面，找到 Environment Variables（环境变量）区域：

在 Name 输入框中填入 NOTION_PAGE_ID

在 Value 输入框中填入你刚才获取的 32 位页面 ID

点击 Add 按钮添加这个环境变量

❗

注意：环境变量名 NOTION_PAGE_ID 是固定的，大小写完全一致，不能写错。写错了网站就读取不到 Notion 数据，会显示空白。

4.4 开始部署

环境变量添加完成后，点击页面底部的 Deploy 按钮。

Vercel 会自动执行以下操作：

从 GitHub 拉取你的代码

安装项目依赖（npm install）

构建 Next.js 项目（npm run build）

部署到 Vercel 的 CDN 网络

整个过程大约需要 1～2 分钟，你可以在页面上实时看到构建日志。

4.5 部署完成

当你看到一个庆祝页面，显示 Congratulations!，就说明部署成功了！

点击 Go to Dashboard 进入项目控制台，然后点击右上角的 Visit 按钮，就能访问你的网站了。

🎉

恭喜！你已经拥有了一个属于自己的 NotionNext 博客网站。默认的访问地址是 notionnext-xxx.vercel.app 这样的格式。

4.6 自定义您的站点

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

注意事项

💡

提示

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

💡

注意

若您的站点始终无法同步笔记的数据，请再次检查上面的步骤，或者干脆重来一遍：

在Notion中检查您的NOTION_PAGE_ID 格式是否正确、并已开起页面分享。

Vercel后台环境变量中NOTION_PAGE_ID是否配置，并重新配置后尝试Redeploy。如何检查Vercel后台环境变量配置：如何重新部署

<ins/>

五、绑定自定义域名

Vercel 的服务器在海外，国内访问速度可能不太稳定。优化方案：

使用 Cloudflare CDN 加速（免费，配置简单）

把域名 DNS 托管到 Cloudflare，开启 Proxy 模式

如果访问量较大，考虑迁移到国内服务器用 Docker 部署

Vercel 免费版有什么限制

Vercel Hobby（免费版）的主要限制：

每月 100GB 带宽流量

每月 6000 次构建分钟数

Serverless 函数单次执行最长 10 秒

每个项目最多 100 个预览部署

对于个人博客来说，这些额度完全够用，正常使用基本不会超。

六、进阶技巧

6.1 自动部署

Vercel 默认就开启了自动部署——你每次 push 代码到 GitHub，Vercel 都会自动构建并部署到生产环境。甚至你直接在 GitHub 网页上编辑文件保存，也会触发自动部署。

6.2 预览环境

当你在 GitHub 上提交 Pull Request 时，Vercel 会自动生成一个预览部署（Preview Deployment），给你一个独立的预览链接，方便你在合并代码前先看看效果。这在团队协作或测试新功能时非常有用。

6.3 环境变量分环境管理

Vercel 支持为不同环境（Production / Preview / Development）设置不同的环境变量。比如你可以在 Preview 环境用一个测试用的 Notion 页面，Production 环境用正式页面，互不干扰。

6.4 自定义构建命令

如果你有特殊的构建需求，可以在 Vercel 项目设置 → General → Build & Development Settings 中自定义构建命令、输出目录等。一般情况下保持默认即可。

七、总结

用 Vercel 部署 NotionNext 可以说是目前最简单、成本最低的博客建站方案——零服务器费用、零运维负担、全程可视化操作。整个流程只需要三步：复制 Notion 模板 → Fork 代码 → Vercel 导入部署，快的话 10 分钟就能搞定。

部署完成后，你可以通过 Notion Config 方便地调整站点配置、切换主题、开启各种功能插件，所有操作都在 Notion 里完成，不需要碰代码。当官方有新版本时，点一下 Sync fork 就能轻松升级。

如果你还在犹豫用什么搭建博客，不妨试试 NotionNext + Vercel 这个组合——它可能是目前「写作体验」和「建站成本」之间平衡得最好的方案。

祝你建站愉快！🚀

前言