Administrator
发布于 2026-07-26 / 4 阅读

GitHub Pages 静态站点搭建指南

GitHub Pages 静态站点搭建指南

一、什么是 GitHub Pages

GitHub Pages 是 GitHub 提供的免费静态网站托管服务,支持 HTML、CSS、JavaScript 文件直接部署上线,无需购买服务器和域名即可获得一个公网可访问的网址。适合托管隐私政策页面、个人博客、项目文档、作品集等静态内容。

核心优势:

  • 完全免费
  • 全球 CDN 加速,Google Bot 访问友好
  • 支持自定义域名
  • 每次 git push 自动部署

二、创建仓库

  1. 打开 https://github.com 并登录账号
  2. 点击右上角 +New repository
  3. 填写仓库名,建议命名为 privacy-policy你的用户名.github.io
  4. 勾选 Public(必须公开,私有仓库不支持免费 Pages)
  5. 勾选 Add a README file
  6. 点击 Create repository

命名说明: 如果仓库名格式为 你的用户名.github.io,部署后访问地址就是 https://你的用户名.github.io;其他名称则访问地址为 https://你的用户名.github.io/仓库名/


三、上传网页文件

方式 A:网页拖拽上传(推荐新手)

  1. 进入仓库页面,点击 Add fileUpload files
  2. 将本地的 index.html 文件拖入上传区域
  3. 点击 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.htmlhttps://用户名.github.io/仓库名/自动作为首页
privacy-policy.htmlhttps://用户名.github.io/仓库名/privacy-policy.html需手动指定文件名

四、开启 GitHub Pages

  1. 在仓库页面点击顶部 Settings
  2. 左侧边栏找到 Pages(位于 Code and automation 分类下)
  3. Build and deploymentSource 选择 Deploy from a branch
  4. Branch 选择 main,文件夹选择 / (root)
  5. 点击 Save

等待 1~3 分钟,页面顶部出现绿色提示条即表示部署成功,里面显示的 URL 就是你的站点地址。


五、验证访问

  1. 复制 Settings → Pages 页面显示的站点 URL
  2. 打开浏览器无痕窗口(排除缓存干扰)
  3. 粘贴 URL 回车访问
  4. 确认页面正常加载、内容完整、无样式丢失

如果页面显示 404,检查文件名是否为 index.html,或等待几分钟后刷新(首次部署需要构建时间)。


六、更新内容

后续修改页面内容只需:

  1. 在仓库中点击对应 HTML 文件 → 点铅笔图标编辑
  2. 修改完成后点击 Commit changes
  3. 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/

提交前务必在无痕窗口验证该链接可正常打开且无需登录。


评论