GitHub Pages のデプロイに Custom GitHub Actions Workflows を使用することで、ビルドの成果物の commit が不要になりました

これまで GitHub Pages をデプロイするには、デプロイしたいビルドの成果物を commit に含めて成果物のあるディレクトリを指定したり、あるいは特定のブランチを成果物そのものにする必要がありました。

前者の場合には成果物の差分がでてしまい、後者の場合には自動化可能ですが main のブランチと成果物のブランチを同期させなければなりません。

• GitHub Pages: Custom GitHub Actions Workflows (beta)

これらの悩みは、現在 beta ではありますが Custom GitHub Actions Workflows が解決してくれそうです。

試してみた

• hbsnow-sandbox/gh-pages-actions-example

上記がサンプルのリポジトリになります。Next.js で SSG するシンプルなサイトになります。

まずは Settings を選択します。

サイドバーの Pages を選択します。

Build and deployment の source で GitHub Actions (beta) を選択します。

今回は Next.js を使用していたためか、自動的に Next.js であると判定されました。

Configure を選択します。

GitHub Actions の YAML が自動的に生成されているので、ブラウザ上から直接 main にコミットします（今回はテストなので）。

コミットするとビルドが走ります。

しばらく待っていると、ビルドが完了します！

今回は Next.js だったため何も YAML を編集する必要はありませんでしたが、actions/upload-pages-artifact@v1 と actions/deploy-pages@v1 を使うだけで簡単にデプロイをすることができそうです。

まとめ

Custom GitHub Actions Workflows を使用することで GitHub Pages のデプロイにおいてビルドの成果物の commit が不要になりました。

ブログを書くためにサンプルコードを GitHub に置いて、実際の動くビルド結果としてのサイトは Cloudflare Pages にデプロイをするということをよくやっていました。今後は場面に応じて使うサービスを 1 つにまとめることができるので、とても嬉しいアップデートでした。