前言

目前主流的博客搭建方案可大致分为两类，且各有局限：一类是以 WordPress 为代表的动态博客系统，依赖独立服务器运行，运维与硬件成本较高；另一类是以 Hexo 为代表的静态博客框架，采用本地 Markdown 编写，无实时预览能力，无法在编辑阶段直观确认最终呈现效果，且内容更新需手动执行构建部署流程，操作链路较长。

NotionNext 恰好填补了两类方案之间的空白。它以 Notion 作为内容生产端，完整保留了所见即所得的块级编辑体验与强大的数据库管理能力，创作者可专注于内容本身，无需在编辑与预览间反复切换；同时通过 Next.js 将 Notion 内容渲染为独立的静态博客站点，支持多平台托管部署，兼顾了部署灵活性与运维轻量化。

基于这套方案，本文介绍，如何通过NotionNext，将个人博客部署到腾讯云 EdgeOne Pages和Vercel上。

前置准备：Notion 账号、GitHub 账号、腾讯云账号（已实名认证）、备案域名（可选）

一、创建 Notion 内容页

1. 复制官方模板

打开 NotionNext官方配置模板，点击页面右上角 Duplicate，将模板复制到自己的 Notion 工作区。

2. 获取页面 ID

1. 打开复制后的配置页面，依次点击右上角 Share → Publish → 开启 Share to web，复制页面共享链接。
2. 提取规则：链接中连续 32 位的字母数字串即为页面 ID，需剔除 ?v=、?pvs= 及之后的所有参数。
   • 示例： https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb...
   • 页面 ID：02ab3b8678004aa69e9e415905ef32a5
3. 关键提醒：必须开启公开分享，否则站点无法拉取 Notion 数据。

二、复刻项目源码

1. 打开 NotionNext GitHub 官方仓库，点击右上角 Fork，将项目完整复刻到自己的 GitHub 账号下。
2. 后续所有部署、配置修改均基于你自己的仓库完成，支持版本管理和个性化二次开发。

三、腾讯云 EdgeOne 部署

1. 进入 Makers控制台

登录腾讯云控制台，搜索「边缘安全加速平台 EO」，左侧导航选择「Makers」，点击「创建项目」。

2. 导入 Git 仓库

1. 选择「导入 Git 仓库」，完成 GitHub 账号授权，建议仅授权指定的 NotionNext 仓库。
2. 仓库选择上一步 Fork 的项目，生产分支选择 main。

3. 构建配置（核心步骤）

系统会自动检测项目的框架，并且预填写构建命令

1. 构建命令请使用静态导出：yarn export。若托管面板模板仍显示 npm run build / npm run export，请按仓库习惯改为 Yarn。前者是动态站点，后者是静态。
2. 项目名称要修改一下，名称长度必须为5到63个字符，只能包含小写字母、数字和连字符。
3. 环境变量中添加您的NOTION_PAGE_ID

补充说明：静态部署后，Notion 内容更新需重新触发构建才能同步到站点。

4. 启动部署

1. 确认配置无误，点击「开始部署」，首次构建约 3-5 分钟。
2. 部署成功后，系统分配默认访问域名，可直接打开验证站点效果。

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

1. 前提：域名已完成工信部 ICP 备案。
2. 操作路径：项目设置 → 域名管理 → 添加自定义域名，按提示在域名服务商处添加 CNAME 解析记录。
3. 解析生效后系统自动签发 SSL 证书，默认开启 HTTPS 访问。

四、备选方案：Vercel 一键部署

适用场景：海外读者为主，或需要 Notion 内容实时自动同步。

1. Vercel 官网使用 GitHub 账号登录。
2. 导入 Fork 的 NotionNext 仓库，框架会自动识别为 Next.js。

1. 添加环境变量 NOTION_PAGE_ID，点击 Deploy 即可完成部署。

1. 优势：支持 ISR 增量静态再生，Notion 修改内容后数分钟内自动同步，无需手动重建。

五、站点基础配置

1. 发布文章

在 Notion 数据库中新增一行：

• type 选择 Post（普通博客文章）
• status 设为 Published（公开可见）
• 填写标题、分类、标签、摘要后，点击进入页面，即可用 Notion 原生块编辑器撰写内容。

2. 主题与菜单

• 主题切换：新增 Config 类型条目，配置名填 THEME，配置值为主题文件夹名（如 next、heo、matery）。
• 导航菜单：type 选 Menu 为一级菜单，选 SubMenu 为二级子菜单，slug 字段填写跳转路径。
• 配置优先级：Notion 内配置 > 项目本地 blog.config.js 文件。

3. 内容更新规则

• EdgeOne 静态部署：Notion 修改内容后，需在 EdgeOne 控制台手动触发重新部署，站点才会同步更新。

• Vercel 部署：默认开启增量缓存，无需手动操作，数分钟内自动同步。

搭建的博客首页样式如图所示

六、常见问题

1. 站点不显示文章
   • 检查页面 ID 是否准确，Notion 页面是否开启公开分享。
   • 确认文章 status 为 Published。
2. EdgeOne 构建失败
   • 确认构建命令为 npm run export。
   • 可添加环境变量 NODE_VERSION=18 指定 Node 版本，清空构建缓存后重试。
3. 国内访问加载慢
   • 建议替换谷歌字体为国内源，图片资源改用国内图床。
   • 在 EdgeOne 控制台配置缓存规则，提升静态资源命中效率。

总结

总的来说，这套 Notion + NotionNext 的建站方案，最大的好处就是把「写内容」和「搭网站」拆得特别舒服。你不用像用 WordPress 那样操心服务器运维，也不用像用 Hexo 那样在本地编辑器和最终部署效果之间反复横跳 —— 平时写文章就正常用 Notion，排版、分类、插代码嵌图片都所见即所得，写完发布顺手就能同步到网站上，门槛低了很多。

对国内用户来说，部署到腾讯云 EdgeOne 是性价比很高的选择，国内访问速度稳，个人博客用免费额度基本就够；如果想图省事一键搭建，或者主要面向海外读者，Vercel 方案也完全能用。

📎 参考文章

• 从这里开始 | NotionNext 使用说明
• (77 封私信 / 80 条消息) 如何用Notion搭建个人博客网站？ - 知乎
• 基于NotionNext的个人网站|博客搭建与部署实例教程-CSDN博客