GitHub Pages 网站托管：通过 Cloudflare 配置自定义域名和免费 HTTPS – wiki基地

---

GitHub Pages 网站托管：通过 Cloudflare 配置自定义域名和免费 HTTPS

引言

在当今数字时代，拥有一个个人网站或项目展示页面变得越来越重要。无论是技术博客、个人简历、开源项目文档还是简单的静态宣传页，一个易于搭建且成本低廉的托管方案是许多人的首选。GitHub Pages 正是这样一种服务，它允许你直接从 GitHub 仓库托管静态网站，对于 GitHub 用户来说，它是完全免费的。

然而，GitHub Pages 默认提供的域名是 yourusername.github.io 或 repositoryname.github.io，这对于个人品牌或专业形象来说可能不够理想。使用自定义域名（例如 yourdomain.com）可以提升网站的专业度和可信度。此外，确保网站使用 HTTPS 加密连接是保护用户数据和提升网站排名的行业标准。虽然 GitHub Pages 自身为 .github.io 域名提供了 HTTPS，但在配置自定义域名后，你需要额外的步骤来确保 HTTPS 的可用性。

这时，强大的 Cloudflare 服务就派上用场了。Cloudflare 提供免费的 DNS 管理、CDN 加速、基础安全防护以及最重要的——免费的 Universal SSL/TLS 证书，可以轻松地为你的自定义域名网站启用 HTTPS。

本文将带你一步步完成整个过程：从搭建基础的 GitHub Pages 网站，到注册自定义域名，再到使用 Cloudflare 配置 DNS 记录和 HTTPS，最终实现一个拥有自定义域名、免费 HTTPS 并享有 CDN 加速的专业静态网站。

目标读者

本文适合对 GitHub 有基本了解，希望搭建个人博客、项目主页或其他静态网站，并为其配置自定义域名和免费 HTTPS 的开发者、设计师、学生或任何技术爱好者。你不需要是网络领域的专家，但需要按照步骤仔细操作。

所需准备

在开始之前，请确保你已经拥有以下几项：

1. 一个 GitHub 账户。
2. 一个准备用于托管网站的 GitHub 仓库（可以是新的或现有的）。
3. 一个已经注册并拥有的自定义域名（例如通过 GoDaddy, Namecheap, 阿里云等注册商购买）。
4. 一个 Cloudflare 账户（如果没有，配置过程中可以免费注册）。

第一步：搭建基础的 GitHub Pages 网站

如果你已经有一个准备好的 GitHub Pages 网站，可以跳过此步。否则，我们将从零开始创建一个。

1. 创建或选择仓库：

   • 用户/组织网站: 创建一个名为 yourusername.github.io (将 yourusername 替换为你的 GitHub 用户名或组织名) 的新公共仓库。这个仓库的 main 或 master 分支的内容将作为你的网站。
   • 项目网站: 选择一个现有的公共仓库，或者创建一个新的公共仓库（名称随意）。网站内容将放在特定分支（通常是 gh-pages）或特定文件夹（通常是 main 或 master 分页下的 /docs 文件夹）中。

2. 添加网站内容：

   • 在你的仓库中，创建或上传你的网站文件。最基本的文件是 index.html，这是你网站的首页。
   • 你也可以添加 CSS、JavaScript、图片等文件。
   • 对于用户/组织网站 (yourusername.github.io 仓库)，将文件直接放在 main 或 master 分支的根目录下。
   • 对于项目网站，根据你选择的源，将文件放在对应的分支或文件夹中。最常见的是创建一个名为 gh-pages 的新分支，并将网站文件放在该分支的根目录。或者，将文件放在 main 或 master 分支根目录下的 /docs 文件夹中。

