SSGをZolaからHugoに移行した話

2025/09/01

syobon.net では、開設以来SSGとしてZolaを使用していました。Rust製でイケていたのと、Cloudflare Pagesでサポートされていたのが主な理由でした。

ところが、Cloudflare PagesのZola対応はかなり雑で、Zolaのアップデートに全然追従してくれなかったり、ビルドシステムV2へのアップグレード時にサポートが外されたり、V3へのアップグレードでも復活しなかったりと散々でした。

そんな中、「Workersで静的サイトホストできるようになったからPagesやめてWorkersにしてね」というような内容の記事がCloudflareから出されました。ちなみに、Pages V2でハブられたZolaはもちろんWorkersでもサポートされていません。

一応、

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh && . "$HOME/.cargo/env" && cargo install --locked --git https://github.com/getzola/zola && zola build

みたいな呪文をビルドスクリプトに指定すれば使えないこともないのですが、アホらしいのとZolaのビルド時間が無視できないので、意を決してZolaをやめることにしました(あとはGitHub ActionsでビルドしてCloudflareにデプロイ、みたいな方法もあるのですが、なんとなくCloudflareでまとめたかった)。

移行先選定

移行するならHugoかAstroかな〜という感じだったのですが、サイトの性質(JavaScript使わない、使い回せるものも多くない、そもそもHTML/CSSを手打ちする経験をしたいというのも目的の一つ)上Astroを使うメリットもあまりないかな、ということでHugoを選択しました。

そういえば、私が初めてSSGを触ったころはHexo vs. Hugoの構図がかなりあったような気がするのですが、最近はHexoの名前をほぼ聞かなくなったような気がします。

移行作業

移行作業は、おおむね

HTMLテンプレートの移植ついでに書き直し
CSSの移植ついでに書き直し
ショートコードの移植

という手順で行いました。

HTML

移行するついでに、ドキュメントの構造を少し変更したのと、より適切なタグを使用するようにしました。

一部のdivタグをmainやarticleタグに変更したので、より良いHTMLになった……はずです。

あと、かつてtimeタグを誤ってdateと書いていたことがあり、修正したのですが、修正漏れを発見したので修正しました。

それから、aタグのリンク先を、絶対リンクから相対リンクに変更しました。これまでは絶対リンクで指定していたせいでwww.syobon.netからアクセスするとCSPに怒られるという問題があり、www.syobon.net→syobon.netのリダイレクトを設定していたのですが、これからはその必要がなくなります。最初からやっとけ。

CSS

HTMLの構造を変更したのもあり、完全に1から書き直しました。

主な変更点としては、

一部で使っていたfloatを撤去してdisplay: flexで書き直し
一部のdisplay: flexをdisplay: gridで書き直し
@media (prefers-color-scheme: dark)でのダークテーマ対応をやめ、color-schemeとlight-dark()での対応に変更

といったところです。新しいCSS機能も使ってみようと思っていくつか入れてみた結果、Pale Moonでの表示がおしまいになってしまいました……。おそらくほとんどはCSS Nestingのせいなので、諦めるかそのうちネストを解除するかしようと思います。

また、この書き直しにより、3725バイトあったCSSが3128バイトに減少しました。100Mbpsの回線を仮定すると、なんと0.00005秒の短縮になります。やったね。

ショートコード

syobon.netではAVIFとWebPを活用しており、pictureタグでうまいことフォールバックできるようにしてあげる必要があります。この記述をショートコードで自動化していたので、Hugoに向けて書き直す必要がありました。

とは言っても、そこまで大きなショートコード(大きいショートコードはショートなのでしょうか)でもなかったので、Contextの扱いに少し苦戦した程度で比較的すんなり移行することができました。

移行してみて

移行作業はかなーり面倒臭かったのですが、あまり苦ではありませんでした。

私がZolaを使いこなせていないだけかもしれませんが、「imgタグのwidthとheightを自動で計算して入れる」みたいな、ZolaではできなかったけれどHugoではできることがいくつかあり、移行してよかったなと思います。

不満点があるとすれば、Go由来のカスみたいな日時フォーマットと、あとはSassのコンパイルに外部アプリケーションが必要なことくらいでしょうか(避けたかったのでSassをやめて素のCSSに移行しました)。

ともかく、無事移行することができました。CSSを1から書きなおしたので、しばらくはレイアウトが崩れていないかたまにチェックしないとですが……。

ちなみに、Google Geminiに「HugoはZolaより速いよ！」とそそのかされたのも移行の決め手だったのですが、ビルド時間は135msから141msに微増しました。かなしい。