首页/文章/技术教程
技术教程 / FIELD NOTES

从零部署 NotionNext 到 Cloudflare Pages:完整实践

从安装依赖、Notion 页面准备到 Cloudflare Pages 静态发布,梳理完整流程与常见限制。

适合哪些场景?

NotionNext 适合将 Notion 中的文章做成独立博客。Cloudflare Pages 静态部署适合内容更新不频繁、重视访问速度和托管成本的站点。

环境准备

  • Node.js 22(以项目的 .nvmrc 为准)
  • Yarn 1.22.22
  • Cloudflare 账号及 Pages 写入权限
  • 一个可供网站读取的 Notion 博客数据库

下载并构建

git clone https://github.com/notionnext-org/NotionNext.git
cd NotionNext
corepack yarn install --frozen-lockfile

在准备好的环境中配置 NOTION_PAGE_ID,并确认目标 Notion 页面已公开。私有 Notion 页面不能由默认的匿名接口读取。

corepack yarn export

构建成功会生成 out 文件夹,包含可直接托管的 HTML、CSS、JavaScript 和图片等资源。

发布到 Cloudflare Pages

npx wrangler login
npx wrangler pages project create my-notion-blog --production-branch main
npx wrangler pages deploy out --project-name my-notion-blog --branch main

执行前确认 wrangler whoami 的账号是你希望使用的 Cloudflare 账号。首次部署完成后可使用 *.pages.dev 域名访问。

通过 Cloudflare 平台自动构建

如果连接 Git 仓库,构建命令选择 yarn export,输出目录填 out。使用 V3 构建镜像时建议明确指定 NODE_VERSION=22、YARN_VERSION=1.22.22,并配置 NOTION_PAGE_ID。

三个重要限制

  1. 静态内容不是实时更新:Notion 中修改文章后,需要重新构建和部署。
  2. 静态托管不会运行服务端 API:登录、动态搜索与后台能力不能仅靠静态导出实现。
  3. 公开数据应审查隐私:公开博客数据库不要包含口令、API Key 或未授权公开的信息。

排障检查

遇到空白主页时,先确认 Notion 页面 ID 与公开分享状态;遇到构建报错时,检查 Node 和 Yarn 版本;部署成功但打不开时,分别核对 Cloudflare Pages 的部署记录与 DNS 状态。