GitHub 是基于 Git 的代码托管平台，也是全球最大的开源社区。对网页设计师来说，它的价值有三：版本管理（每次改稿都有记录可回滚）、多人协作（同事各自改各自的分支再合并）、免费托管（GitHub Pages 提供静态站点托管）。这篇指南按尧图团队的真实工作流，讲清楚仓库、分支、提交、Pull Request、Pages 部署五块，最后附 git 命令速查。它不假设你会写代码，但需要你愿意敲命令行。

一、仓库 Repository：项目的基本单位

仓库（Repository，简称 repo）是 GitHub 上一个项目的完整存储单位。一个仓库包含项目的所有文件、完整的修改历史、协作者权限、Issue 跟踪、Pull Request。可以理解为一个带版本记录的项目文件夹。

创建仓库的两种方式

• 网页创建：登录 github.com，点 New repository，填名字、选公开/私有、勾选 README，点 Create。适合全新项目。
• 本地推送：本地已有项目文件夹，初始化为 git 仓库后推送到 GitHub。适合把已有项目纳入版本管理。

本地推送的完整命令流程：

# 进入项目文件夹
cd my-website

# 初始化 git 仓库
git init

# 添加所有文件到暂存区
git add .

# 提交第一个版本
git commit -m "初始化网站项目"

# 在 GitHub 网页创建空仓库后，关联远程仓库
git remote add origin https://github.com/用户名/my-website.git

# 推送到远程仓库的 main 分支
git branch -M main
git push -u origin main

执行完这些命令，本地项目就推送到 GitHub 了。之后每次改完代码，只需要 git add + git commit + git push 三步就能同步。

二、分支 Branch：并行修改不冲突

分支（Branch）是 Git 的核心概念。默认分支通常叫 main（旧版叫 master）。开发新功能时，从 main 切出一个新分支，在新分支上改，改完合并回 main。这样多人可以并行修改同一项目，互不干扰。

分支常用命令

# 查看当前所有分支
git branch

# 创建并切换到新分支
git checkout -b feature/header-update

# 切换回 main 分支
git checkout main

# 把 feature 分支的修改合并到 main
git checkout main
git merge feature/header-update

# 删除已合并的分支
git branch -d feature/header-update

尧图团队的分支命名规范：feature/功能名（新功能）、fix/问题名（修 bug）、hotfix/紧急修复（线上紧急修复）、refactor/重构名（重构）。命名清晰能让团队一眼看出分支用途。

分支策略

• main 分支：永远是可上线的稳定版本，不直接在上面改。
• feature 分支：每个新功能一个分支，从 main 切出，改完合并回 main。
• develop 分支（可选）：集成测试分支，feature 分支先合并到这里测试，再统一合并到 main。

三、提交 Commit：每次修改的快照

提交（Commit）是 Git 保存修改的方式。每次 commit 都是一个项目快照，记录了改了什么、谁改的、什么时间。commit 之间有先后关系，形成一条时间线，可以随时回到任意历史版本。

提交三步流程

# 1. 查看修改了哪些文件
git status

# 2. 把修改的文件加入暂存区
git add index.html       # 单个文件
git add css/             # 整个文件夹
git add .                # 所有修改

# 3. 提交，附带说明
git commit -m "feat: 完成首页头部导航"

commit message 的写法有约定俗成的规范，尧图团队遵循 Conventional Commits：

• feat: 新功能（feature）
• fix: 修 bug（bug fix）
• docs: 文档（documentation）
• style: 样式调整（formatting, 不影响代码逻辑）
• refactor: 重构（既不是新功能也不是修 bug）
• chore: 杂项（构建工具、依赖更新等）

四、Pull Request：合并前的代码评审

Pull Request（PR）是 GitHub 的协作功能。当你在 feature 分支改完代码，想合并到 main 时，发起一个 PR，团队成员在 PR 页面查看你改了哪些文件、留评论、提建议，确认无误后再合并。PR 是代码评审（Code Review）的载体。

PR 完整流程

