← 第 6 关 – 项目负责人

第 5/8 课 ⏱ 35 分钟 高级版

自动部署

设置 GitHub Actions:push 一下,网站自己更新。像专业人士一样。

机器人替你干活

现在流程是:改代码 → commit → push → GitHub Pages 更新。已经是自动化!专业人士更进一步——GitHub Actions 是机器人,每次 push 后做你交代的事:构建网站、查错、部署。

这叫 CI/CD(持续集成 / 持续部署)。听起来复杂,其实就是:“每次改动后机器人检查并部署。“

跟我看:第一个 workflow

机器人的任务写在 .github/workflows/ 文件夹里。比如 deploy.yml

name: Check and deploy

on:
  push:
    branches: [main]   # run after every push to main

jobs:
  check:
    runs-on: ubuntu-latest   # the robot gets a clean Linux computer
    steps:
      - uses: actions/checkout@v4      # download my code
      - name: Check HTML
        run: |
          echo "Checking that index.html exists…"
          test -f index.html && echo "OK ✅"

push 后 GitHub Actions 标签会出现运行的机器人。绿勾 = 全过;红 X = 有问题,机器人会告诉你。

💡

GitHub Pages 已经在用 Actions! 看 Actions 标签,Pages 部署走 “pages build and deployment” workflow。你现在在上面加自己的检查——像真老板,不让坏版本上线。

轮到你了 💪

  1. 按例子创建 .github/workflows/deploy.yml,push,看 Actions 标签。
  2. 故意搞坏:把 index.html 改名 index2.html,push——workflow 变红。修好再看变绿。(这是本课最重要的体验!)
  3. 给 workflow 加第二步——检查 HTML 里有没有漏掉 localhost
      - name: No localhost in the code
        run: |
          if grep -r "localhost:3000" *.html; then
            echo "WARNING: localhost was left in the code!" && exit 1
          fi
          echo "OK ✅"
  1. LAUNCH.md 写:“网站自动部署,机器人检查每次 push。”

检查一下: workflow 每次 push 后在 Actions 跑。你见过红(坏)和绿(好)。网站不用手动一步就更新。

这堂课你要记住