给 GitHub Pages 套一层 Cloudflare：不只为“加速”，而是把小站从「能看」升级成「像那么回事」

budflower955
15 阅读7分钟

上篇我们用 GitHub Pages 白嫖上线（没看的往前翻），评论区最集中的灵魂三问：

Cloudflare 到底是啥？我用阿里云/腾讯云 DNS 解析不行吗？为啥还要多这一层？

这篇一次讲透，再给你一套按 CF 官方最稳顺序的图文步骤。

先一句话把 Cloudflare 说清楚

Cloudflare = 你域名的“入口运营商”：DNS 托管 + 全球边缘缓存(CDN) + 自动 HTTPS + 基础防护，站点的代码/构建产物仍然在 GitHub Pages 上。

图片

  • 它不是服务器：不替你 git push，也不跑 Node。

  • 它的价值是：把「纯解析」变成「解析 + 加速 + 证书 + 可观测 + 防护」。

云厂商 DNS 解析 vs Cloudflare：差别到底在哪？

很多人买域名就在阿里云/腾讯云，它们也都能“把域名指向 IP”，所以会疑惑：还要 CF 干嘛？

云服务商（阿里云、腾讯云、AWS 等）确实自带免费 DNS，但仅限 “基础解析”。相当于电话簿**（只负责说“这个域名对应哪个 IP”）。**

而 Cloudflare 是DNS + 安全 + 全球加速一体化，核心是更快、更稳、更安全、免费不限量，尤其适合全球业务与抗攻击场景。Cloudflare相当于电话簿 + 前台接待 + 保安 + 缓存仓

下面讲透区别与选择逻辑：

云厂商自带 DNS：够用，但有边界

它们的定位是 **“配套工具”**，满足自家云资源的基础解析：

  • ✅ 免费、易用、和自家服务器 / 对象存储无缝集成

  • ✅ 国内节点多，国内访问稳定（如阿里云解析）

  • ❌ 核心短板：

  1. 海外节点少，跨境访问延迟高（平均 25–30ms，Cloudflare 约 11ms）

  2. 免费版无 DDoS 防护，DNS 放大攻击 / 洪水攻击易打挂

  3. 查询量有限，超量计费（如 AWS Route53：0.5/域+0.5 / 域 + 0.4 / 百万查询）

  4. 功能弱：DNSSEC 配置复杂、无 CNAME 展平、无全局负载均衡

Cloudflare DNS：专业级 “全能型”

它是全球最大的权威 DNS 服务商，330 + 城市节点、Anycast 全网调度，免费版直接拉满企业级能力：

1. 速度：全球最快，跨境碾压

  • 全球平均延迟**~11ms**，比多数云厂商快 2–3 倍

  • 海外用户（欧美、东南亚）访问体验远超国内云厂商 DNS

  • 解析生效秒级全球同步，云厂商通常 5–15 分钟

2. 安全：免费抗 DDoS+DNSSEC，直接拉满

  • 无限量 DNS DDoS 防护：扛住最高级 DNS 洪水 / 放大攻击（云厂商免费版无）
  • 一键 DNSSEC：防域名劫持、缓存投毒（云厂商多需手动配密钥）
  • 隐藏源站 IP：所有流量经 CF 代理，避免服务器直接暴露（云厂商 DNS 做不到）

3. 功能强：解决云厂商痛点

  • CNAME 展平：根域名（@）可直接指向 CNAME（云厂商通常不允许）
  • 全球负载均衡：按用户地理位置调度（免费版可用）
  • DNS 流量分析：实时监控查询量、攻击特征（云厂商基础版无）

以上查的资料，好多我也不懂，但记住一句话就够了：

  • 云厂商 DNS：“能用、免费、国内稳”，但慢、弱、有限制；

  • Cloudflare DNS：“更快、更安全、全球覆盖、免费不限量”，是独立于云厂商的专业 DNS + 安全层。

什么时候用 Cloudflare？什么时候用云厂商 DNS？

✅ 选 Cloudflare

  • 网站 / APP 面向全球用户（跨境电商、出海 SaaS、外贸站）；

  • 怕DNS 攻击 / 域名劫持，需要高安全；

  • 想用免费、不限量、全球加速的 DNS；

  • 域名不在当前云厂商（如域名在阿里云，服务器在腾讯云）。

✅ 选云厂商自带 DNS

  • 纯国内业务，用户集中在中国大陆；

  • 服务器 / 资源全在同一家云厂商（如阿里云 ECS+OSS + 解析）；

  • 预算极低、仅需基础解析，无抗攻击需求。

给GitHub套上Cloudflare

前提：你已有 一个域名（随便在哪买的都行）+ 网页 能用 xxx.github.io打开

Cloudflare Dashboard 官方地址：dash.cloudflare.com/sign-up

可以直接授权GitHub上的帐户，直接登录到Cloudflare后台。

图片

三个选项只是初始引导入口，后续都可以在控制台里切换 / 开启所有功能，选错了也没关系，进了面板都能改。

图片

图片

注意：不要输入www

图片

选免费的就OK

图片

这一步是 Cloudflare 在帮你检查并接管域名的 DNS 解析，是接入 Cloudflare CDN 的关键步骤

图片

CF 给你的两个 Nameserver，长这样（示例值因人而异）：