3. 启用 GitHub Pages：

   • 进入你的仓库页面。
   • 点击顶部的 “Settings” (设置) 选项卡。
   • 在左侧导航栏找到 “Pages” (页面) 选项并点击。
   • 在 “Source” (来源) 部分，选择你想要用来托管网站的分支（例如 main 或 gh-pages），以及该分支下的文件夹（通常是 / (root) 根目录或 /docs 文件夹）。
   • 点击 “Save” (保存)。
   • GitHub Pages 将开始构建你的网站。这可能需要几分钟时间。
   • 页面刷新后，”Pages” 设置页面顶部会显示你的 GitHub Pages 网站地址，例如 https://yourusername.github.io。访问这个地址，你应该能看到你刚刚上传的网站内容。

第二步：配置 GitHub Pages 使用自定义域名

现在你的网站可以通过 GitHub 提供的 .github.io 域名访问了，接下来我们将配置它使用你自己的域名。

1. 在 GitHub 仓库中设置自定义域名：

   • 回到你的 GitHub 仓库的 “Settings” -> “Pages” 页面。
   • 在 “Custom domain” (自定义域名) 部分，输入你的自定义域名（例如 yourdomain.com）。
   • 点击 “Save” (保存)。

2. GitHub 自动生成 CNAME 文件：

   • GitHub 会在你的网站源分支（例如 main 或 gh-pages）的根目录下自动创建一个名为 CNAME 的文件。
   • 这个文件的内容就是你刚刚输入的自定义域名（例如只有一行文本 yourdomain.com）。
   • 重要提示： 如果你手动管理文件（而不是通过 GitHub 网页界面编辑），请确保这个 CNAME 文件存在且内容正确。每次推送更新时，请勿删除此文件。如果通过 GitHub 网页界面设置自定义域名，GitHub 会为你处理这个文件。

3. 理解 DNS 配置要求：

   • 当你设置了自定义域名并保存后，GitHub Pages 会提示你需要在你的域名注册商处配置 DNS 记录。
   • 对于根域名 (yourdomain.com)，你需要配置至少一个 A 记录指向 GitHub Pages 的 IP 地址。GitHub 官方推荐使用四个特定的 IP 地址，以提高可用性：
     • 185.199.108.153
     • 185.199.109.153
     • 185.199.110.153
     • 185.199.111.153
   • 对于 www 子域名 (www.yourdomain.com)，你需要配置一个 CNAME 记录指向你的 .github.io 域名（例如 yourusername.github.io）。
   • 注意： 直接在域名注册商那里配置这些 DNS 记录固然可行，但这样你将无法享受 Cloudflare 提供的免费 HTTPS 和 CDN 等服务。因此，我们的下一步是把域名的 DNS 解析权委托给 Cloudflare。

第三步：使用 Cloudflare 配置 DNS 并启用免费 HTTPS

这是整个过程的核心步骤，我们将把域名添加到 Cloudflare，配置 DNS 记录，并利用 Cloudflare 的 Universal SSL 服务启用 HTTPS。