• 在 feature 分支改完代码，push 到远程： git push origin feature/header-update
• 到 GitHub 网页，点「Compare & pull request」按钮发起 PR。
• 填写 PR 标题与描述，说明改了什么、为什么改、怎么测试。
• 指定评审人（Reviewer），团队成员查看代码留评论。
• 评审通过后点「Merge pull request」合并到 main。
• 合并后删除 feature 分支（保持分支列表整洁）。

PR 描述模板（尧图团队标准）：

## 改了什么
完成首页头部导航，包含 logo、菜单、CTA 按钮

## 为什么改
旧版导航无 CTA 按钮，转化率低

## 怎么测试
1. 打开 index.html
2. 检查导航在 1920 / 768 / 375 三个尺寸下的布局
3. 点击菜单项验证跳转

## 截图
（贴前后对比截图）

对设计师来说，PR 的价值不只是代码评审，更是改稿留痕。每次改稿发一个 PR，甲方或同事在 PR 里评论「这个按钮再大一点」「颜色调成浅绿」，所有反馈与修改都留在 PR 记录里，比微信沟通可追溯。

五、GitHub Pages：免费静态站点托管

GitHub Pages 是 GitHub 提供的免费静态站点托管服务。把 HTML/CSS/JS 文件放进仓库，开启 Pages，就能得到一个 用户名.github.io/仓库名 的在线网址。对网页设计师来说，这是部署作品集、demo、静态官网的最便宜方案。

开启 Pages 三步

• 进入仓库，点 Settings > Pages。
• Source 选「Deploy from a branch」，Branch 选 main，Folder 选 / (root) 或 /docs。
• 点 Save，等 1-2 分钟，访问 https://用户名.github.io/仓库名/ 就能看到网站。

每次 push 代码到 main 分支，GitHub Actions 会自动重新部署，1-2 分钟后线上就是最新版本。整个流程零配置、零成本。

自定义域名

默认域名是 用户名.github.io/仓库名，看起来不专业。可以绑定自己的域名：在 Pages 设置里填 Custom domain，去域名解析服务商加一条 CNAME 记录指向 用户名.github.io，等 DNS 生效后访问自己的域名就能打开网站。尧图团队的 mhpn.cn 就是这么部署的。

六、git 命令速查表

下面是尧图团队每天都会用到的 git 命令，按使用场景分组。Mac 与 Windows 命令一致。

配置与初始化

# 配置用户名与邮箱（首次使用必填）
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

# 克隆远程仓库到本地
git clone https://github.com/用户名/仓库名.git

# 初始化本地仓库
git init

日常提交

# 查看当前修改状态
git status

# 查看具体改了哪些内容
git diff

# 添加所有修改到暂存区
git add .

# 提交
git commit -m "feat: 提交说明"

# 推送到远程
git push

# 拉取远程最新代码
git pull

分支操作

撤销与回滚

# 撤销工作区的修改（未 add 的）
git checkout -- 文件名

# 撤销暂存区的修改（已 add 未 commit 的）
git reset HEAD 文件名

# 撤销最近一次提交（保留修改）
git reset --soft HEAD~1

# 查看提交历史
git log --oneline

七、实战技巧总结

1. 用 .gitignore 排除无关文件。每个项目根目录建 .gitignore，列出 node_modules、.DS_Store、.vscode 等。一次配置长期受益，避免污染仓库。

2. 用 GitHub Desktop 减少命令行恐惧。命令行不熟的设计师可以装 GitHub Desktop（图形化 Git 客户端），点击操作代替命令。尧图团队建议先用 Desktop 建立直觉，再过渡到命令行。

3. 用 Issues 跟踪待办。GitHub Issues 不只是 bug 跟踪，也能当 todo list 用。每个修改任务建一个 Issue，做完关闭。比微信待办可追溯。

4. 用 Actions 自动部署。GitHub Actions 是 CI/CD 工具，可以配置 push 后自动构建、压缩、部署。尧图团队的官网就是 push 后 Actions 自动跑构建脚本，1 分钟内线上更新。