手把手教你用 NotionNext + Cloudflare Pages 搭建免费静态博客站

🚀

本教程完整记录了 ligan.cc 的搭建过程：从 Notion 数据源 → NotionNext 项目 → 静态构建 → Cloudflare Pages 部署 → 绑定自定义域名。跟着做，你也能拥有自己的博客站。

一、整体架构

这个方案的核心思路：用 Notion 作为内容管理系统（CMS），用 NotionNext 把 Notion 内容渲染成网站，再用 Cloudflare Pages 免费托管静态文件。

内容管理：Notion 数据库（免费，可随时编辑）

网站框架：NotionNext（开源，支持 20+ 主题）

静态构建：yarn export（Next.js 静态导出）

托管部署：Cloudflare Pages（免费 CDN + HTTPS）

域名绑定：Cloudflare DNS 托管 + 自定义域名

二、准备 Notion 数据源

2.1 创建博客数据库

NotionNext 要求数据源是一个「数据库」（Database），不是普通页面。创建一个包含以下属性的数据库：

Name（标题，必选）— 文章标题

status（状态）— Published 表示发布

type（类型）— Post=文章，Page=单页（如关于页）

category（分类）— 如前沿科技 / AI / 工业设计

tags（标签）— 多选标签

date（日期）— 文章发布日期

summary（摘要）— 列表页显示的简介

slug（别名）— 英文短横线格式的 URL 别名

2.2 设置数据库为公开

在 Notion 页面右上角点击「Share / 分享」→「Publish / 发布到网页」，让数据库可被公开访问（NotionNext 免 token 模式需要）。

⚠️

关键经验：NOTION_PAGE_ID 必须填数据库的 ID，且要写成无横线的 32 位十六进制格式（如 234a8ab85c9b41a4b0d951afd44f499a），否则会构建失败。

三、部署 NotionNext 项目

3.1 克隆项目

3.2 配置环境变量

创建 .env.local 文件，写入：

3.3 静态构建

构建完成后会生成 out/ 目录，这就是纯静态网站文件。

🔧

注意：构建前先停掉占用 out 目录的本地服务器（如 python -m http.server），否则会报 EBUSY 错误。

四、部署到 Cloudflare Pages

4.1 安装 wrangler CLI

4.2 上传静态文件

部署完成后会得到一个 *.pages.dev 的免费域名，可以直接访问。

五、绑定自定义域名

5.1 在 Cloudflare 添加站点

5.2 修改域名 NS

到你购买域名的服务商（如 DNSPod/腾讯云）控制台，把域名的 NS 修改为 Cloudflare 分配的地址。等待生效（注册局 RDAP 可查）。

5.3 添加 DNS 记录

在 Cloudflare DNS 页面添加：

5.4 绑定 Pages 域名

Cloudflare 会自动签发 SSL 证书（Google CA），几分钟后 HTTPS 生效。

六、日常更新流程

因为是静态站点，每次修改 Notion 内容后需要重新构建部署：

🤖

自动化建议：可以用定时任务（cron）每天自动构建部署。本项目就配置了「每日科技博客」任务：自动搜索新闻 → 写文章 → 写入 Notion → 自动构建部署。

七、常见问题

Q1: 页面空白 / 无法获取 Notion 数据？

检查 NOTION_PAGE_ID 是否为数据库 ID（不是页面 ID），且为无横线格式；确认数据库已公开分享。

Q2: 导航栏消失？

检查 blog.config.js 中 CUSTOM_MENU 是否为 false。若为 true 且 Notion 中没有 Menu 类型页面，导航会被空菜单覆盖。

Q3: 文章封面一样？

在 Notion 中给每篇文章设置 page cover（封面图），构建后列表页会自动显示。

Q4: 图片不显示？

外部 URL 图片建议用 Notion 能访问的图源（如 Unsplash），或直接把图片粘贴进 Notion 页面。

八、资源链接

NotionNext 项目：github.com/notionnext-org/NotionNext

主题预览：preview.tangly1024.com/?theme=heo

Cloudflare：dash.cloudflare.com

示例站点：ligan.cc（本文作者站点）

🙌

如果你按这个教程搭好了自己的站，欢迎来 ligan.cc 留言交流！