GitHub PagesとJekyllでサイトをリニューアルしたお話と苦労した点
さて無事に公開を終えたところで忘れないうちに、今回のリニューアルするに至った経緯と構築する上で苦戦したところを誰か似たような構成のサイトを作ろうとした時の参考になればと思い書いていこうと思います。
- 前サイトで行っていたWordPressでの運用について
- Jekyllでの構築に当たって
- GitHub Pagesで自動build&deployするための制限
- プラグインの制限によって生じた機能の問題に関する解決
- 最後に発生した小さな問題
- 終わりに
前サイトで行っていたWordPressでの運用について
WordPress自体は仕事でもよく扱うことが多いためとても馴染みの深いCMSなのですが、個人的に「ブラウザで管理画面にアクセスする→ログインする→ブラウザ上で記事を新規で作り、そこにあるエディタで書く」というのがどうしても億劫で合いませんでした。（もちろんネットに繋がる環境さえあれば、出先でもスマホからでも更新ができるというのはとても魅力ではあるのですが）
仕事などでmarkdownを扱うことが増えてきたのもあり、ローカルのエディタでさっと書いてリポジトリにpushするだけで記事を更新できる仕組みにしたいなぁと考えておりそこにちょうどよくハマったのがGitHub Pagesに静的サイトジェネレータの組み合わせでした。
どの静的ジェネレータにするか色々試しましたが、結局のところGitHubでも推奨しており自動でbuild&deployができるJekyllを選択することに。
ただ、この自動build&deployするための制限になかなか苦労させられました。この話は後のほうで。
目指した方針
「最低限必要な要素とSSG構成の超軽量サイト」
同人音楽サークルも休止中であり、ひとまずブログとして最低限必要なシンプルなサイトにしようと思ったので、とにかく軽量であることを目指しました。
Jekyllでの構築に当たって
ここ数年ずっとHTMLはPugで、CSSはStylusを使ってコーディングしていたこともあり最初は意地でも素のHTMLなんて書きたくないヤダヤダと思ってGulp等を導入してPugとStylusで書いたものをコンパイルしてbuildに乗せるとか考えてたんですが、今回は小規模なサイトなので逆にそういうことをしたほうが煩わしくなりそうという結論になり結局普通にJekyllの仕様に則ってコーディングし始めました。（初めて導入したWSL2の設定とか含めてこれだけで2日ほど無駄にした）
Jekyllは標準でSassに対応していたのでCSSの記述はまだマシでしたが……正直SCSS構文なんて面倒な記述がなぜスタンダードになっているのかわからない。:も;も書きたくないでござる
Jekyll自体は学習コストも低く、またネット上にもノウハウが豊富にあるのでとっつきやすくて良かったですね。
WordPressで自作テーマとか作った経験があると容易に理解できるかなと。
今回のサイトは以下の機能を持ったサイトにしようと思い設計とデザインとコーディングを始めました。
- 過去の同人活動の記録を表示する静的ページ
- 自己紹介ページ
- ブログ機能
- 記事一覧表示（10件ずつ表示でページング要素あり）
- 記事詳細表示
- タグ機能による絞り込み機能
- 月別アーカイブによる絞り込み機能
ネットで調べながら便利なプラグインを入れてローカルでbuildしたファイルを参照しつつ順調に作業をしていきましたが、初めてGitHub上のリポジトリに反映した時に初めて今回の問題に当たることになります。
GitHub Pagesで自動build&deployするための制限
個人的に苦しめられたこの制限。
この制限のためどうしても実現できない機能があり泣く泣く外したものもあります。ここからはどのような制限に引っかかり、そしてどのように対処していったかを書いていこうと思います。
利用できるプラグインが限られている
GitHub Pages上でJekyllのサーバーはセーフモードで動作するため、一部のプラグインを除いて使用することができないようになっています。自分でRubyで書いたスクリプトも当然動作しません。
例えばカテゴリ一覧や日別アーカイブを簡単に出力してくれるjekyll-archives、様々なアーカイブに簡単にページングを実装するjekyll-paginate-v2といった非常に便利なプラグインがあるのですが、これらも一切使えません。
アーカイブに関しては手動で設定しているタグや年月に対応したmdファイルを用意してbuildすれば実現可能ではありますが、新しいタグを追加したり月が変わったりする度に手動でファイルを生成するなんてかったるくてやってられません。何としてもここは自動化したいところです。
そのあたりの解決にあたって以下のページが非常に参考になりました。
プラグインの制限によって生じた機能の問題に関する解決
カテゴリ一別アーカイブ用のHTML生成
参考サイト：まるまるにっき タグページを追加しました
カテゴリー、タグ一覧を自動で出力するにあたってファイル更新時のhookに合わせて全tagに対応したmdファイルを自動出力してくれます。
先ほどGitHub Pages上では自分で用意したRubyスクリプトは動作しないと記述しましたが、こちらはローカルで動作すればよいので問題ありません。記事を書く際にローカルでJekyllを立ち上げていれば勝手に生成してくれます。
これにより、各種タグを表示するためのhtmlファイルが自動で生成されるようになりました。
ちなみに本ブログでは「カテゴリー一覧」という名称で出力していますが、上記記事を参照しているためテーマ側の設定自体はtagになっています（どうでもいい裏話）
カテゴリー一覧表示（件数付き）
参考サイト：stmy.notepad Github PagesのJekyllでアーカイブ機能を実装する
カテゴリー一覧を表示する際は上記のページが非常に役に立ちました。 最終的に出力するパスは先ほどのアーカイブHTMLを出力したパスに合わせる必要があります。
月別アーカイブ用HTML生成
参考サイト：Aneejian Automated Jekyll Archives for Github Pages
カテゴリー、タグ、記事の日付をそれぞれ配列としてjsonファイルに格納し、GitHub Actionsを利用して取得した配列から一覧用のmdファイルを生成しcommitを作る仕組みです。
正直なところこれがあれば先述したタグ出力設定も同時にまかなえるのですが、自分はブログの階層を/blogと1つ下げていたためブログ関係はなるべくこれに従いたく、月別アーカイブのみどうしても例外という形で利用しました。
なのでルートにブログ本体を設置している人はこれで全部まかなえると思います。
変更した点としては、参考サイトの設定では_postディレクトリ内のファイルの差分がpushされたタイミングでworkflowが走るようになっていますが、自分の場合GitHub Pagesでbuild&deployされたファイルを参照するようにしているため、参考サイトの設定ではworkflowが走ったタイミングではまだdeployされておらず後ほど改めてworkflowを実行する必要がありました。
それではとても手間だということで、実行タイミングをdeploymentに変更し、GitHub Pagesがdeployに入ったらworkflowを実行するように変更しました。
ただdeployと同時に走ってしまうので、deployのほうが先に終わってしまった場合は新しい差分を生成できないため、加えて1日に1回同じ処理を定期的に動かすように設定しました。
月別アーカイブ一覧表示（件数付き）
参考サイト：stmy.notepad Github PagesのJekyllでアーカイブ機能を実装する
カテゴリー一覧の時と同じ参考サイトですね。
最終的に出力するパスを先ほどのアーカイブ用HTML生成で作られたパスに合わせています。
ページング処理
jekyll-paginateを利用します。
こちらはGitHub Pagesでサポートされているプラグインですので、問題なく動作します。
しかし、jekyll-paginate-v2と比べてアーカイブ一覧などには適応することができず、全記事一覧のみの対応となります。
なので本ブログもカテゴリー一覧や月別アーカイブにはページングが存在しません。
まぁそんなページングが必要になるほどたくさん記事が並ぶこともないだろう、と妥協した結果になります。
最後に発生した小さな問題
無事にサイトが完成し、GitHub Pagesに公開し新しく記事を書いて更新したのが昨晩深夜3時。
無事に書きあがりmdファイルを含んだcommitをGitHub上のリポジトリにpushし、1分ほどでbuildとdeployが終わり実際のページ上で確認するも更新分の記事が反映されていない。
……はて？
再度buildとdeploy処理をしても反映されない。
これはどういうことなんだいとbuildからログを追ってみると
Skipping: _posts/2022-03-10-WEBサイトの再リニューアルと今後の方針.md has a future date
ナンデ！！？
いや今3月10日の午前3時半ですやん？？なんで未来扱いになっとん？？
と思ったのですが冷静に調べてみると、GitHub Pagesの標準のタイムゾーンの設定が日本時間よりも9時間遅くなっているようです。
Jekyllは未来の日付の記事はbuildしないようになっているのでスキップされていたわけですね。
対応策としては簡単なもので、_config.ymlに日本のタイムゾーン設定を記述すれば日本時間で判定されるようになりました。
timezone: Asia/Tokyo
終わりに
というわけで無事にこうやって公開することができました。
正直ただブログを作るだけでしたら既存のテーマを利用するのが手っ取り早いのですが、今回は軽量かつ自分の好きなデザインで作りたかったのでゼロから制作するのを選びました。
何だかんだでやってる最中は夢中になれて楽しかったですね。あとは継続的に記事を書き続けられるように頑張りたいと思います。
さて、無事に書きあがったのでゆるキャン△の13巻を読むぞ。
