手把手教你搭建个人网站：GitHub Pages + Cloudflare CDN 完整配置指南（免费搭建网站）

摘要：本文将带你从零开始，使用 GitHub Pages 免费托管个人网站，并配置 Cloudflare CDN 实现 HTTPS 加密和自动跳转。全程图文教程，适合新手操作，预计 30 分钟完成。

一、准备工作

1.1 你需要准备

  • ✅ 一个 GitHub 账号（没有的话去 github.com 注册）
  • ✅ 一个域名（如 bloghua.com，可从阿里云、腾讯云、Namecheap 等购买）
  • ✅ 你的网站文件（至少包含 index.html）

1.2 最终效果

配置完成后，你将实现：

  • 访问 www.bloghua.com 正常显示网站（HTTPS 加密）
  • 访问 bloghua.com 自动跳转到 www.bloghua.com
  • 全球 CDN 加速，访问速度更快

Snipaste_2026-03-03_22-44-33.png

二、GitHub Pages 配置（第一步）

2.1 创建仓库

  1. 登录 GitHub，点击右上角 + → New repository
  2. 仓库名称填写：你的用户名.github.io（例如：qyhua0.github.io）
  3. visibility 选择 Public（公开）
  4. 勾选 Add a README file
  5. 点击 Create repository

Snipaste_2026-03-01_10-47-39.png

2.2 上传网站文件

方法一：网页上传（推荐新手）

  1. 点击 Add file → Upload files
  2. 将你的网站文件（index.html、CSS、JS 等）拖拽到上传区域
  3. 等待上传完成
  4. 点击 Commit changes

方法二：Git 命令上传（适合熟悉 Git 的用户）

git clone https://github.com/你的用户名/你的用户名.github.io.git
cd 你的用户名.github.io
# 复制你的网站文件到这里
git add .
git commit -m "初始化网站"
git push origin main

Snipaste_2026-03-01_10-51-42.png

Snipaste_2026-03-01_11-01-15.png

2.3 启用 GitHub Pages

  1. 进入仓库 → 点击 Settings（设置）
  2. 左侧菜单找到 Pages
  3. Source 选择 Deploy from a branch
  4. Branch 选择 main，文件夹选择 /(root)
  5. 点击 Save
    Snipaste_2026-03-01_11-10-36.png

2.4 绑定自定义域名（关键步骤）

  1. 仍在 Pages 设置页面，找到 Custom domain
  2. 输入：www.bloghua.com（注意带 www）
  3. 点击 Save

Snipaste_2026-03-03_22-55-24.png

⚠️ 重要提示：

  • 这里必须填 www.bloghua.com，不是 bloghua.com
  • 保存后 GitHub 会自动创建 CNAME 文件
  • 此时会显示 DNS 检查失败，这是正常的，下一步配置 DNS 即可

2.5 启用 HTTPS

  1. 保存 Custom domain 后，向下滚动
  2. 勾选 Enforce HTTPS
  3. 如果显示灰色不可选，等待 5-10 分钟后刷新页面

三、Cloudflare DNS 配置（第二步）

3.1 添加网站到 Cloudflare

  1. 登录 Cloudflare（没有账号先注册）
  2. 点击 Add a site
  3. 输入你的域名：bloghua.com（不带 www）
  4. 选择 Free 免费套餐
  5. 点击 Continue
    添加完站点。

3.2 更新 DNS 服务器

  1. Cloudflare 会显示一组 DNS 服务器地址（如 ns1.cloudflare.com）
  2. 去你的域名购买商（阿里云/腾讯云等）修改 DNS 服务器
  3. 将原来的 DNS 服务器替换为 Cloudflare 提供的
  4. 回到 Cloudflare 点击 Done, check nameservers
⏱️ 等待提示：DNS 服务器修改需要 10 分钟到 24 小时生效，可以等待期间继续下一步

3.3 配置 DNS 记录

  1. 在 Cloudflare 控制台，点击左侧 DNS → Records
  2. 删除所有自动导入的记录（如果有）
  3. 点击 Add record 添加以下记录：

添加 A 记录（4 条）

Snipaste_2026-03-01_11-43-59.png

第一条 A 记录：

  • Type: A
  • Name: @
  • IPv4 address: 185.199.108.153
  • TTL: Auto

第二条 A 记录：

  • Type: A
  • Name: @
  • IPv4 address: 185.199.109.153
  • TTL: Auto

第三条 A 记录：

  • Type: A
  • Name: @
  • IPv4 address: 185.199.110.153
  • TTL: Auto

