GitHub Pagesへの静的サイトデプロイ

ActionsでGitHub Pagesへデプロイ

GitHub Actions経由のGitHub Pagesデプロイは、ビルドプロセスを完全に制御でき、React、Next.js（静的エクスポート）、Vue、Hugo、Jekyll、Astroなど、あらゆる静的サイトジェネレーターをサポートします。

ワークフローYAML

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

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

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

動作の仕組み

1. 権限: モダンなOIDCベースのデプロイ方法を使用してGitHub Pagesにデプロイするには、pages: writeとid-token: write権限が必要です。
2. 同時実行制御: concurrencyブロックにより、デプロイは1つだけ実行され、競合状態を防ぎます。
3. 2ジョブパイプライン: ビルドジョブが静的ファイルを作成してアーティファクトとしてアップロードし、デプロイジョブがアーティファクトをダウンロードしてPagesに公開します。

カスタマイズ

• ./distをフレームワークの出力ディレクトリに変更します（CRAは./build、Next.js静的エクスポートは./out、Hugoは./public）。
• リポジトリ設定のSettings > Pages > Source > GitHub Actionsで有効にします。