ブログをLumeに移行した

このブログ（p-hone.info）の基盤をLumeへ移行した。 以前Astroへ移行してからの3回目の移行となる。

なぜか？　前回Astroに移行したときは「困ってないが、新しい技術の練習として」…と書いたが、今回は困った点もあったので1年以内での早い移行となった。

Astroで困った点

このブログは記事をMarkdownで書き、同じディレクトリに画像を置いている。 たとえば p-hone.info/posts/2ch/ だと次のような構造になっている。

./posts/2ch
├─ index.md
└─ komugi.webp

index.md はHTMLに変換され p-hone.info/posts/2ch/ に配信される。 では同じ場所にある komugi.webp はどうなるか？ 順当に p-hone.info/posts/2ch/komugi.webp と予想できるが、Astroではそうならない。以下の謎文字つきのアドレスで配信される。

p-hone.info/_astro/komugi.DW-QOuu3_Z1IwovF.webp

これはAstro組み込みの自動最適化によるものらしい¹。 しかし、このブログでは不要だ。画像の最適化は記事に貼る前に手動でやっているからだ。色味を気にするイラストは圧縮しすぎない等個別にチューニングしたい。

Astroの設定で圧縮を切ることはできるが、謎文字列つきのURLを切る設定は……なかった。URLが変わっても記事内の画像はちゃんと表示されるのだが、例えばRSSフィード内の画像のURLがAstro仕様に置き換わっておらず、RSSリーダーだと画像が見えない問題が起きていた。

なんとかできないかと調べたところ、RSS the hard way: Adventures with Astro Assets - Brian Birtles’ Blog がヒットした。 この記事によると、画像のURLを置き換える仕組みはAstroの裏にいるVite……の裏にいるRollupというライブラリの挙動で、ここを変えるには相当複雑な改造が必要らしい。ただ置いた通りのURLになってほしいだけなのに、なぜこんなことに？

だが、Astro移行の記事に書いたようにYouTubeの埋め込み対応などの柔軟さは便利で捨てがたく、Hugoに戻すのはちょっとなぁと思っていた。 何かいい感じの選択肢はないか探したところ、見つけたのがLumeだった。

Lumeの採用

LumeもHugoやAstroと同様にSSG (Static Site Generator)のひとつで、個人サイトやブログを作るのに適している。 触ってみた感触としては、最小限にして軽量で、裏で複雑なことをしていてよくわからないということがあまりなさそうで好印象だ。

何より、画像の扱いがシンプルでいい。 次の一行を足すだけで、最適化もせず、置いた通りの構造で画像ファイルをコピーしてくれる。これでRSSフィード内の画像URL問題は一発で解決した。

site.copy([".jpg", ".gif", ".png", ".webp"])

さらに、MarkdownをHTMLに変換する仕組みとしてremark, rehype（Astroと同じもの）が使える。よってAstro時代に用意したYouTube埋め込み対応などはそのまま引き継げる。これも嬉しいポイント。

Lumeは公式で用意されているプラグインも多くブログでよく使う機能がわりと揃っており、 p-hone.infoを移行するには十分だと判断してLumeを採用した。 ついでにサイトデザインも少し変えた。ガーデニングみたいで楽しい。

思わぬ収穫としてCloudflare Pagesでのビルドも速くなった。 Astro時代は40秒ほどかかっていたところがLumeに変えると15秒になった。

Lumeに対して懸念点がないわけではない。 Denoという新興の実行系に依存しているが、普及しているNode.jsと比べてDeno利用者のコミュニティはまだ小さい。 DenoそしてLumeに関して先人たちの知見が少なく、これってどうやるの？　となったときに調べづらいこともある。

だが、Lume Showcaseにいくつか実例がありソースコードを公開してくれているサイトも結構あるので実例またはLume本体のコードを直接見て参考にすることは十分できる。Astroよりも最小限でシンプルな形なのでコードも読みやすい。p-hone.infoの規模だとLumeはちょうどいい感触があり、しばらく使ってみようと思う。