从零开始学 GitHub Actions：用自动化提升开发效率

作为一名正在努力提升自己的程序员，我最近发现 GitHub Actions 真是个宝藏工具！它能帮我把重复的开发任务自动化，比如跑测试、打包项目、甚至一键部署，省下的时间可以多学点新东西。这篇博客是我学习 GitHub Actions 的记录，分享一下我是怎么从零开始上手，用它来优化我的小项目（一个 React 网站），希望能给同样想提升自己的朋友一点启发。

为什么我要学 GitHub Actions？

刚开始接触 CI/CD（持续集成/持续部署）的时候，我觉得这东西离我好远，像是大公司才会用的高大上玩意儿。后来做了一个 React 小项目，想自动部署到 GitHub Pages，手动打包上传太麻烦了，就开始研究 GitHub Actions。结果发现，它不仅简单好用，还能让我把更多精力放在写代码和学习上，而不是折腾重复操作。

GitHub Actions 是 GitHub 内置的自动化工具，能根据代码操作（比如 push 代码、提 PR）触发任务。它的优势对我这种个人开发者来说特别明显：

• 零成本：个人仓库有免费额度，够我折腾小项目。
• 上手简单：写几行 YAML 就能跑起来，不用像 Jenkins 那样搭服务器。
• 提升效率：自动化测试、部署，省时间还能减少出错。
• 加分项：学了 CI/CD，简历上能多写一笔，面试时也能聊点干货。

搞懂基本概念

刚开始看 GitHub Actions 的文档，我被一堆术语搞得头晕，比如 workflow、job、step 啥的。后来发现其实挺简单：

• Workflow：就是自动化流程，写在一个 YAML 文件里，放在 .github/workflows/ 目录下。
• Event：触发流程的事件，比如推代码（push）、手动点击（workflow_dispatch）。
• Job：流程里的大任务，比如一个 job 跑测试，一个 job 部署。
• Step：每个 job 里的小步骤，比如装 Node.js、跑脚本。
• Action：现成的工具（像 actions/checkout），直接拿来用，省得自己写脚本。

理解这些后，我觉得 Actions 就像一个智能助手，只要告诉它"啥时候干啥"，它就帮我搞定。

实践：用 Actions 部署我的 React 项目

为了学明白，我决定用 GitHub Actions 把我的 React 项目自动部署到 GitHub Pages。目标是：推代码到 main 分支，自动打包、部署，还能手动点按钮触发，就像 Jenkins 的"Build Now"。下面是我的步骤：

1. 项目准备

我有个简单的 React 项目，跑 npm run build 会生成 build 目录，里面有 index.html 等静态文件。仓库已经推到 GitHub（比如 github.com/heshuo527/m... npm run build 和 npx serve build 能正常访问页面，这样部署后不会出问题。

2. 写第一个 Workflow

在仓库根目录创建 .github/workflows/ci-cd.yml，内容如下：

# Workflow 名称，显示在 GitHub Actions 界面
name: Deploy My React App

# 定义权限，确保 Actions 有权操作仓库和部署 Pages
permissions:
  contents: write    # 允许写入代码和分支（如推送 gh-pages）
  pages: write      # 允许部署到 GitHub Pages
  id-token: write   # 验证身份，部署 Pages 必需

# 定义触发事件
on:
  push:
    branches:
      - main        # 推送到 main 分支时触发
  workflow_dispatch: # 允许手动触发，类似 Jenkins 的"Build Now"

