GitHub Actions と Netlify を使って Hakyll 製のサイトを公開する

memo, github-actions, netlify, hakyll

February 14, 2021

Hakyll を使ってウェブサイトを作り直しました。報告だけの記事はつまらないと思ったので、使った技術メインの記事にします。

要約

  • サイトジェネレーターには思想的に一番好きな Hakyll を選んだ
  • サイト公開は特に何も考えずに Netlify を選んだ
  • 利便性を考慮して GitHub Actions でビルドすることにした

Hakyll

このサイトは Hakyll という Haskell 製の静的サイトジェネレーターを使って生成しています。

静的サイトジェネレーターとは、Markdown などで書かれたソースコードから静的(サーバー側で動的に動かす処理が無い)サイトを生成するソフトウェアです。有名なものには Ruby 製の Jekyll や Go 製の Hugo、Node.js 製の Hexo などがあります。

Hakyll は、静的サイトジェネレーターと書きましたが正しくは静的サイト生成用のライブラリと呼んだ方がイメージ的には近いソフトウェアです。標準では Site.hs という Haskell のソースコードで書きます。ソースコードを Stack や Cabal でビルド後に実行すると、サイトを生成できます。

Netlify

Netlify は静的サイトをホスティングするサービスです。GitHub や GitLab などで管理しているウェブサイトを自動で簡単に公開できます。ただ、今回は GitHub Actions を使って更新するので Netlify の自動更新は無効化しました。類似のサービスに Vercal などがあります。

Netlify 自体にも簡単なビルド機能があるのですが、制限が多く今回の用途には使いにくそうだったので利用を見送りました。有料プランに入ると一部の制限が緩和されるほか、追加で便利な機能が使えるようになります。

GitHub Actions

このサイトのソースコードは GitHub で管理していて、push すると自動で GitHub Actions でサイトを生成して Netlify で公開します。類似のサービスには CircleCITravis CI などがあります。

通常、静的サイトジェネレーターはコンピューター上でサイトを生成した後にアップロードが必要ですが、旅行先など普段使いのコンピューターが使えない環境では更新ができません。また、ソースコードと生成したサイトを同一のリポジトリで管理すると差分が重複して見にくくなります。

そこで GitHub Actions を使って自動でサイトを生成することで、そういった問題を解決しています。このブログは次のワークフローでサイト生成から公開までしています。

NETLIFY_AUTH_TOKENNETLIFY_SITE_ID はサイト公開時に必要なトークンを含む変数で、リポジトリの設定の Secret タブから設定できます。これにより、安全にトークンを参照できます。

まとめ

静的サイトジェネレーターと CI を併用することで、静的サイトの軽さと CMS のような利便性を両方生かすことができて便利です。

このサイトは荒削りなので、読みやすいサイトにしていきたいです。もし気になる点があれば、言ってくれれば改善できるかもです。おしまい。