式年遷宮です（？）
前回
経緯とモチベーション
僕が現在も更新している個人サイトは以下の4つです。
- このブログ：はてなブログ
- 個人サークルのサイト ：Astro
- ブラウザゲームの公開サイト：Sveltekit
- RPGツクールのプラグイン公開サイト：Astro
個人サイトは個人サイトなので、いろいろな技術スタックを使いたい気持ちがあります。お仕事とかだと Next.js みたいに「そうだね」って感じの選択にしがちなので、個人サイトでいろいろ遊ぶことにしています。
なのですが、ここしばらくは「(2) 個人サークルのサイト」「(4) RPGツクールのプラグイン公開サイト」が両方とも Astro になってしまっていました。もともと (4) のページを先に Astro にしていたのですが、ページの要件とかを考えると (2) のページのほうが Astro の恩恵を受けられそうだったので、(2) のページを Astro でリプレイスしてしまったためです。
せっかくいろいろ遊びたいのに同じものを使ってるのはもったいない！
そのため、(4) のページを別の何かに置き換えたいなとずっと思っていました。
いろいろ検討したがそもそも……
最初検討してたのは以下のあたり
- honojs/honox: HonoX - Hono based meta framework
- Lume, the static site generator for Deno - Lume
- Eleventy is a simpler static site generator
それぞれちょっと手元で1ページだけ動かしてみて……みたいなことをして遊んでいました。が、思い返すと1つ気になることがありました。
僕、Hugo使ったことないな……、と。
Hugo
この世で Static Site Generator といえば Hugo です（※諸説あります）
それくらいの有名どころなわけですが、僕は人生の中で Hugo をちゃんと通ったことがなかったんですよね。本当にちょっとだけ覗いてみたことはあるけど……程度。
「Static Site Generator どれがいいかな～」とか言ってるのに、超有名どころである Hugo を触ったことがないっていうのは、どう考えても舐めプでは？？？？？？？？？？？
Hugo をちゃんと使ってて、その上で他のものを探しているならともかく、Hugo 触らずに探しているのは何だかおかしいことをしている気分になってきました。ちゃんと Hugo を知らずに Static Site Generator を語る僕は大馬鹿者なのでは……、という気持ちが高まりすぎたため、今回 Hugo と真面目に向き合うことにしました。
ページ要件
今回の「(4) RPGツクール向けプラグイン公開サイト」のページ要件は非常にシンプルです
- すべての記事は Markdown で管理
- サイト公開当時は Vuepress を使っていたため、その頃からの Markdown を引き継いでいます
- Astro では一部要素をコンポーネントに切り出すために mdx を使っていたが、別にそこまで重要ではない
- このサイトでは画像最適化もしてなかった
- JavaScript などの動的な要素は少しだけ
- Google AdSense や Analytics
- 画像拡大表示の medium-zoom
- スマートフォン表示時のメニューの開閉ボタン
- レイアウトは全部自作
- スタイルはグローバルなSCSS
- デプロイ先は Cloudflare Pages
シンプルすぎて実現できない Static Site Generator ないだろ。
そんなわけで Hugo への移植も簡単です。基本的には .astro ファイルのレイアウト系のファイルを Hugo のテンプレート形式にあわせて移植するだけです。
Hugo のテンプレートを触るのは当然初めてなので若干戸惑う部分もありましたが、ChatGPT や GitHub Copilot や Cline の力によって無理やり突破していきます。嘘、ときどき突破できなくて普通に公式ドキュメントを読みました。最終的には人間様や。
Hugo 触ってみて良かったこと
爆速
速さは正義
ビルド結果を支配しやすい
Hugo は本当に Static Site Generator なので、最後に出力されるのは HTML です。基本的に layouts/_default/baseof.html に沿ったHTMLが出力されるため、最終的にビルドされるHTMLを制御しやすいです。
以前 Astro を使ってる際に、Layout用のコンポーネントの import 順によって CSS の読み込まれる順番が変わって困るということがありました。レイアウトを入れ子にする場合とか、そのあたりを意識する必要があります。
Hugo はそんな複雑なこと起こり得ず、テンプレートに書いた通りにしか出力されようがありません。そのため、そういった余計なところに頭を回す必要がないのは楽です。できることが少ないほうが助かることもあります。
基本的に Hugo の上ですべてが完結する
色々プラグインを探してきたりとかする必要がないです。いろいろなものを組み合わせて何でもできるのは便利ですが、それらのメンテとか考えると依存を増やしたくない気持ちがあります。
が、もしかしたら人によってはテンプレートとかで消耗するケースはあるのかもしれません。僕はテンプレート全部自分で書くのでその辺りは影響なしです。
若干微妙になっているのは SCSS の部分です。依存はあまり増やしたくないのですが、この記事を書いている現時点では Hugo-extended で libsass を使ってしまっています。
本当は SCSS 自体やめてもいいかなという気持ちだったのですが、自作の mixin を使っている部分などを置き換えるのにコストがかかりそうだったため一旦保留しています。そのうちやるかも。
そんなわけで
置き換えたといっても、見た目はほぼ同じなのだった。
見た目は変わらないですが、置き換えの合わせて内部的には少し整理している部分もあったりします。RSSフィードとか、多言語対応の布石とか。
このサイト自体、そんなに高頻度に更新するページではないため、保守難易度という観点でも Hugo みたいな定番系を使うのは良かったかもしれませんね。
