Bài học hiện đang bằng tiếng Séc. Giao diện đã được dịch – nội dung bài học sẽ sớm có.

← Cấp 6 – Trưởng dự án

Bài 5 / 8 ⏱ 35 phút Premium

Triển khai tự động

Thiết lập GitHub Actions: push thay đổi và website tự cập nhật. Như các chuyên gia.

Robot làm việc cho bạn

Hiện tại: bạn sửa code → commit → push → GitHub Pages cập nhật. Đó đã là tự động! Nhưng chuyên gia đi xa hơn – GitHub Actions là robot sau mỗi push làm bất cứ gì bạn bảo: build website, kiểm tra lỗi, triển khai.

Gọi là CI/CD (continuous integration / continuous deployment). Nghe phức tạp, nhưng thực ra chỉ: “Robot kiểm tra và triển khai mọi thứ sau mỗi thay đổi.”

Xem thử: workflow đầu tiên

Nhiệm vụ cho robot viết vào tệp trong thư mục .github/workflows/. Ví dụ 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 ✅"

Sau push, robot chạy hiện trên GitHub tab Actions. Dấu tích xanh = mọi thứ qua; dấu X đỏ = có vấn đề, robot sẽ nói gì.

💡

GitHub Pages đã dùng Actions! Nhìn tab Actions, bạn thấy triển khai Pages qua workflow “pages build and deployment”. Giờ bạn thêm kiểm tra riêng – như trưởng dự án thật không cho bản hỏng lên live.

Đến lượt bạn 💪

  1. Tạo .github/workflows/deploy.yml theo ví dụ, push, và xem tab Actions.
  2. Cố ý làm hỏng: đổi tên index.html thành index2.html, push – workflow đỏ. Sửa và xem chuyển xanh. (Đây là trải nghiệm quan trọng nhất bài này!)
  3. Thêm bước thứ hai vào workflow – kiểm tra không còn localhost trong HTML:
      - 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. Ghi trong LAUNCH.md: “Website triển khai tự động, robot kiểm tra mỗi push.”

Kiểm tra: Workflow chạy tab Actions sau mỗi push. Bạn đã thấy đỏ (hỏng) và xanh (sửa). Website cập nhật không cần bước thủ công.

Những điều cần nhớ