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

GitHub Pages のデプロイにはこれまで何らかの形でビルドの成果物の commit が必要でした。しかし、 Custom GitHub Actions Workflows を使用することでビルドの成果物の commit が不要になります。
2022.07.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

どのブランチのどのディレクトリに成果物があるか指定が必要

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

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

試してみた

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

まずは Settings を選択します。

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

2. サイドバーのPagesを選択

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

3. SourceでGitHub Actions を選択

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

4. Next.js が自動的に選択される

Configure を選択します。

5. Configure ボタンを押下

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

6. 自動的に生成されたYAMLをコミット

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

ビルドが走る様子

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

ビルドが完了する様子

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

まとめ

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

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