Zenn
🔁

【コミット不要】GitHub Actions での GitHub Pages へのデプロイが GA になってた

2024/04/19に公開
GitHub
GitHub Actions
GitHub Pages
tech

公式アナウンス

解説

  • 従来方法では、対象リポジトリのブランチ・ディレクトリを指定し、その配下の（コミットされた）ファイルが GitHub Pages サイトに公開される、という形でした。
  • 2022年7月の時点で GitHub Actions でデプロイ対象をビルドして、GitHub Pages サイトにデプロイする機能がベータ版として公開されていましたが、2024年3月に GA リリースになりました（めでたい）

やり方

1. リポジトリの設定を変更する

  • リポジトリの設定ページ > GitHub Pages > Build and deployment セクションの source を「 GitHub Actions 」に変更

2. リポジトリにワークフローファイルを追加する

参考までに、ファイルの中身はこんな感じです。大体参考にさせていただいたサイト（下記に記載）と同じですが、もろもろのバージョンが変わっているので張っておきます。

.github/workflows/publish.yml

name: CI

on:
  push:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # リポジトリをチェックアウトする
      - uses: actions/checkout@v4
      # nodejs をセットアップする
      - uses: actions/setup-node@v4
        with:
          node-version: "20.12.2"
      # node_modules のキャッシュが有効ならそれを使う
      - id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: node_modules
          key: node-modules-${{ runner.os }}-${{ hashFiles('.node-version') }}-${{ hashFiles('package-lock.json') }}
          restore-keys: node-modules-${{ runner.os }}-${{ hashFiles('.node-version') }}-${{ hashFiles('package-lock.json') }}
      # node_modules のキャッシュが有効出ない場合、必要なパッケージをインストール
      - if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: npm ci
      # 公開対象をビルド
      - run: npm run build
      # ビルド成果物を gzip tar にまとめて GitHub Actions にアップロード
      # (この例ではビルドの結果 docs ディレクトリ以下にファイルが生成される想定
      - uses: actions/upload-pages-artifact@v3
        with:
          path: docs

  deploy:
    needs: build
    permissions:
      id-token: write
      pages: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      # アップロードされた成果物を GitHub Pages にデプロイ
      - uses: actions/deploy-pages@v4
        id: deployment

3. 以上

これでリポジトリにpushする度に GitHub Actions が実行され、自動でデプロイされるようになります。簡単ですね。

参考

Discussion