カスタムワークフローで GitHub Pages デプロイが可能に

| 3 min read
Author: masahiro-kondo masahiro-kondoの画像

GitHub Pages は専用のブランチか docs などのターゲットディレクトリを指定して公開する方式です。したがって、SSG(Static Site Generator) を使う場合、ソースコードだけでなくビルド成果物もリポジトリ管理する必要がありました。7月に GitHub Actions ワークフローによるデプロイがベータ版として利用可能になりました。

GitHub Pages: Custom GitHub Actions Workflows (beta) | GitHub Changelog

これにより、ビルド成果物をリポジトリ管理せずに、リポジトリの更新をトリガーに GitHub Pages を更新できるようになります。

リポジトリの GitHub Pages の設定で Build and deployment セクションの Source を見ると、GitHub Actions (beta) が選択できるようになっています。

GitHub Pages Build and deployment

GitHub Actions を選択すると Jekyll を使ったワークフローと、Static HTML のワークフローがサジェストされます。

ワークフロー選択

Jekyll のワークフローを修正して使えばよさそうということで、GitHub Pages JekyllConfigure をクリック。ワークフローの編集画面になるので、これをベースに作業をしていきます。

ワークフロー編集

以下のようなワークフローを書きました。Jekyll ではなく、先日紹介した Astro でビルドしています。

name: Deploy GitHub Pages with Astro

on:
push:
branches: ["main"]

workflow_dispatch:

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

concurrency:
group: "pages"
cancel-in-progress: true

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v2
- name: Use Node.js 16
uses: actions/setup-node@v2
with:
node-version: 16
- name: Install dependencies
run: npm install
- name: Build Astro
run: npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: dist/

deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1

ポイントとしては、permissionの contents: read でリポジトリの読み取りを pages: write Pages への書き込みを許可しています。id-token:write の部分は、GitHub Pages をデプロイするインフラに対して OIDC 認証するために必要なのではないかと推測しています。

ジョブはシーケンシャルに実行される2つのジョブ(build と deploy)を定義して、build ジョブの最後に、Astro でビルドした静的サイト用の成果物を upload-pages-artifact でアップロードしています[1]。Astro のデフォルトでは、dist 配下に成果物を出力しますので、with/path で指定しました。後続の deploy ジョブは、deploy-pages アクションを使用します。このアクションは、先行ジョブの成果物をダウンロードして、デプロイを実行します[2]

このように、GitHub Pages 専用のアクションを組み合わせてワークフローを作成することで、GitHub 側で Pages の構築をやってくれます。

Information

シーケンシャルなジョブの定義については、以下の記事にまとめていますので、参考にしてください。

GitHub Actions ワークフローにおけるジョブ制御

ワークフローを実行して成功するとサマリーページに build ジョブの成果物が表示され、deploy ジョブには、デプロイ先の URL が表示されます。

ワークフロー実行結果

リポジトリのトップページの Environments セクションでも Pages が作成されていることが表示されます。

リポジトリのPages表示

以上、Git Hub Actions のカスタムワークフローによる GitHub Pages デプロイを試しました。これまで GitHub Pages はちょっと特殊なブランチ管理が必要でしたが、この機能が正式公開されれば、Netlify や Cloudflare Pages とまではいきませんが、かなり使い勝手が向上すると言えるでしょう。特に Enterprise アカウントで Private な GitHub Pages をメンテナンスしているプロジェクトでは喜ばれそうです。


  1. upload-artifact ではないことに注意。 ↩︎

  2. depoly ジョブは Jekyll のワークフローから変えていません。 ↩︎

豆蔵デベロッパーサイト - 先週のアクセスランキング
  1. 基本から理解するJWTとJWT認証の仕組み (2022-12-08)
  2. AWS認定資格を12個すべて取得したので勉強したことなどをまとめます (2022-12-12)
  3. Nuxt3入門(第4回) - Nuxtのルーティングを理解する (2022-10-09)
  4. Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する (2022-09-25)
  5. Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する (2022-10-28)
  6. Jest再入門 - 関数・モジュールモック編 (2022-07-03)
  7. 自然言語処理初心者が「GPT2-japanese」で遊んでみた (2022-07-08)
  8. GitHub Actions - 構成変数(環境変数)が外部設定できるようになったので用途を整理する (2023-01-16)
  9. IoT を使ってみる(その5:MQTT編) (2022-10-02)
  10. ORマッパーのTypeORMをTypeScriptで使う (2022-07-27)