第四条 A 记录：

  • Type: A
  • Name: @
  • IPv4 address: 185.199.111.153
  • TTL: Auto

添加 CNAME 记录

  • Type: CNAME
  • Name: www
  • Target: www.bloghua.com（你的域名，带 www）
  • Proxy status: DNS only（灰色云朵）
  • TTL: Auto

✅ 最终 DNS 记录列表应该如下：

Type   Name    Content              
A      @       185.199.108.153      
A      @       185.199.109.153      
A      @       185.199.110.153      
A      @       185.199.111.153      
CNAME  www     www.bloghua.com

Snipaste_2026-03-03_23-01-34.png

四、验证配置（第四步）

4.1 等待 DNS 生效

配置完成后，需要等待：

  • DNS 传播：通常 10-30 分钟，最长 24 小时
  • GitHub 证书签发：5-30 分钟

4.2 测试访问

测试 1：访问 www 域名

打开浏览器，访问：https://www.bloghua.com

✅ 预期结果：正常显示你的网站，地址栏有锁图标（HTTPS）

Snipaste_2026-03-03_22-44-33.png

测试 2：访问根域名自动跳转

打开浏览器，访问：http://bloghua.com

✅ 预期结果：自动跳转到 https://www.bloghua.com

测试 3：检查 HTTPS

打开浏览器，访问：https://bloghua.com

✅ 预期结果：自动跳转到 https://www.bloghua.com

五、常见问题解决

问题 1：ERR_CERT_COMMON_NAME_INVALID

现象：访问时浏览器提示证书错误

原因：GitHub 还没识别你的自定义域名

解决方法：

  1. 检查 GitHub Pages 设置 → Custom domain 是否为 www.bloghua.com
  2. 检查仓库根目录是否有 CNAME 文件，内容为 www.bloghua.com
  3. 等待 30 分钟后刷新
  4. 清除浏览器缓存（Ctrl+Shift+R）

问题 2：DNS 不生效

现象：访问域名提示"无法访问此网站"

原因：DNS 服务器未正确修改或传播延迟

解决方法：

  1. 去域名商确认 DNS 服务器已改为 Cloudflare 的
  2. 使用 ping bloghua.com 检查是否解析到 GitHub IP
  3. 等待 1-24 小时 DNS 传播

  4. 清除本地 DNS 缓存：

    • Windows: ipconfig /flushdns
    • Mac: sudo killall -HUP mDNSResponder

问题 3：混合内容警告

现象：HTTPS 页面显示"不安全"警告

原因：页面加载了 HTTP 资源（图片、JS、CSS）

解决方法：

  1. 打开浏览器开发者工具（F12）
  2. 查看 Console 中的混合内容警告
  3. 将所有资源链接改为 HTTPS 或相对路径

  4. 例如：

    <!-- ❌ 错误 -->
<script src="http://example.com/lib.js"></script>

<!-- ✅ 正确 -->
<script src="https://example.com/lib.js"></script>
<script src="/lib.js"></script>

六、配置检查清单

完成配置后，对照以下清单检查：

GitHub Pages 配置

  • [ ] 仓库名称为 用户名.github.io
  • [ ] 仓库为 Public（公开）
  • [ ] Pages 设置中 Branch 选择 main
  • [ ] Custom domain 填写 www.bloghua.com
  • [ ] Enforce HTTPS 已勾选
  • [ ] 仓库根目录有 CNAME 文件，内容为 www.bloghua.com

Cloudflare DNS 配置

  • [ ] 域名已添加到 Cloudflare
  • [ ] DNS 服务器已在域名商处修改
  • [ ] 4 条 A 记录指向 GitHub IP
  • [ ] CNAME 记录 www 指向 www.bloghua.com

最终测试

总结

恭喜你！至此你已经完成了：
✅ GitHub Pages 网站托管配置
✅ Cloudflare DNS 解析配置
✅ HTTPS 证书自动管理
✅ 根域名自动跳转到 www
✅ 全球 CDN 加速

配置要点回顾：

  1. GitHub Custom domain 填 www.bloghua.com（带 www）
  2. DNS 配置 4 条 A 记录 + 1 条 CNAME 记录
  3. Cloudflare Page Rules 配置两条 301 重定向规则
  4. 所有 Proxy status 保持 DNS only（灰色）

遇到问题怎么办：

  1. 先等待 30 分钟让 DNS 和证书生效
  2. 清除浏览器缓存（Ctrl+Shift+R）
  3. 对照检查清单逐项核对
  4. 查看本文"常见问题解决"部分

延伸阅读：

标签: GitHub Pages, Cloudflare, 个人网站

添加新评论