サイトを Hugo に完全移行しました

作成日:
長野県松本市にあるまつもと市民芸術館
長野県松本市にあるまつもと市民芸術館

当サイトは、以前から自作の SSG (静的サイトジェネレータ)で HTML を出力し、静的サイトとして公開してきました。
ですが、すべてのプログラムを自作でメンテナンスしていくのが大変になってきたので、 Hugo へ乗せ換えることにしました。

Hugo とは

Hugo は、 Golang で書かれたオープンソースの SSG です。

最大の特徴は、 圧倒的なビルドの速さ です。
数千ページ規模のサイトであっても、数秒でレンダリングが完了するらしく、当サイトのような記事数の多くないサイトであれば、記事を書きながらサーバーを立て、リアルタイムでプレビューをしても、ストレスが全くありませんでした。
また、 layout 機能や、強力なコンテンツ管理機能を備えており、サクッとサイトを生成できます。

自作 SSG のメリット・デメリット

自作の SSG を作って、使ってきた感想をまとめておきます。

メリット:最高の自由度

自作 SSG の最大の利点は、 何でもできる ことです。

  • HTML の構造を 100% 制御できます
  • 独自のマークダウン拡張を自由に実装できます
  • 不要なライブラリを一切排除した超軽量な出力が可能です

自分のプログラミングスキルも上がりますし、まさに建築家が自邸を建てるような楽しさがありました。
一方で、制作・運用コストは、かさみます。

デメリット1:車輪の再発明

まず、「当たり前」の機能も、自作で実装する必要があります。

  • sitemap.xml の生成
  • ページネーション
  • パンくずリスト(breadcrumb)

などなど、普通のサイトで必須の機能でも、すべて自力で実装・バグ取りしなければなりません。

デメリット2:忘却、過去の自分との対話

自分専用のツールであるため、わざわざ丁寧なドキュメントを残す必要がありません。
また、そのインセンティブも、はたらきません。

その結果、数か月ぶりにコードを触ると、「このメソッド、どうやって呼ぶんだっけ?」 と、過去の実装を読み直す時間が必要になりました。
また、「どうしてこんな設計になっているのだろう?」「ここでこのオブジェクトを呼び出せれば良いのに」など、過去の自分の未熟さに何度も立ち返る必要がありました。

結局、本来の目的である「記事を書くこと」よりも、「システムを直すこと」に時間がかかってしまっていました。

Hugo の環境構築

Hugo は、前述のとおり Go という言語で作られており、環境構築が必要です。

インストール方法は、いくつか用意されている ようですが、私の体感では、 GitHub のリリースから、バイナリをダウンロードして、パスを通す方法が最も楽でした。

移行の手順

今回の移行にあたって、主に行った作業は以下の3点です。

  1. マークダウンのフロントマターの入替え
    自作 SSG で定義していた独自のメタデータ(YAML形式)を、Hugo の仕様に合わせて書き換えました。
    特に、日付のフォーマットや、eyecatch 設定(params)の挙動を合わせる作業が中心です。

  2. 画像ファイルを別サブドメインへ退避
    今回は、コンテンツを Git で管理したかったため、リポジトリが肥大化する原因となる画像ファイルは、本体のリポジトリから切り離しました。
    これらは、格安のレンタルサーバーへ移動し、画像用のサブドメインから配信する構成に変更しました。

  3. 画像の URL 先を差し替え
    上記により、マークダウン内に記述していた画像パスを変換し、新しい画像用サブドメインを指すように調整しました。

感想

Hugo は、ドキュメントもしっかりしており、破壊的な変更があった部分も、きちんと整理されていました。
人気の SSG であるため、生成 AI もかなり学習しており、何かやりたいことを尋ねれば、ほとんどのケースで正しい答えが返ってきます。

一番むずかしいところは、 Hugo 自体の環境構築だったかもしれません。

今後、いろいろな部分を修正しながら、 Hugo の使い心地を試していきたいです。

最後までお読みいただき、ありがとうございました。

何かお気づきの点がありましたら、 お問い合わせ ください。