GitHub Pages 入门指南（面向初学者）| 教程
欢迎回到 GitHub for Beginners 系列！本期我们聚焦 GitHub Pages——GitHub 官方提供的免费静态网站托管服务。只需要一个 GitHub 仓库，就能让你的项目、作品集或博客秒变可公开访问的网站。
开始之前，你只需要：
- 一个 GitHub 账户
- 一个已有代码的 GitHub 仓库
- 大约 5 分钟的操作时间
两种部署方式
GitHub Pages 提供两种部署路径，根据你的项目类型选择最合适的方式：
从分支部署
适合纯 HTML/CSS/JS 的静态项目，直接推送代码即自动更新
GitHub Actions 部署
适合 Next.js、React、Vue 等需要构建步骤的现代框架项目
方法一：从分支部署
适合纯静态项目（HTML + CSS + JS），操作最简单，推荐新手优先尝试。
进入仓库设置
打开你的 GitHub 仓库，点击顶部导航栏中的 Settings 选项卡
找到 Pages 设置
在左侧菜单找到并点击 Pages（位于 "Code and automation" 部分）
选择部署来源
在 "Build and deployment" 区域，下拉框选择 Deploy from a branch
选择分支
在 "Branch" 下拉框选择 main 分支
保存
点击 Save 按钮，GitHub 会自动发布你的网站！
✅ 完成！ 网站将从 main 分支发布并对全网公开可访问。
方法二：使用 GitHub Actions 部署
适合 Next.js、React、Vue 等需要构建步骤的框架，通过自动化工作流完成构建 + 部署。
切换部署来源
在 Settings → Pages 页面，"Source" 下拉框选择 GitHub Actions
浏览工作流模板
GitHub 会推荐常用工作流，点击 browse all workflows 查看全部，搜索框输入你的框架名（如 next.js）
配置工作流
点击目标工作流卡片中的 Configure，查看自动生成的 YAML 配置文件（含权限和构建命令）
提交配置
确认配置无误后，点击右上角绿色 Commit changes，填写提交信息，选择 main 分支，再次点击 Commit changes
查看部署状态
点击仓库顶部 Actions 选项卡，找到名为 "Add GitHub Actions workflow for Next.js deployment" 的操作，等待完成
访问你的网站
在 deploy 阶段点击生成的链接，即可看到线上网站 🎉
⚠️ 注意：即使你的仓库设为 私有（Private），通过 GitHub Pages 发布的网站依然是公开的，任何人都可以访问。请勿将敏感信息放入发布目录。
添加自定义域名（免费！）
默认情况下，你的网站 URL 格式为：
https://YOUR-USERNAME.github.io/REPOSITORY-NAME
如果你有自己的域名，可以将其绑定到 GitHub Pages，步骤如下：
在你的域名注册商处配置 DNS 记录（A 记录或 CNAME）
进入 Settings → Pages，在 "Custom domain" 输入框中填入你的域名，点击 Save
等待 GitHub 自动检查 DNS 配置，配置正确后会出现绿色对勾
勾选 Enforce HTTPS，GitHub 会自动颁发免费 SSL 证书，浏览器显示安全锁
学完你就掌握了
延伸阅读
- YouTube 视频教程 — 跟着操作，5 分钟上手
- GitHub Pages 官方文档 — 完整参考手册
- 创建你的第一个 GitHub Pages 网站
- 自定义域名配置指南
原文来源：GitHub Blog · 中文整理编译
评论