这篇文章要解决什么问题

如果你有一小段程序想放到公网让人能访问，又不想为了它单独买一台服务器、配一套环境，那 Cloudflare Pages 是一个省心的选择：它不需要服务器、不需要自己管部署环境，整个流程从注册域名到最终访问，差不多十来分钟就能走完。

整个过程其实就五个环节，缺一不可：

  1. 自定义域名怎么申请、怎么拿到手。
  2. 把域名托管进 Cloudflare。
  3. 在 Cloudflare 建一个 KV 命名空间，备用存储。
  4. 建一个 Pages 项目，把程序上传上去并配好环境变量和 KV。
  5. 把自己的自定义域名通过 CNAME 绑到这个 Pages 站点上。

下面按顺序一步步来。

第一步：申请一个自定义域名

Pages 最终是要挂在一个域名上的。域名分两类：花钱买来的正式域名，和免费域名。想先玩个明白、又不想花钱，可以从免费域名入手。

下面这种免费域名注册方式，注册登录后通常可以免费领取若干个永久域名，根域名一般提供 ccwu.cc、us.ci 之类的选项，完全免费。不用到处找注册站，直接走我们公众号领取即可：

  1. 微信搜索并关注**「梦兽编程」**公众号。
  2. 在公众号对话框里回复关键词 免费域名。
  3. 公众号会自动回复免费域名的申请入口，按提示注册账号并领取。

提示：没收到自动回复？检查关键词有没有多打空格（就是「免费域名」四个字，不要加多余符号），或确认公众号确实叫「梦兽编程」。

申请免费域名

拿到域名之后，你手上就有了一个形如 your-site.ccwu.cc 的次级域名。记住这个完整的次级域名——后面第 5 步绑自定义域要用到它。

提示：免费域名适合学习和试验。真要长期、正式地用，还是建议买一个正经域名（比如 .com / .cn），更稳定，也不容易被平台回收。

第二步：把域名托管进 Cloudflare

登录 Cloudflare 平台（没有账号就先注册登录），然后把你上一步申请到的域名托管（Add Site） 进来。

Cloudflare 会读取你域名的 DNS 记录，并让你把域名的 NS 记录 改成它提供的那一组。照做即可，改完等 DNS 传播，Cloudflare 后台看到这个域名的状态变成生效，就说明托管成功了。

域名托管进 Cloudflare

域名托管进 Cloudflare 之后，后面所有的 Workers、Pages、KV、自定义域名绑定，都在这同一个 Cloudflare 账户下操作，账号要一致，别用错。

第三步：创建 KV 命名空间

很多部署到 Pages 上的程序需要一个小数据库来存配置、存状态，Cloudflare 对应的能力叫 KV（Key-Value）。

在 Cloudflare 后台找到 存储和数据库 → Workers KV，点击创建一个 KV 命名空间，起个名字记住就行，后面绑到 Pages 项目时会用到它。

创建 KV 命名空间

第四步：在 Pages 上传并部署程序

有了域名和 KV，接下来是核心环节：把程序部署到一个 Pages 项目里。程序包不在这篇文章里直接分发，需要先到我们的公众号获取，再上传到 Pages。

4.1 获取程序包

  1. 打开微信，搜索并**关注「梦兽工程」**公众号。
  2. 在公众号对话框里，回复关键词 cfpages。
  3. 公众号会自动回复程序的下载入口，按提示下载你需要的压缩包（一般是 .zip 文件）。

把下载好的压缩包留在本地桌面或你知道的位置，下一步就要用到它。

提示：没收到自动回复？检查关键词有没有多打空格，或确认公众号确实叫「梦兽工程」。

4.2 上传并部署到 Pages

进入 Cloudflare 后台的 Workers 和 Pages。

Workers 和 Pages 入口

在创建页面里选择 Pages，并选择通过上传构建好的压缩包来创建（而不是从代码仓库绑定）。

选择创建 Pages 项目

点击上传，选你第 4.1 步从公众号获取的那个压缩包（通常是 main.zip 一类）上传上去，Cloudflare 会自动解压并部署。

上传程序压缩包部署

首次部署之后，还需要做两件事，程序才能真正跑起来：

1. 定义环境变量。 在 Pages 项目的设置里找到环境变量配置，按程序要求填写。最常见的一个变量是管理员密码——变量名按程序要求填，值填你想设的密码，保存。

2. 绑定 KV 命名空间。 在同一个设置区里找到 KV 命名空间绑定，点击添加，选第 3 步你创建的那个 KV 命名空间（或新建一个）并绑定到项目。

这两项配好之后，重新部署一次，变量和 KV 才会真正生效。

第五步：把自定义域名 CNAME 到你的 Pages 站点

部署跑通之后，Cloudflare 会给你的 Pages 项目分配一个默认域名（xxx.pages.dev）。但我们要用的，是自己第 1 步申请的那个自定义域名。这就要在第 1 步的自定义域和第 4 步的 Pages 站点之间，搭一座桥——用 CNAME。

在 Pages 控制台的 自定义域名（Custom domains） 选项里，点击添加自定义域名，填入你完整的次级域名。注意这里填的是次级域名，不要填根域名。比如你申请到的是 your-site.ccwu.cc，那这里就填 your-site.ccwu.cc。

给 Pages 绑定自定义域名

填完之后，Cloudflare 会提示你去做一件事：回到你域名的 DNS 服务商那里，给这条自定义域加一条 CNAME 记录，指向 *.edgetunnel.pages.dev。

添加 CNAME 记录指向 edgetunnel.pages.dev

这一步很关键，容易出错，注意两点：

  • CNAME 的目标值必须是 *.edgetunnel.pages.dev，不要写成你 Pages 项目自己的 pages.dev 默认域名，那是两回事。
  • 因为你的域名已经托管在 Cloudflare，所以这条 CNAME 记录就在 Cloudflare 自己后台的 DNS 页面里添加，最省事。

CNAME 记录加好、DNS 生效后，你在浏览器里访问 https://你的次级域名，看到的就是你刚部署上去的程序了。

最后顺一遍

从头到尾理一遍，其实就这五步：

  1. 申请域名 —— 注册一个免费域名，拿到完整的次级域名。
  2. 托管进 Cloudflare —— 改 NS 把域名放进你的 Cloudflare 账户。
  3. 建 KV —— 在 Workers KV 创建一个命名空间，备用。
  4. 建 Pages 并部署 —— 上传程序压缩包，配好环境变量和 KV 命名空间，重新部署。
  5. 绑自定义域 —— 在 Pages 加自定义域，再在 DNS 里加一条 CNAME 指向 *.edgetunnel.pages.dev。

前两步解决"域名从哪来、归谁管"，第三步是"给程序准备存储"，第四步是"把程序放上去跑起来"，第五步是"用自己的域名访问它"。五步走完，一个带自定义域名的 Pages 站点就上线了。

没看懂？来群里手把手帮你

上面步骤里如果哪一步卡住了，别硬扛——直接来我们群里，问具体到哪一步、报错长什么样，群里直接帮你看。

扫码关注「梦兽编程」公众号

  • 扫码关注公众号「梦兽编程」，对话框回复 免费域名，即可领取免费域名的申请入口（对应本文第一步）。
  • 想直接找人问：加入 QQ 群 1173432413，手把手带你走通整个流程。