GitHub Pages 静态站点搭建指南
一、什么是 GitHub Pages
GitHub Pages 是 GitHub 提供的免费静态网站托管服务,支持 HTML、CSS、JavaScript 文件直接部署上线,无需购买服务器和域名即可获得一个公网可访问的网址。适合托管隐私政策页面、个人博客、项目文档、作品集等静态内容。
核心优势:
- 完全免费
- 全球 CDN 加速,Google Bot 访问友好
- 支持自定义域名
- 每次 git push 自动部署
二、创建仓库
- 打开 https://github.com 并登录账号
- 点击右上角
+→New repository - 填写仓库名,建议命名为
privacy-policy或你的用户名.github.io - 勾选
Public(必须公开,私有仓库不支持免费 Pages) - 勾选
Add a README file - 点击
Create repository
命名说明: 如果仓库名格式为
你的用户名.github.io,部署后访问地址就是https://你的用户名.github.io;其他名称则访问地址为https://你的用户名.github.io/仓库名/。
三、上传网页文件
方式 A:网页拖拽上传(推荐新手)
- 进入仓库页面,点击
Add file→Upload files - 将本地的
index.html文件拖入上传区域 - 点击
Commit changes保存
方式 B:Git 命令行上传
# 克隆仓库到本地
git clone https://github.com/你的用户名/你的仓库名.git
cd 你的仓库名
# 将 index.html 放入目录后提交
git add index.html
git commit -m "Add privacy policy page"
git push origin main
文件命名建议
| 文件名 | 访问路径 | 说明 |
|---|---|---|
index.html | https://用户名.github.io/仓库名/ | 自动作为首页 |
privacy-policy.html | https://用户名.github.io/仓库名/privacy-policy.html | 需手动指定文件名 |
四、开启 GitHub Pages
- 在仓库页面点击顶部
Settings - 左侧边栏找到
Pages(位于Code and automation分类下) Build and deployment→Source选择Deploy from a branchBranch选择main,文件夹选择/ (root)- 点击
Save
等待 1~3 分钟,页面顶部出现绿色提示条即表示部署成功,里面显示的 URL 就是你的站点地址。
五、验证访问
- 复制 Settings → Pages 页面显示的站点 URL
- 打开浏览器无痕窗口(排除缓存干扰)
- 粘贴 URL 回车访问
- 确认页面正常加载、内容完整、无样式丢失
如果页面显示 404,检查文件名是否为
index.html,或等待几分钟后刷新(首次部署需要构建时间)。
六、更新内容
后续修改页面内容只需:
- 在仓库中点击对应 HTML 文件 → 点铅笔图标编辑
- 修改完成后点击
Commit changes - GitHub Pages 会在几十秒内自动重新部署
七、常见问题排查
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 页面 404 | 文件名不对或部署未完成 | 确认文件名为 index.html,等待 3 分钟再试 |
| 样式丢失 | CSS 路径错误 | 使用相对路径 ./style.css 而非绝对路径 |
| 中文乱码 | 文件缺少字符编码声明 | 在 <head> 中加入 <meta charset="UTF-8"> |
| 访问很慢 | 首次部署 CDN 未生效 | 等待 5~10 分钟,CDN 节点会自动刷新 |
| 显示仓库 README 而非网页 | Pages 未开启或分支选错 | 回到 Settings → Pages 确认 Source 已设为 main 分支 |
八、Chrome Web Store 填写示例
部署成功后,将以下格式的链接填入 CWS 后台的「隐私权政策网址」栏:
https://你的用户名.github.io/privacy-policy/
提交前务必在无痕窗口验证该链接可正常打开且无需登录。