图片

把这两个原样复制到你的域名注册商（阿里云/腾讯云/Namecheap…）的 NameServer 设置里，把这两条设为【仅使用】

去哪里改NameServer(即NS服务) - 常见云厂商平台：

  • 阿里云（万网）：控制台 → 域名 → 目标域名「管理」→ DNS 修改/修改 DNS 服务器 → 改为自定义 → 填这两条

  • 腾讯云：控制台 → 私有域解析/域名管理 → 修改 DNS 服务器

修改了NameServer以及确保关闭了 DNSSEC，就可以点击蓝色按钮 I updated my nameservers

  • 改好了 NS、关好了 DNSSEC → 直接点蓝色按钮即可。

  • 没改 NS 就点，Cloudflare 会一直卡在验证阶段。

点击按钮后，Cloudflare 会提示 “正在等待 NS 生效”，这个过程通常需要几分钟到几小时。

下图就是等待验证页面：

图片

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

添加时，最好将按钮置灰

图片

图片

回 GitHub 侧：绑定 Custom domain → 等 HTTPS 绿灯

图片

图片

填入：example.com（或你要的子域/用 www 当主入口就填 www.example.com）

  • Save

  • 等绿勾 → Enforce HTTPS 从灰变可勾 → ✅ 勾上

图片

“如果这里一直红 / Enforce HTTPS 灰色：多半是 NS 还没完全生效，或上一步云朵不小心点了橙。先回 DNS 把云朵拨回灰，等 10~30min 再 Save 触发重试。”

等 HTTPS 绿灯亮了，再开橙色云（加速才算真的开始）

所谓的HTTPS绿灯亮了，是指如下两方面：

1️⃣ DNS check 通过（出现绿勾 / 提示文字）

你会看到类似这样的提示：

图片

2️⃣ Enforce HTTPS 从灰色不可点 → 变成可勾选 → 你勾上了 ✅

勾上后会显示：

图片

这就是前端圈俗称的——「GitHub Pages HTTPS 绿灯亮了」

  • 回到 CF → DNS → 把 A / CNAME 的云朵点成 橙色（Proxied）

    图片

  • 进 CF → SSL/TLS → Overview → 加密模式选 Full（⚠️ 别选 Flexible，最容易出重定向循环）

    图片

  • 进 CF → SSL/TLS → Edge Certificates → 确认：

  • ✅ Always Use HTTPS = On

  • ✅ Minimum TLS Version ≥ 1.2（默认就 OK）

图片

加一条缓存规则，让静态资源真的"飞"

图片

如图配置：

图片

图片

图片

最常见报错 FAQ

❓ Q1：Enforce HTTPS 是灰色的，点不了

A：

  • 先确认 DNS 已经传播：dig 你的域名 +short A能看到 GitHub 的 4 个 IP

  • 确认 CF 云朵是灰的（DNS only），不是橙色

  • 在 GitHub 的 Custom domain 里先清空 → Save →再重新填 → Save，触发重新验证

  • 耐心等 15~60 分钟（首次验证有时候慢）

❓ Q2：开了橙色云之后网站打不开 / ERR_TOO_MANY_REDIRECTS

A：

  • 进 SSL/TLS → Overview → 确保选的是 Full，不是 Flexible

  • 检查 GitHub Pages 设置里 Enforce HTTPS 是否已经勾上（必须是 ✅ 状态再开橙色）

❓ Q3：打开页面是 GitHub 的 404 页面

A：

  • xxx.github.io自己能打开吗？不能的话先回去修 Pages 的 Branch/Folder 设置

  • Custom domain 填的是 example.com但你只配了 www的 CNAME？反过来也会 404 → 两边都要配对齐

❓ Q4：改了代码 push 上去了，线上还是老的

A：

  • 浏览器强刷：Ctrl+F5

  • CF → Caching → Configuration → Purge Everything（或按 URL 清）

  • 以后 CI 自动化可以用 Purge Cache API，手动阶段 Purge 够用了

❓ Q5：我就是不想买域名，能直接用 Cloudflare 加速 xxx.github.io吗？

A： 不能。github.io不是你的域名，NS 改不到你名下，CF 没法接管。想要 CF 就得绑你自己买的域名，这是硬性前提，没绕的。

结束

说实话，第一次把自定义域名配上、锁头变绿、CF 小云朵亮橙色的那一刻，感觉就像从「本地跑起来的 demo」正式毕业成了「互联网上的一个据点」😂

💬 你们卡在哪一步了？

  • 买域名是在阿里云还是腾讯云？（评论区说平台，我告诉你 NS 在那找）

  • Enforce HTTPS 一直灰的？把 dig 你的域名 +short A的输出截图甩过来，我帮你看是哪条记录没吃上

  • 成功亮灯的：把你的 example.com链接发评论区 🚀 让咱们前端兄弟互相串个门

👉 下期如果你们想看：用 GitHub Actions 自动 build + 自动 deploy 到 Pages（连手动传 dist都省了），评论区扣 GitHub Actions，人多我就开搞。

感谢看到这里！ 如果本文对你有所帮助，欢迎点赞支持。 前端实战笔记、踩坑总结会持续更新，更多干货首发于公众号【前端晨话】，欢迎关注 ~

avatar
文章
阅读
粉丝