SSGをHugoからSoupaultに変更した
昨年9月、syobon.netのビルドに使用するSSGをZolaからHugoに変更しました。
その後、11月に「ケルパンカ」というウェブメディアを立ち上げることになるのですが、そこで使ってみたSoupaultというSSGがなかなか良かったので、syobon.netもSoupaultに変えたいな〜と思いつつ、なかなか面倒でずっと放置していました。
とはいえいつまでも放置しているわけにもいかないということで重い腰を上げて移行を済ませたので、その記録です。
移行作業
ZolaやHugoはJinja風のテンプレートを用い、テンプレートにコンテンツを埋めていくようにHTMLを生成するのですが、Soupaultは最初からHTMLの状態で、Luaを用いてDOMを編集することで最終的なHTMLを生成するという形を取ります。アプローチが全くもって異なるので、完全に1から作り直しです。まあ、ZolaからHugoのときもなんだかんだで1から作り直したので、誤差と言えば誤差です。
SoupaultにはサイトマップやRSSフィードを作成する機能なんて存在しないので、そのあたりが必要な場合、そちらもLuaスクリプトを書いて生成する必要があります。これがめちゃくちゃ大変なのですが、幸いにもそのあたりのスクリプトはケルパンカを作った際に書いてあったので、再利用することでかなり楽をすることができました。
完全に1から書いたものとしては、右上にある言語切り替え用のスクリプトくらいです。このサイトはなぜか英語とエスペラントに対応しているので、日本語を含めた3言語でテンプレートを使い回せるよう、<i18n>PROFILE</i18>と書いたらページの言語に応じて「プロフィール」「Profile」「Vivpriskribo」を出し分ける、みたいなスクリプトを書きました。汚いので公開はしません。
画像まわり
いままで、このサイト上の画像は<picture>タグによってAVIF→WebP→JPEGという順のフォールバックを行っていたのですが、今日日AVIFに非対応なブラウザもそうないだろう、ということで廃止しAVIFに統一しました。このフォールバックをするためだけにプラグインを書く必要がありますし、そもそも3種類のフォーマットで提供するためにストレージが約3倍必要になるわけで、まあめんどうだったのが理由です。AVIF非対応ブラウザをお使いのみなさま、ごめんなさい。
デザインまわり
CSSもまたまた書き換えました。改めて見るとところどころに微妙なデザインがあったので、主にそのあたりを修正する形で一から書き直しました。以前のデザインと比べると格段に美しくなった気がしています……が、Webデザインミリしらなのでよくわかりません。とりあえず、満足はしています。
コンテンツまわり
表面上の変化は全くありませんが、コンテンツの元データをMarkdownからDjotに変更しました。CJK言語に優しくないMarkdownとはおさらば。Djotはいいぞ。
あとついでに、情報が明確に古くなっていた記事や、あまり出来の良くなかった記事をいくつか削除しました。特に隠すつもりはないので、見たい方はWayback Machineでも漁ってください。
また、プロフィールや各種リンクのページも更新してあります。そのうち変えなきゃなと思っていたので、ついで。
ビルドまわり
Cloudflare Workersのビルド環境がSoupaultに対応しているわけなんてないので、外部のCI/CDでビルド・デプロイまで行うように変更しました。Zola→Hugoをしたときの記事で
あとはGitHub ActionsでビルドしてCloudflareにデプロイ、みたいな方法もあるのですが、なんとなくCloudflareでまとめたかった
と書いてありますが、どうせこうなるのであれば別にHugoに移行する必要なんてなかったね。
おわり
というわけで、SSGがSoupaultになったよーという報告でした。見た目はあまり変わっていませんが、中身としてはかなり変わっている(特にCSS)ので、暇で暇で仕方がない人は比較してみてね。
書き換えを決めてから作業完了まで3ヶ月くらいかかりました(なお、そのうちほとんどは放置しているだけの時間なので、実際に作業したのは数日)が、出来栄えには満足しているのでヨシ！というかんじです。どんどん更新頻度が低下しているこのサイトですが、今後も半年に1回くらいは更新していきたいとは思っているので、あたたかく見守っていてください。それでは。