GitHub Pages、Actions 與進階應用

適合程式碼與文件分開管理——只部署 docs/ 資料夾的內容。

my-project/
├── src/           ← 程式碼（不會被部署）
├── docs/          ← 網站內容（會被部署）
│   ├── index.html
│   ├── style.css
│   └── guide.html
├── README.md
└── package.json

1. 將網站檔案放在 docs/ 資料夾中。
2. Settings → Pages → Branch: main, 路徑: /docs。

最靈活的方式——用 GitHub Actions 自訂建置流程。適合需要編譯的框架（如 React、Vue、Jekyll）。

1. Settings → Pages → Source 選擇 GitHub Actions。
2. GitHub 會建議適合你專案的 workflow 範本。
3. 或自行建立 .github/workflows/deploy.yml。

（詳見本章後半的 Actions 段落。）

# 在 GitHub 建立一個新的 Public Repo（名稱如 my-site）

# 連結遠端並推送
$ git remote add origin git@github.com:你的帳號/my-site.git
$ git push -u origin main

1. 在 GitHub Repo 頁面 → Settings → Pages。
2. Source: Deploy from a branch。
3. Branch: main，路徑: / (root)。
4. 點擊 Save。
5. 等候 1-2 分鐘，頁面上方會出現網站的 URL。
6. 點擊連結，你的網站就上線了！🎉

# .github/workflows/test.yml
name: Run Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 程式碼
        uses: actions/checkout@v4

      - name: 安裝 Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: 安裝依賴
        run: npm ci

      - name: 執行測試
        run: npm test

push 或建立 PR 時自動執行 Node.js 測試。uses 引用的是 GitHub Marketplace 上的現成 Action。

# .github/workflows/deploy-pages.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

這是使用 Actions 部署 GitHub Pages 的官方推薦方式。