静态网站只有 HTML、CSS、JavaScript 和构建后的资源,不需要数据库或常驻后端。把这类网站放到 Cloudflare Pages,可以省去 VPS、Nginx、端口和证书的日常维护。代码由 GitHub 保存,Pages 负责构建和托管,DNS 服务商负责把自定义域名指向网站。

上线前需要准备什么

  • 一个能够正常构建或直接打开的静态网站
  • 一个 GitHub 仓库
  • 一个 Cloudflare 账号
  • 一个可以修改 DNS 记录的域名

先确认项目的发布目录。纯 HTML 项目可能直接发布仓库根目录;Astro、Vite 等项目通常需要执行构建命令,再发布 dist。目录填错时,部署可能显示成功,打开后却没有目标页面。

理清两条链路

部署时,代码沿着下面的方向流动。

本地项目 → GitHub 仓库 → Cloudflare Pages → 线上文件

访客打开网站时,浏览器走的是另一条路。

浏览器 → DNS 查询 → Cloudflare Pages → HTTPS 响应 → 页面渲染

这两条链路分开以后,排错会简单很多。Pages 提供的 pages.dev 地址异常,应先检查代码、构建命令和输出目录。pages.dev 正常而自定义域名异常,检查范围就能收窄到 DNS、域名验证和证书。

连接 GitHub 与 Pages

先把网站推送到 GitHub,并确定用于生产发布的分支。随后在 Cloudflare Pages 中导入仓库,填写生产分支、构建命令和输出目录。

常见配置如下。

项目类型 构建命令 输出目录
纯 HTML、CSS、JavaScript 留空或使用平台允许的空构建配置 文件所在目录
Astro npm run build dist
Vite npm run build dist

首次部署完成后,先打开平台生成的 *.pages.dev 地址。确认状态码、页面标题、样式和主要交互均正常,再继续绑定域名。

curl -I https://项目名.pages.dev/

预期结果包含成功的 HTTP 状态码和正确的内容类型。浏览器检查仍然不可省略,因为 curl -I 看不到布局和前端交互。

绑定自定义域名

在 Pages 项目中添加自定义域名。若域名的权威 DNS 仍由其他服务商管理,需要在该服务商处增加 CNAME。

类型  CNAME
名称  knowledge
目标  项目名.pages.dev.

部分 DNS 控制台会自动处理目标末尾的点,部分控制台会把没有末尾点的目标当成相对域名。保存后要检查最终记录,确保目标没有被拼成下面这种形式。

项目名.pages.dev.你的域名.

可以通过公共 DNS 查询验证记录。

curl -fsS \
  'https://dns.google/resolve?name=你的完整域名&type=CNAME'

DNS 返回正确结果后,等待 Pages 将自定义域名标记为可用,并确认 HTTPS 已生效。DNS 缓存受 TTL 影响,刚修改记录时,不同网络可能在一段时间内得到不同结果。

按层验收

按固定顺序检查,可以避免同时追查多个无关问题。

本地构建
   ↓
GitHub 生产分支
   ↓
Pages 临时域名
   ↓
公共 DNS
   ↓
自定义域名与 HTTPS
   ↓
页面内容
  1. 本地构建成功,预览页面正常。
  2. GitHub 的生产分支包含目标提交。
  3. pages.dev 地址能够返回目标页面。
  4. 公共 DNS 返回正确的 CNAME。
  5. Pages 中的自定义域名处于可用状态。
  6. 正式域名通过 HTTPS 返回目标页面。
curl -I https://项目名.pages.dev/
curl -I https://你的完整域名/

curl -sS https://你的完整域名/ \
  | rg -o '<title>[^<]+</title>' \
  | head -1

最后一条命令可以确认服务器返回的页面标题,避免只看到 200 就误以为内容已经更新。

层级 检查方法 成功标志
本地 运行项目构建 成功生成目标路由
GitHub 查看生产分支 最新提交与待发布版本一致
Pages 打开临时域名 返回目标页面
DNS 查询 CNAME 指向正确的 pages.dev. 地址
HTTPS 请求正式域名 返回成功状态码
内容 检查标题和关键页面 页面属于目标版本

常见故障

现象 先检查 问题通常所在的位置
本地构建失败 终端错误和依赖版本 代码、依赖或构建配置
Pages 部署失败 Deployment 日志 构建命令或输出目录
pages.dev 返回 404 发布目录和静态路由 部署产物
临时域名正常,正式域名失败 公共 DNS CNAME、缓存或域名验证
正式域名返回 200,内容不对 页面标题和提交号 旧部署、缓存或生产分支

pages.dev 无法访问

查看 Pages 的部署日志,核对生产分支、构建命令和输出目录。纯静态项目不需要虚构一套构建流程,有构建工具的项目则必须发布生成后的目录。

自定义域名无法访问

先确认 pages.dev 正常,再查询公共 DNS。CNAME 目标错误、记录尚未传播或 Pages 域名验证失败,都只影响自定义域名这一段。

CNAME 被追加当前域名

DNS 服务商把目标识别成了相对域名。按照该服务商的规则,将目标改为完整域名,必要时补上末尾的 .,保存后重新查询公共 DNS。

Pages 一直显示域名验证失败

先保证公共 DNS 已经返回正确记录,再重试验证。若控制台保留了旧的失败任务,可以移除失败的域名绑定后重新添加。删除绑定前保留正确的 DNS 记录,避免再次引入变量。

GitHub CLI 登录出现网络错误

检查终端中的代理变量和本机代理端口是否一致。代理变量存在,但对应程序没有运行时,请求也会失败。

env | rg -i '^(http|https|all)_proxy='
ss -lntup
gh auth status

日常发布与恢复

网站上线后,不需要每次重新配置域名。日常更新完成本地验证、提交和推送后,生产分支会触发下一次 Pages 部署。

git status --short --branch
npm run build
git diff --check
git add 计划发布的文件
git commit -m "Update website content"
git push

具体的分支安排、Preview 验收和回滚方法见《用 Git 维护个人网站》。部署侧继续确认生产部署对应目标提交,并检查临时域名、正式域名和页面内容。域名、Pages 项目或平台目标没有变化时,不要改动 DNS。