从零开始：GitHub Pages 部署个人网页与自定义域名指南

2025年11月3日 互联网

一、GitHub Pages 部署个人网页的原理与优势

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，其核心原理是将代码仓库中的文件（如 HTML、CSS、JavaScript）通过自动化流程转换为可访问的网页。开发者只需将项目推送到指定分支（如 main 或 gh-pages），GitHub 会自动构建并发布到 https://用户名.github.io/仓库名 的默认地址。

1.1 核心优势

  • 免费托管：无需支付服务器费用，适合个人博客、项目文档等轻量级需求。
  • 版本控制集成：直接与 Git 仓库绑定，修改代码后自动更新。
  • HTTPS 支持：默认提供加密连接，保障数据安全。
  • Jekyll 支持：内置静态网站生成器，可快速构建博客系统。

1.2 适用场景

  • 个人技术博客
  • 项目展示页
  • 简历或作品集网站
  • 文档站点（如 API 文档）

二、GitHub Pages 部署流程详解

2.1 准备工作

  1. 注册 GitHub 账号：访问 GitHub 官网 完成注册。
  2. 创建代码仓库：
    • 新建仓库，命名为 用户名.github.io（如 john-doe.github.io），此为个人主页仓库。
    • 或创建普通仓库，后续通过 gh-pages 分支发布。

2.2 仓库配置

方法一：个人主页仓库（推荐）

  1. 将本地静态文件（如 index.html）推送到仓库的 main 分支。
  2. 访问 https://用户名.github.io 即可查看网站。

方法二：项目仓库

  1. 创建 gh-pages 分支： 
    1. git checkout -b gh-pages
    2. git push origin gh-pages
  2. 在仓库设置中启用 GitHub Pages，选择 gh-pages 分支作为源。
  3. 访问 https://用户名.github.io/仓库名。

2.3 自定义域名配置

2.3.1 域名购买与解析
  1. 购买域名：通过阿里云、腾讯云等平台注册域名（如 example.com）。
  2. DNS 解析：
    • 添加 A 记录指向 185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153（GitHub Pages IP）。
    • 或添加 CNAME 记录指向 用户名.github.io（适用于子域名）。
2.3.2 GitHub 仓库设置
  1. 在仓库根目录创建 CNAME 文件，内容为自定义域名（如 example.com）。
  2. 提交文件并推送： 
    1. echo "example.com" > CNAME
    2. git add CNAME
    3. git commit -m "Add CNAME file"
    4. git push origin main
  3. 在仓库设置中填写自定义域名，并勾选 Enforce HTTPS。
2.3.3 HTTPS 证书自动续期

GitHub Pages 会自动为自定义域名申请并续期 Let’s Encrypt 证书，无需手动操作。确保 DNS 解析正确且未启用 HSTS 预加载（可能导致访问问题）。

三、常见问题与解决方案

3.1 网站未更新

  • 原因：缓存或构建延迟。
  • 解决：
    • 强制刷新浏览器（Ctrl + F5）。
    • 检查仓库是否有未推送的更改。
    • 在仓库设置中重新保存 GitHub Pages 配置。

3.2 自定义域名无效

  • 原因：DNS 记录未生效或 CNAME 文件错误。
  • 解决：
    • 使用 dig example.com 或 nslookup example.com 检查 DNS 解析。
    • 确保 CNAME 文件内容仅为域名（无 http:// 或 www）。

3.3 HTTPS 证书错误

  • 原因：域名解析未完成或混合内容（HTTP/HTTPS）。
  • 解决：
    • 等待 DNS 传播（最多 48 小时）。
    • 检查网页中是否引用了 HTTP 资源，改为 HTTPS。

四、进阶技巧

4.1 使用 Jekyll 构建博客

  1. 在仓库中创建 _config.yml 文件配置站点信息。
  2. 编写 Markdown 文章并放置在 _posts 目录。
  3. 推送后 GitHub 会自动构建为静态网页。

4.2 自定义 404 页面

  1. 在仓库根目录创建 404.html 文件。
  2. 设计自定义错误页面（可包含返回首页链接）。

4.3 绑定子域名

  1. 购买域名后，为子域名（如 blog.example.com）添加 CNAME 记录指向 用户名.github.io。
  2. 在仓库 CNAME 文件中填写子域名（如 blog.example.com）。

五、总结与建议

通过 GitHub Pages 部署个人网页具有低成本、高效率的优势，尤其适合开发者快速上线项目。自定义域名能提升专业度，但需注意 DNS 解析和 HTTPS 配置的细节。建议：

  1. 优先使用 用户名.github.io 作为个人主页，简化管理。
  2. 定期备份仓库代码，避免意外丢失。
  3. 监控网站访问量（可通过 Google Analytics 集成）。

附：完整操作流程图

  1. 1. 创建 GitHub 仓库 → 2. 推送静态文件 → 3. 启用 GitHub Pages → 4. 配置自定义域名 → 5. 验证 HTTPS

通过以上步骤，即使是初学者也能在 30 分钟内完成网站部署与域名绑定。GitHub Pages 的灵活性使其成为个人品牌展示和技术分享的理想平台。

最新文章