引言：为什么选择 Github Pages 部署个人网页

在数字化时代，个人网页成为展示技术能力、作品集或博客的重要载体。Github Pages 作为开发者友好的静态网站托管服务，凭借其免费、稳定、支持自定义域名的特性，成为个人项目部署的首选方案。本文将系统讲解如何通过 Github Pages 部署个人网页，并完成自定义域名的绑定，帮助开发者快速搭建专业级在线展示平台。

一、Github Pages 部署基础：从仓库创建到网页发布

1.1 创建 Github 仓库

操作步骤：

登录 Github 账号，点击右上角「+」选择「New repository」
输入仓库名称（建议格式：username.github.io，其中 username 为你的 Github 用户名）
选择「Public」权限（私有仓库需付费）
勾选「Add a README file」初始化仓库

技术要点：

仓库名称必须严格匹配 username.github.io 格式才能通过根域名访问
若使用其他名称，访问路径将变为 https://username.github.io/repository-name

1.2 上传静态网页文件

文件结构规范：

/ (根目录)
├── index.html       # 必选主页文件
├── css/             # 样式表目录
│   └── style.css
├── js/              # JavaScript 目录
│   └── main.js
└── assets/          # 静态资源目录
    └── image.png

上传方式：

Git CLI：通过终端执行

git clone https://github.com/username/username.github.io.git
cd username.github.io
# 添加文件后执行
git add .
git commit -m "Initial commit"
git push origin main

Github Desktop：图形化界面操作，适合新手
直接拖拽：在仓库网页界面点击「Add file」→「Upload files」

1.3 配置 Github Pages 设置

操作路径：
仓库主页 → Settings → Pages → Source 分支选择 main（或 master）→ 保存

验证部署：

等待约 1-2 分钟，访问 https://username.github.io
若显示 404 错误，检查：
- 仓库名称是否正确
- 是否存在 index.html 文件
- 分支选择是否匹配

二、自定义域名绑定：从 DNS 解析到 HTTPS 配置

2.1 域名购买与准备

域名选择建议：

优先选择 .com 或 .tech 等技术相关后缀
避免使用特殊字符或过长域名
推荐服务商：Namecheap、GoDaddy、阿里云万网

2.2 DNS 解析配置

A 记录配置：

登录域名注册商控制台
找到 DNS 管理界面
添加记录：
- 类型：A
- 主机记录：@（根域名）或 www
- 记录值：185.199.108.153（Github Pages 服务器 IP）
- TTL：3600（默认值）

CNAME 记录配置（可选）：
若使用子域名（如 blog.yourdomain.com）：

类型：CNAME
主机记录：blog
记录值：username.github.io

2.3 Github 仓库域名设置

操作步骤：

仓库主页 → Settings → Pages
在「Custom domain」输入框填写你的域名（如 yourdomain.com）
勾选「Enforce HTTPS」（强制 HTTPS 加密）
保存设置

验证步骤：

访问 https://yourdomain.com 应正常显示网页
检查浏览器地址栏是否显示安全锁图标
使用 curl -I https://yourdomain.com 查看响应头是否包含 Strict-Transport-Security

三、进阶配置与问题排查

3.1 强制 HTTPS 原理

Github Pages 通过 Let’s Encrypt 自动为自定义域名签发 SSL 证书，过程如下：

用户设置域名后，Github 服务器向 Let’s Encrypt 发起证书申请
Let’s Encrypt 验证域名所有权（通过 DNS 记录或文件验证）
证书签发后自动配置到 CDN 节点
整个过程通常在 24 小时内完成

3.2 常见问题解决方案

问题 1：域名绑定后无法访问

检查 DNS 记录是否生效：dig yourdomain.com +short
确认 Github Pages 设置中域名拼写正确
等待 DNS 传播（最长可能需要 48 小时）

问题 2：HTTPS 证书无效

检查是否启用了「Enforce HTTPS」
确认域名未使用 CNAME 记录同时指向其他服务
清除浏览器缓存后重试

问题 3：网页样式未加载

检查控制台是否有混合内容警告（HTTP/HTTPS 混用）
确保所有资源链接使用相对路径或绝对 HTTPS 路径

示例修正：

<!-- 错误示例 -->
<link href="http://yourdomain.com/css/style.css" rel="stylesheet">
<!-- 正确示例 -->
<link href="/css/style.css" rel="stylesheet">
或
<link href="https://yourdomain.com/css/style.css" rel="stylesheet">

四、最佳实践与性能优化

4.1 静态资源优化

推荐工具：

图片压缩：TinyPNG、ImageOptim
CSS/JS 压缩：UglifyJS、CSSNano
字体子集化：Font Squirrel Webfont Generator

实现示例：

# 使用 npm 脚本自动化压缩
"scripts": {
  "build": "uglifyjs js/main.js -o js/main.min.js && cssnano css/style.css css/style.min.css"
}

4.2 响应式设计适配

关键代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS 媒体查询示例：

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  .nav-menu {
    flex-direction: column;
  }
}

4.3 访问统计集成

推荐方案：

Google Analytics：免费版支持基础流量分析
Plausible：轻量级开源替代方案
自定义 Git 钩子：通过 github-webhook 记录访问

实现步骤（Google Analytics）：

创建 GA 账号并获取跟踪 ID

在 index.html 的 <head> 中添加：

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

五、安全与维护建议

5.1 仓库安全设置

关键配置：

启用「Branch protection rules」保护 main 分支
限制推送权限为特定团队或个人
定期审查「Dependencies」中的漏洞警报

5.2 备份策略