1. 注册或登录 Cloudflare 账户：

   • 访问 Cloudflare 官网 (https://www.cloudflare.com/)。
   • 如果你没有账户，点击 “Sign Up” (注册) 创建一个免费账户。
   • 如果你已有账户，点击 “Log In” (登录)。

2. 添加你的网站到 Cloudflare：

   • 登录后，在 Cloudflare 控制面板中，点击 “Add a Site” (添加网站)。
   • 输入你的自定义域名（例如 yourdomain.com），然后点击 “Add Site” (添加网站)。

3. 选择计划：

   • Cloudflare 会让你选择一个计划。对于大多数静态网站和本文的目的，选择免费的 “Free” (免费) 计划就足够了。
   • 选择 “Free” 计划后，点击 “Continue” (继续)。

4. 扫描现有 DNS 记录：

   • Cloudflare 会自动扫描你域名当前的 DNS 记录。这可能需要一些时间。
   • 扫描完成后，Cloudflare 会列出它找到的记录。请仔细检查这些记录。
   • 你可能需要删除或修改一些记录，特别是那些与你的网站托管无关的记录，以避免冲突。

5. 配置指向 GitHub Pages 的 DNS 记录：

   • 在 Cloudflare 的 DNS 设置页面（Scan Results 或在你添加网站后进入域名的 DNS 选项卡），你需要添加或修改记录以指向 GitHub Pages。
   • 删除冲突记录： 首先，查看是否有 Cloudflare 自动添加的，但与 GitHub Pages 无关的 A 或 CNAME 记录，特别是针对根域名 (@) 或 www 的。如果有，考虑删除它们，除非你知道它们的作用且不冲突。
   • 添加或修改 A 记录 (针对根域名 @):
     • 点击 “Add Record” (添加记录)。
     • Type (类型) 选择 A。
     • Name (名称) 输入 @ (代表你的根域名 yourdomain.com)。
     • IPv4 address (IPv4 地址) 输入 GitHub Pages 的 IP 地址之一。为了冗余，最好添加所有四个 A 记录，每个记录一个 IP 地址。
       • 记录 1: Type: A, Name: @, IPv4 address: 185.199.108.153
       • 记录 2: Type: A, Name: @, IPv4 address: 185.199.109.153
       • 记录 3: Type: A, Name: @, IPv4 address: 185.199.110.153
       • 记录 4: Type: A, Name: @, IPv4 address: 185.199.111.153
     • 确保 Proxy status (代理状态) 是 “Proxied” (已代理，显示为橙色云图标)。 这是启用 Cloudflare CDN 和免费 HTTPS 的关键！如果显示灰色云图标，点击它切换为橙色。
     • 点击 “Save” (保存)。
   • 添加或修改 CNAME 记录 (针对 www 子域名):
     • 点击 “Add Record” (添加记录)。
     • Type (类型) 选择 CNAME。
     • Name (名称) 输入 www。
     • Target (目标) 输入你的 GitHub Pages 域名（例如 yourusername.github.io）。
     • 确保 Proxy status (代理状态) 是 “Proxied” (已代理，显示为橙色云图标)。 这是启用 Cloudflare CDN 和免费 HTTPS 的关键！如果显示灰色云图标，点击它切换为橙色。
     • 点击 “Save” (保存)。
   • 完成配置后，你应该在 Cloudflare DNS 记录列表中看到类似以下的条目（可能还有其他你自己的记录）：
     • A @ 185.199.108.153 Proxied
     • A @ 185.199.109.153 Proxied
     • A @ 185.199.110.153 Proxied
     • A @ 185.199.111.153 Proxied
     • CNAME www yourusername.github.io Proxied

6. 更改域名的 Nameservers (名称服务器)：

   • 在 Cloudflare DNS 配置页面的底部，Cloudflare 会提供两个它的 Nameservers 地址（例如 june.cloudflare.com 和 kim.cloudflare.com）。
   • 这一步至关重要！ 你需要登录到你的域名注册商（如阿里云、GoDaddy、Namecheap 等）的管理后台。
   • 找到你的域名的 Nameservers 设置或 DNS 管理设置。
   • 将你域名当前的 Nameservers (可能是注册商默认的) 替换 为 Cloudflare 提供的那两个 Nameservers。通常需要删除原有的，然后添加 Cloudflare 的。
   • 保存更改。

7. 等待 Nameservers 更新生效 (DNS 传播)：

   • 更改 Nameservers 后，这个信息需要在全球的 DNS 服务器网络中进行传播。这个过程通常需要几分钟到几个小时，有时甚至可能长达 24-48 小时。
   • 在 Cloudflare 控制面板中，你的网站状态会显示为 “Pending Nameserver Update” (等待名称服务器更新)。
   • 你可以使用在线工具（如 https://www.whatsmydns.net/）来检查你域名的 Nameservers 是否已经更新为 Cloudflare 的。输入你的域名，选择 NS 类型，然后搜索，查看全球各地的服务器是否都指向 Cloudflare。
   • 一旦 Cloudflare 检测到 Nameservers 已经更新成功，你的网站状态将变为 “Active” (活动)，表示你的域名已经成功接入 Cloudflare。

8. 配置 Cloudflare 的 SSL/TLS 设置：

   • 当你的网站在 Cloudflare 中变为 “Active” 状态后，免费的 Universal SSL 证书会自动为你部署。但这可能需要一些时间，有时需要几分钟才能完全激活。
   • 在 Cloudflare 控制面板中，点击你的域名进入管理页面。
   • 点击顶部的 “SSL/TLS” 选项卡。
   • 在 “Overview” (概述) 部分，确保你的 SSL/TLS encryption mode (加密模式) 设置为：
     • Flexible (灵活): 加密连接在访问者和 Cloudflare 之间，但 Cloudflare 和你的源服务器（GitHub Pages）之间是非加密的。不推荐，存在“灵活 SSL”攻击风险。
     • Full (完全): 加密连接在访问者和 Cloudflare 之间，以及 Cloudflare 和你的源服务器（GitHub Pages）之间。Cloudflare 会使用自己的证书与访问者通信，并尝试使用 HTTPS 连接到源服务器。GitHub Pages 在验证自定义域名并接入 Cloudflare 后，会自动为你的自定义域名生成并部署证书。因此，选择 Full 是一个不错的选择。
     • Full (Strict) (完全(严格)): 加密连接在访问者和 Cloudflare 之间，以及 Cloudflare 和你的源服务器之间。与 Full 模式不同的是，Strict 模式要求你的源服务器必须提供一个有效的、由可信任证书颁发机构签发的证书，并且该证书的域名与你访问的域名匹配，且未过期。这是最安全的选择。 由于 GitHub Pages 在你配置自定义域名并等待一段时间后会为你的自定义域名颁发并部署有效的 SSL 证书，因此 Full (Strict) 是最终推荐的模式。
   • 建议流程： 刚开始接入 Cloudflare 时，你可以先设置为 “Full”。等待 GitHub Pages 检查到你的 DNS 配置（指向 Cloudflare 的 A/CNAME）并为你自定义域名签发并部署好 SSL 证书后（通常在 GitHub Pages 设置页面的 Custom domain 部分会显示证书状态或 “Enforce HTTPS” 选项变为可勾选状态），再将 Cloudflare 的 SSL/TLS 加密模式切换为 “Full (Strict)”，以获得最高的安全性。
   • 等待 GitHub Pages 验证和签发证书： 回到 GitHub Pages 设置页面。在 Custom domain 部分，它可能会显示 “DNS check in progress” (DNS 检查进行中)。等待一段时间（通常是几分钟到几个小时），如果 DNS 配置正确（指向 Cloudflare），GitHub 会验证成功，然后尝试为你签发 Let’s Encrypt 证书。一旦证书签发成功，”Enforce HTTPS” (强制使用 HTTPS) 选项会变为可勾选状态，并且通常会自动勾选。这意味着 GitHub Pages 现在也能为你的自定义域名提供 HTTPS 了。这是你将 Cloudflare SSL 模式从 “Full” 切换到 “Full (Strict)” 的信号。

9. 配置 Cloudflare 的 Always Use HTTPS (总是使用 HTTPS) Page Rule：

   • 虽然 GitHub Pages 提供了 “Enforce HTTPS” 选项，但使用 Cloudflare 的 Page Rule 可以更快、更灵活地实现 HTTP 到 HTTPS 的重定向，并且这个重定向发生在 Cloudflare 的边缘节点，速度更快。
   • 在 Cloudflare 控制面板中，点击顶部的 “Rules” (规则) 选项卡，然后选择 “Page Rules” (页面规则)。
   • 点击 “Create Page Rule” (创建页面规则)。免费计划通常允许创建 3 条 Page Rules。
   • 在 “If the URL matches” (如果 URL 匹配) 输入框中，输入你的域名模式。为了确保所有 HTTP 请求都被重定向，输入 http://*yourdomain.com/* (将 yourdomain.com 替换为你的域名)。这里的 * 是通配符，表示匹配所有子域名和所有路径。
   • 在 “Then the settings are:” (则设置是:) 部分：
     • 点击 “Add a Setting” (添加设置)。
     • 从下拉菜单中选择 “Always Use HTTPS” (总是使用 HTTPS)。
   • 确保设置的优先级正确（如果你有多条规则）。通常，这条规则优先级较高比较好。
   • 点击 “Save and Deploy” (保存并部署)。
   • 这条规则会强制所有通过 Cloudflare 访问你网站的 HTTP 请求自动重定向到 HTTPS。

10. （可选）配置 HSTS (HTTP Strict Transport Security)：

    • HSTS 是一项安全策略，告知浏览器在未来的一段时间内，对于你的域名只能通过 HTTPS 进行连接。这可以进一步防止中间人攻击，并减少一次 HTTP 重定向的延迟。
    • 在 Cloudflare 控制面板中，点击 “SSL/TLS” 选项卡，然后选择 “Edge Certificates” (边缘证书)。
    • 向下滚动找到 “HTTP Strict Transport Security (HSTS)” 部分。
    • 点击 “Enable HSTS” (启用 HSTS)。
    • Cloudflare 会提供一些预设配置。建议选择一个合适的预设（例如第一项 “I am aware of the risks…” 并选择预加载）。
    • 注意： HSTS 是一个强大的安全功能，一旦启用并在访问者浏览器中生效，将很难回退到 HTTP。请确保你的网站在所有页面和所有子域名上都完全支持 HTTPS 后再启用 HSTS。如果你不确定，可以暂时跳过此步骤。如果你想将其提交到 HSTS 预加载列表，需要勾选 “Include subdomains” 和 “Preload”，并满足其他条件。

第四步：验证最终设置

完成上述步骤后，你需要验证一切是否正常工作。

1. 检查域名解析：
   • 打开命令行工具（Windows 的 Command Prompt 或 PowerShell，macOS/Linux 的 Terminal）。
   • 使用 nslookup 或 dig 命令检查你的域名解析是否指向 Cloudflare。
     • nslookup yourdomain.com
     • nslookup www.yourdomain.com
     • 在输出结果中，你应该能看到 Nameservers 是 Cloudflare 的，并且 A/CNAME 记录解析到的 IP 地址是 Cloudflare 的边缘节点 IP（这些 IP 与 GitHub Pages 的原始 IP 不同）。
2. 检查网站访问：
   • 打开不同的浏览器或使用隐身模式访问你的网站。
   • 尝试访问：
     • http://yourdomain.com
     • http://www.yourdomain.com
     • https://yourdomain.com
     • https://www.yourdomain.com
   • 所有这些访问都应该最终被重定向到 https://yourdomain.com 或 https://www.yourdomain.com (取决于你在 Cloudflare CNAME 中主要使用了哪个，通常是 www 指向根域名或反之，以及你在 GitHub Pages 中设置了哪个为主域名)。
   • 检查浏览器地址栏，确认显示的是你的自定义域名，并且有绿色的锁图标，表示连接是安全的 (HTTPS)。点击锁图标，查看证书详情，确认证书是由 Cloudflare 或 Let’s Encrypt (通过 GitHub 或 Cloudflare) 签发的，且有效。
3. 检查 GitHub Pages 设置：
   • 回到你的 GitHub 仓库的 “Settings” -> “Pages” 页面。
   • 确认 “Custom domain” 部分显示的是你的域名。
   • 确认 “Enforce HTTPS” 选项已勾选（这表示 GitHub Pages 也为你的自定义域名成功部署了证书，增强了安全性和兼容性，尤其是在 Cloudflare 使用 “Full (Strict)” 模式时）。如果该选项未出现或灰色不可选，说明 GitHub Pages 尚未验证你的域名或签发证书，请耐心等待并检查前面的 DNS 配置是否正确指向了 Cloudflare。

常见问题及故障排除

如果在设置过程中遇到问题，可以检查以下几点：

• DNS 传播延迟： 更改 Nameservers 或 DNS 记录需要时间在全球范围内生效。请耐心等待几个小时，甚至 24 小时。使用 whatsmydns.net 等工具检查传播状态。
• GitHub Pages CNAME 文件问题： 确保你的 GitHub 仓库中网站源分支的根目录下存在一个名为 CNAME 的文件，且文件内容只有一行，就是你的自定义域名（例如 yourdomain.com）。
• Cloudflare DNS 记录错误： 仔细检查你在 Cloudflare 中配置的 A 记录 (针对 @) 和 CNAME 记录 (针对 www) 是否正确。确保 A 记录指向 GitHub Pages 推荐的 IP 地址，CNAME 记录指向你的 .github.io 域名。
• Cloudflare 代理状态： 确保指向你网站的 A 和 CNAME 记录的代理状态是 “Proxied” (橙色云)，而不是 “DNS Only” (灰色云)。灰色云表示只使用 Cloudflare 的 DNS 服务，不启用其 CDN 和 SSL 等功能。
• 域名注册商 Nameservers 未更新： 再次登录你的域名注册商后台，确认 Nameservers 已被成功更改并保存为 Cloudflare 提供的 Nameservers。有时更改后需要手动刷新页面或等待一段时间才能看到更新。
• Cloudflare SSL 设置错误： 确保在 Cloudflare 的 SSL/TLS 设置中选择了 “Full” 或 “Full (Strict)” 模式。如果是刚设置，可以先用 “Full”，等 GitHub Pages 签发证书后再切换到 “Full (Strict)”。
• Cloudflare Page Rule 错误： 检查强制 HTTPS 的 Page Rule 是否已正确创建并启用，模式是否匹配 http://*yourdomain.com/* 并设置 “Always Use HTTPS”。
• GitHub Pages “Enforce HTTPS” 未勾选/灰色： 这通常意味着 GitHub 尚未验证你的自定义域名或尚未为其签发证书。确保你的 Cloudflare DNS 配置正确指向了 GitHub Pages，并且已经等候了足够长的时间。有时可能需要取消自定义域名设置，稍等片刻再重新设置一次。
• 浏览器缓存： 有时浏览器会缓存旧的 DNS 记录或重定向规则。尝试清除浏览器缓存或使用隐身模式访问。

额外的好处

通过将你的 GitHub Pages 网站接入 Cloudflare，除了免费 HTTPS 和自定义域名外，你还获得了以下额外好处：

• CDN 加速： Cloudflare 的全球分布式网络会将你的网站静态资源缓存到离访问者最近的边缘节点，显著提高网站加载速度。
• 安全性提升： Cloudflare 提供基础的 DDoS 防护和 Web 应用防火墙 (WAF) 功能，可以抵御常见的网络攻击。
• 流量统计： Cloudflare 控制面板提供了详细的流量统计和分析，帮助你了解网站的访问情况。
• 其他功能： Cloudflare 还提供了许多其他有用的功能，如缓存控制、页面规则、Worker (用于运行无服务器代码) 等，可以根据需要进一步优化你的网站。

总结

GitHub Pages 是一个优秀且免费的静态网站托管服务，结合自定义域名可以提升网站的专业度。而 Cloudflare 则是一个功能强大且提供免费套餐的 CDN 和安全服务提供商，它不仅解决了 GitHub Pages 自定义域名下的 HTTPS 问题，还带来了 CDN 加速、安全防护等额外价值。

通过本文的详细步骤，你应该已经成功地将你的 GitHub Pages 网站配置了自定义域名，并通过 Cloudflare 启用了免费的 HTTPS 和 CDN 加速。这为你提供了一个稳定、快速、安全且成本极低的静态网站托管方案。无论是个人博客、项目文档还是其他静态展示页面，这个组合都是一个极具吸引力的选择。

希望这篇详细的指南对你有所帮助。如果在实践过程中遇到任何困难，可以回顾本文的步骤和故障排除部分，或者查阅 GitHub Pages 和 Cloudflare 的官方文档。祝你建站顺利！

---