跳到主要内容

Cloudflare + GitHub Pages 最佳实践：全网最清晰的一站式配置指南

· 阅读需 5 分钟
管理员
管理员
站长

利用 GitHub Pages + Cloudflare CDN 是目前最受欢迎、成本最低、效果最稳定的静态网站加速方案之一。

GitHub Pages 提供免费、稳定的静态托管服务；Cloudflare 提供全球 CDN、缓存、SSL、DDoS 防护。二者组合后，几乎可以做到 零成本、零运维、全球可访问，非常适合博客、文档站点、个人主页。

本文并非入门教程，而是一份 基于大量实测经验整理的最佳实践配置指南，适合已经拥有域名并希望获得稳定加速效果的用户，可直接照做。

1. 为什么要用 Cloudflare 加速 GitHub Pages？​

GitHub Pages 的服务器节点主要位于美国，国内及部分海外地区直连访问速度较慢，稳定性也受限。

Cloudflare 是全球最大的 CDN 服务商之一，节点遍布世界各地，能够让用户从最近的边缘节点获取缓存内容，大幅提升访问速度与稳定性。

实践与资料表明：

  • Cloudflare 能显著改善 GitHub Pages 的访问延迟，尤其是国内访问体验。
  • Cloudflare 免费计划对个人博客完全够用。
  • Cloudflare 可为 GitHub Pages 提供 CDN、HTTPS、DNS 管理与缓存加速能力。

2. 最佳实践配置流程总览​

完整配置流程如下：

  1. 准备域名并接入 Cloudflare。
  2. 配置 Cloudflare DNS 指向 GitHub Pages。
  3. 在 GitHub Pages 启用 Custom Domain。
  4. 配置 Cloudflare SSL 与基础性能优化。
  5. 启用 Cache Everything 缓存规则（核心）。
  6. 国内 / 全球访问优化策略。
  7. 常见问题排查。

3. 配置步骤详解（最佳实践版）​

第 1 步：域名接入 Cloudflare​

  1. 登录 Cloudflare 控制台，点击「添加站点」。
  2. 输入你的主域名（不带 www）。
  3. 套餐选择 Free。
  4. Cloudflare 会扫描现有 DNS 记录。
  5. 按提示将域名注册商的 NS 修改为 Cloudflare 提供的 NS。

完成后，域名即由 Cloudflare 托管。

第 2 步：配置 Cloudflare DNS 指向 GitHub Pages​

GitHub Pages 官方要求使用以下 4 个 A 记录 IP：

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

在 Cloudflare DNS 中添加：

  • 类型：A
  • 名称：@
  • IP：上述四个地址（各一条）
  • TTL：Auto
  • 代理状态：Proxied（小橙云必须开启）

说明：

  • 这 4 个 IP 来自 GitHub 官方文档，不是经验值。
  • 未开启 Proxied 将无法使用 Cloudflare CDN。

第 3 步：在 GitHub Pages 配置自定义域名​

  1. 进入 GitHub 仓库 → Settings → Pages。
  2. 在 Custom Domain 中填写你的域名并保存。
  3. GitHub 会自动检测 DNS 配置。

成功时会显示：DNS check successful

随后勾选：

  • Enforce HTTPS

GitHub 会自动为你的域名申请并维护 SSL 证书。

第 4 步：Cloudflare SSL 与基础优化配置​

SSL 设置（非常重要）​

进入 Cloudflare → SSL/TLS：

  • SSL Mode：Full
  • 开启 Always Use HTTPS
  • 开启 Automatic HTTPS Rewrites

说明：

  • GitHub Pages 本身支持 HTTPS。
  • 使用 Flexible 极易导致「重定向次数过多」。
  • 对绝大多数用户，Full 即可，无需 Strict。

性能优化设置​

进入 Speed → Optimization：

  • 开启 Brotli
  • 开启 Auto Minify（HTML / CSS / JS）
  • 关闭 Rocket Loader

说明： Rocket Loader 会重排 JS 加载顺序，对 Vue / React / Astro 等现代前端框架不友好，容易引发问题。

4. Cloudflare 缓存加速最佳实践（核心）​

对于纯静态站点，不开启 Cache Everything，Cloudflare 基本只是在做 DNS 和 TLS。

4.1 为什么 GitHub Pages 必须 Cache Everything？​

Cloudflare 默认 不会缓存 HTML 页面，而 GitHub Pages 的内容几乎全部是静态 HTML。

因此，必须显式开启缓存规则。

4.2 Cache Everything 推荐规则​

进入 Rules → Cache Rules（或 Page Rules）：

规则示例：

  • URL：yourdomain.com/*
  • Cache Level：Cache Everything
  • Edge Cache TTL：1 month
  • Browser Cache TTL：1 day

效果：

  • HTML 页面直接由 Cloudflare 边缘节点返回。
  • 极大减少 GitHub Pages 回源请求。
  • 加载速度显著提升。

4.3 绕过缓存规则（如有后台 / API）​

如果站点包含动态路径，建议添加绕过规则：

  • /admin/* → Cache Level: Bypass
  • /api/* → Cache Level: Bypass

4.4 内容更新后的正确刷新方式​

当页面更新但仍显示旧内容：

  • Cloudflare Dashboard → Caching → Purge Everything

5. 国内访问最佳实践（重点）​

Cloudflare 免费节点在中国大陆不可用，国内访问通常经由香港、日本、新加坡节点，但仍明显快于直连 GitHub Pages。

实践结论：

  • Cloudflare 对 GitHub Pages 的国内访问有显著改善。
  • 免费方案已足够个人博客使用。

可选进阶方案​

方案成本复杂度效果
仅 Cloudflare免费⭐明显优于直连
智能 DNS 分流低⭐⭐国内体验显著提升
Workers + 国内 CDN中⭐⭐⭐⭐接近商业站点

说明： Cloudflare 免费版不是国内 CDN，但它是目前性价比最高的全球加速方案。

6. 常见问题排查​

1）GitHub Pages DNS 检查失败​

常见原因：

  • 未配置完整的 4 个 GitHub Pages IP。
  • CNAME / A 记录错误。

2）访问出现重定向次数过多​

原因：

  • SSL 模式使用了 Flexible。

解决：

  • 改为 Full 或 Full (Strict)。

3）网站更新后仍显示旧页面​

原因：

  • Cloudflare 缓存未刷新。

解决：

  • 手动 Purge Cache。

7. 完整流程助记版​

  1. 域名 → Cloudflare → 修改 NS
  2. Cloudflare DNS → GitHub Pages 4 个 IP
  3. GitHub Pages → Custom Domain + HTTPS
  4. Cloudflare → SSL: Full + 强制 HTTPS
  5. Cloudflare → Cache Everything
  6. Cloudflare → Brotli + Minify
  7. 国内访问 → 可选智能 DNS / Workers

8. 结语​

Cloudflare + GitHub Pages 是目前 最稳、最省钱、最省心 的个人网站加速方案。

通过本指南，你将获得：

  • 全球 CDN 加速
  • 自动 HTTPS
  • HTML 全缓存，大幅减少回源
  • 国内访问体验显著提升
  • 免费、稳定、几乎零运维

无论是博客、文档站点还是静态项目，都非常推荐采用这一组合方案。