NotionNext：免费开源的 Notion 博客建站工具 无需服务器

admin

前置条件：GitHub 账号，Vercel 账号，Notion 账号，科学上网工具，（可选）域名托管在 Cloudflare 并开启代理

1. Fork 仓库 & Vercel 一键部署

• 打开 NotionNext 官方仓库，点击右上角 Fork，把仓库复制到自己的 GitHub。
• 登录 Vercel → Add New Project → 选择刚才 Fork 的仓库 → 点击 Import。
• 在 Vercel 的 Environment Variables 中新增：
  NOTION_PAGE_ID = 你的 Notion 页面 ID（见下方获取方式）其他配置保持默认即可，点击 Deploy。
• 获取 NOTION_PAGE_ID：
  打开 Notion 模板 → 右上角 Share → Publish → Publish to web。
  复制生成的链接，如 https://xxx.notion.site/site/02a ... 415905ef32a5?pvs=21，取中间 32 位字符串 02ab3b8678004aa69e9e415905ef32a5 即为 NOTION_PAGE_ID。
  

2. 绑定自定义域名（可选）

• 在 Vercel 项目后台 → Settings → Domains → 输入你的域名→ Add。
• 按提示在 Cloudflare（或其他 DNS 服务商）添加 CNAME 记录：
• 等待 DNS 生效（通常 1–2 分钟，Cloudflare 代理可即时生效）。
  

3. 评论系统 Twikoo（MongoDB 版）
3.1 部署 Twikoo 后端

• Fork Twikoo 一键部署仓库 到自己的 GitHub。
• 打开 MongoDB Atlas → 新建免费集群 → 创建数据库用户 → 记录「连接字符串」，格式示例：
  
  1. mongodb+srv://<用户名>:<密码>@cluster0.xxxxx.mongodb.net/

  复制代码
  
  
• 回到 Vercel → Add New Project → 导入刚才 Fork 的 Twikoo 仓库 → Environment Variables 添加：
• 部署成功后，Vercel 会自动分配域名，例如 https://twikoo-xxx.vercel.app，复制备用。
  MONGODB_URI = 上一步复制的 MongoDB 连接字符串
  其他变量保持默认 → Deploy。
  

3.2 接入 NotionNext 前端

• 回到 NotionNext 仓库 → 打开 conf/comment.config.js → 找到 Twikoo 配置段：保存并 git push，Vercel 会自动重新部署。
  
  1. twikoo: {
     
  2.   envId: 'https://twikoo-xxx.vercel.app',// 填写上一步复制的 Twikoo 地址
     
  3. },

  复制代码
  
  
• 在 Vercel → NotionNext 项目 → Environment Variables 新增：
  NEXT_PUBLIC_COMMENT_ENV_ID = https://twikoo-xxx.vercel.app重新部署即可生效。
  

3.3 国内访问优化（可选）

• 给 Twikoo 的 Vercel 域名绑定自定义子域（如 tk.example.com），方便流畅评论。