为 GitHub Pages 博客配置自定义域名与 Cloudflare 加速

前言

GitHub Pages 默认提供 yourname.github.io 这样的二级域名，虽然能用，但不够专业。配置自己的域名不仅能让博客更有辨识度，还能配合 Cloudflare 获得 CDN 加速、DDoS 防护、HTTPS 加密等一系列好处。

本文记录从阿里云购买域名到Cloudflare 托管 DNS，再到GitHub Pages 绑定自定义域名的完整流程。

整体流程：阿里云（域名注册商） → Cloudflare（DNS 托管 / CDN） → GitHub Pages（博客托管）

一、在阿里云购买域名

1.1 搜索并选购域名

登录阿里云官网，进入"域名注册"页面，搜索你想要的域名。

14.png

选购建议：

  • 首选 .com / .dev / .me 等常见后缀
  • 域名尽量简短、易记、与博客品牌一致
  • 首年价格通常较低，续费价格会贵一些

1.2 完成实名认证

根据工信部要求，国内注册域名必须完成实名认证。提交身份证信息后通常 1-3 个工作日审核通过。

16.png

1.3 购买域名以及等待审查

按照步骤购买域名后，等待若干小时，直到审核通过

image.png

1.4 修改 DNS 服务器（关键步骤）

域名购买完成后，不要直接在阿里云做解析，我们要把 DNS 交给 Cloudflare 管理。

进入阿里云控制台 → 域名列表 → 管理 → DNS 修改，将 DNS 服务器改为 Cloudflare 后续提供的地址。

这一步会在后面的 Cloudflare 配置中获得具体地址。

二、在 Cloudflare 添加站点

2.1 注册 / 登录 Cloudflare

访问 Cloudflare 官网 注册账号，添加站点，免费套餐（Free Plan）足以满足个人博客需求。

12.png

55.png

2.2 添加站点

点击 Add a Site，输入你的域名（例如 example.com），Cloudflare 会自动扫描现有 DNS 记录。

2.3 扫描并导入 DNS 记录

Cloudflare 会扫描域名的现有 DNS 记录（此时扫描结果为空，因为阿里云上还没有配解析）。扫描完成后点击 Continue。

2.4 修改域名服务器（Nameservers）

Cloudflare 会分配两个 Nameserver 地址，例如：

fiona.ns.cloudflare.com
max.ns.cloudflare.com

image.png

回到阿里云控制台 → 域名列表 → 点击"管理" → DNS 修改 → 将 DNS 服务器改为这两个地址。

13.png

DNS 修改后，全网生效通常需要 几分钟到 48 小时，但大多数情况下 10~30 分钟即可生效。

三、配置 DNS 解析记录

3.1 添加 GitHub Pages 解析

在 Cloudflare Dashboard → DNS → Records，添加以下记录：

类型 名称 内容 代理状态
A @ 185.199.108.153 开启代理（橙色云朵）
A @ 185.199.109.153 开启代理（橙色云朵）
A @ 185.199.110.153 开启代理（橙色云朵）
A @ 185.199.111.153 开启代理（橙色云朵）
CNAME www yourname.github.io 开启代理（橙色云朵）

如果使用 www 子域名做跳转，也可以将 www 的 Proxy 关闭，设置 Page Rule 做 301 重定向到裸域。

image.png

3.2 开启严格 SSL/TLS 模式

在 Cloudflare 侧边栏 → SSL/TLS → Overview：

  • 将模式改为 Full (strict)
  • 这样 Cloudflare 到访客之间是 HTTPS，Cloudflare 到 GitHub Pages 之间也是 HTTPS

image.png

3.3 开启 Always Use HTTPS（可选）

SSL/TLS → Edge Certificates → 开启 Always Use HTTPS，自动将所有 HTTP 请求重定向到 HTTPS。

![[file-20260609181430427.png]]

四、在 GitHub Pages 绑定自定义域名

4.1 进入仓库设置

打开你的 GitHub Pages 仓库 → Settings → Pages。

4.2 填写自定义域名

在 Custom domain 中输入你的域名（例如 example.com），点击 Save。

image.png

4.3 Custom domain 的作用

以我的博客为例：

  • 默认部署地址：https://pc-blog.github.io/next/

  • 访问博客需要带上 /next 路径前缀

配置 Custom domain 后的变化

配置项 配置前 配置后
访问地址 https://pc-blog.github.io/next/ https://lxpavilion.top/
路径前缀 需要 /next 无需 /next，直接根路径访问
URL 美观度 一般 专业、简洁

核心机制说明

  1. 域名绑定
    在 GitHub Pages 的 Custom domain 中填入 lxpavilion.top 后，GitHub 会自动在仓库根目录生成一个 CNAME 文件，内容为 lxpavilion.top。这个文件告诉 GitHub：“当用户访问这个域名时，从此仓库提供内容。”

  2. 路径重定向（关键）

    • 配置前：GitHub Pages 默认将仓库内容托管在 /{仓库名} 路径下

    • 配置后：GitHub Pages 会将仓库内容托管到域名根路径 (/)

    • 这意味着：原本需要 /next/xxx 才能访问的资源，现在可以直接通过 /xxx 访问

  3. 域名解析必须正确

    注意：即使 DNS 解析正确指向了 GitHub Pages 的 IP，如果不在 GitHub 的 Custom domain 中填写域名，GitHub 也不会响应这个域名的请求。Custom domain 是告诉 GitHub “允许这个域名访问我的仓库”的开关。

需要同步修改的内容

由于博客的访问路径从 /next/ 变成了 /，项目中所有资源的引用路径都需要相应调整：

需要修改的文件/位置：

资源类型 修改前 修改后
图片路径 /next/images/logo.png /images/logo.png
CSS 路径 /next/css/style.css /css/style.css
JS 路径 /next/js/main.js /js/main.js
内部链接 /next/about.html /about.html

4.4 等待 DNS 校验

GitHub 会自动验证域名所有权。如果 DNS 已经生效，会出现绿色提示。如果提示未验证，等待 DNS 传播后再次点击 Save。

4.5 勾选 Enforce HTTPS（可选）

GitHub Pages 会为你的自定义域名自动申请 Let's Encrypt 证书。等待几分钟后，勾选 Enforce HTTPS。

注意：由于此时流量经过 Cloudflare，而Cloudflare托管服务以及开启了相关功能，那么 Enforce HTTPS就无法启动，这是正常现象

4.6 CNAME 文件（重要）

如果你使用 GitHub 的自动 Pages 构建和部署，绑定域名后 GitHub 会自动在仓库根目录生成 CNAME 文件，内容为你的域名。建议将这个文件保留在版本控制中，否则每次部署都要手动配置Custom domain 字段。

![[file-20260609181656981.png]]

4.7 演示

可以看到，通过自定义域名可以正常访问我的博客网站

image.png

你的博客现在既有自定义域名的专业感，又享受了 Cloudflare 的全球加速和安全防护。🚀

📝 本文发布于 栏轩阁

🌐 欢迎关注我的其他平台：

📧 联系我：2194844980@qq.com

posted @ 2026-06-09 23:08  PC2005-cloud  阅读(50)  评论(0)    收藏  举报