# 定义任务
jobs:
  # 构建任务
  build:
    runs-on: ubuntu-latest  # 在最新的 Ubuntu 虚拟机上运行
    steps:
      # 步骤 1：检出代码
      - name: Checkout Code
        uses: actions/checkout@v4  # 使用官方 Action 拉取仓库代码

      # 步骤 2：设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4  # 安装指定版本的 Node.js
        with:
          node-version: '18'  # 使用 Node.js 18.x

      # 步骤 3：安装项目依赖
      - name: Install Dependencies
        run: npm install  # 运行 npm install 安装 package.json 里的依赖

      # 步骤 4：构建项目
      - name: Build Project
        run: npm run build  # 运行 npm run build 生成 build 目录

      # 步骤 5：上传构建产物为 Pages artifact
      - name: Upload Pages Artifact
        uses: actions/upload-pages-artifact@v3  # 上传 build 目录作为 Pages 部署产物
        with:
          path: ./build  # 指定上传的目录

  # 部署任务，依赖于 build 任务
  deploy:
    needs: build  # 等待 build 任务完成
    runs-on: ubuntu-latest  # 在 Ubuntu 虚拟机上运行
    environment:
      name: github-pages  # 指定 GitHub Pages 环境
      url: ${{ steps.deployment.outputs.page_url }}  # 部署后生成的 URL
    steps:
      # 步骤 1：部署到 GitHub Pages
      - name: Deploy to GitHub Pages
        id: deployment  # 设置 ID 以获取输出（如 page_url）
        uses: actions/deploy-pages@v4  # 使用官方 Action 部署到 Pages

3. 这代码啥意思？

• 触发：推代码到 main 分支或手动点击都会跑这个 workflow。
• 权限：permissions 确保 Actions 有权推送代码和部署 Pages。
• Build Job：检出代码，装 Node.js，跑 npm install 和 npm run build，然后把 build 目录上传。
• Deploy Job：下载构建产物，部署到 GitHub Pages，链接会出现在日志里。

4. 手动触发，超爽！

学到 workflow_dispatch 后，我发现可以像 Jenkins 一样手动跑流程！去仓库的 Actions 标签页，选这个 workflow，点右上角 Run workflow，选 main 分支，点绿色按钮，流程就跑起来了。 想更灵活？可以加参数，比如选择部署环境：

workflow_dispatch:
  inputs:
    environment:
      description: '部署环境（staging/production）'
      default: 'production'
      required: true

触发时会弹出输入框，让你选环境，感觉自己像个高级 DevOps 工程师！

5. 检查结果

推代码或手动触发后，去 Actions 看日志，确认构建和部署成功。部署完后，访问 Settings > Pages ，应该能看到链接（像 heshuo527.github.io/my-github-a... ）。如果没链接，可能是 GitHub Pages 还在处理，等 5-10 分钟刷新看看。

踩过的坑和经验

学习过程中，我踩了不少坑，分享几个常见问题：

• 链接没生成 ：确认 Settings > Pages 里 Source 选了 GitHub Actions 或 gh-pages 分支。如果用 gh-pages，确保 build 目录内容正确推上去了。
• 权限报错（403） ：检查 permissions 有没有写全，尤其是 pages: write 和 id-token: write。
• 构建失败：本地跑 npm run build 确认没问题，检查 publish_dir 路径（比如 ./build）。
• 调试技巧：加个 run: ls -la ./build 步骤，看看构建文件对不对。

学到啥？为啥值得学？

通过折腾 GitHub Actions，我不只学会了自动化部署，还搞懂了 CI/CD 的基本逻辑。这让我在写代码时更有底气，也对 DevOps 流程有了直观感受。关键收获：

• 效率提升：不用手动打包、上传，省时间学新东西。
• 动手能力：写 YAML 配置、调试日志，动手能力蹭蹭涨。
• 职业加分：CI/CD 是开发者的加分技能，面试时能多聊几句。

下一步学啥？

上手后，我开始试更复杂的玩法：

• 加测试：跑 npm test，用 Jest 确保代码质量。
• 部署其他平台：研究了下 AWS 和 Vercel 的 Action，准备试试。
• 通知功能：部署完发消息到微信或钉钉，装个 X 也不错。
• 定时任务：用 schedule 事件，比如每天跑脚本更新数据。

GitHub 官方文档（docs.github.com/en/actions）... starter workflows（github.com/actions/sta...

写在最后

学 GitHub Actions 让我从繁琐的手动操作中解放出来，感觉自己离"全栈"又近了一步。希望我的经验能给你点启发！如果你也在学 Actions，遇到啥问题，或者有啥酷炫的玩法，欢迎留言分享，咱们一起进步！