Hugo で blog サイトの作成: 経緯編

yamk
目次

はじめに

この blog は 2020 年 6 月から Hugo という「静的サイトジェネレーター」で書いている。5年も経つのにまだ20本も上げていないので反省。

いまさらだが、現在の yamk blog の経緯と構成についてメモしておく。

tDiary、Movable Type, WordPress といくつかWeb日記 (Blog) アプリを使ってきて特に感じたのは、Ruby やPHP などの言語に依存したアプリケーションサーバのシステムは、公開サーバが破損した際の復旧が極めて面倒だということだった。OSディストリビューションおよび内包されるライブラリ、Webサーババージョン、言語バージョンの依存関係が深いため、構成要素のアップデートや長期のメンテナンスで苦しんできた。

tDiary で何年も書いていた「yamk日記」というブログや 後継の WordPress 版日記も自宅サーバの故障ですべて消えてしまい、復旧できなくなった。

エンジニアなんだからバックアップ取っておけよと指摘はごもっともだが、バックアップ環境は思いのほか手間とコストが掛かるし、バックアップ先も普通に故障するので、趣味の範疇でそこまで用意するのは難しい。

あるとき「静的サイトジェネレーター」なるジャンルの CMS (コンテンツマネジメントシステム) の記事を目にして、これなら大部分が問題解決できることに気づいた。

静的ファイルジェネレーターとは

特徴と利点

  • 記事はテキストファイルで書く。
    • 技術ドキュメントで広く使われている Markdown (.md) 形式が多い。
    • Markdown 表記には方言があるが、基本の書式はほぼ同じため、他のシステムに乗り換える際も移行コストが低くできる。
  • テキストファイル群のツリーから「全体をビルド」して、HTML/CSS/JS ファイル群の、静的 Web サイトとして生成する。
    • サーバアプリケーションが存在しないため、blog サイトを極めて軽くできる。
    • アプリケーションがないので、Apache や nginx といった Web サーバ以外には脆弱性は存在しない。
  • ビルド前の記事の元データはソースコードとして扱えるので、git 等のバージョン管理システムとも相性がよい。
  • データベースが存在せずソースコードツリーと同様であるため、Dropbox 等のファイル同期サービスとも相性がよく、バックアップも簡単。
    • 公開サーバが壊れても、Dropbox や git リポジトリに残っていれば復旧は簡単。

弱点

「静的」であるが故に下記の弱点も存在し、必要に応じて外部ツールで補完する必要がある。

  • 検索が使えない
    • blogアプリケーションが存在しないので、検索機能は付与できない。
  • コメント・返信・リアクション機能がない
    • コメント機能は、SPAM 投稿や脆弱性攻撃の温床でもある。中でも WordPress は結構大変で、記事の公開や維持より SPAM コメント対策に神経を削られていた。
      • 本格的 SPAM 対策は有償サービスだったりする。
    • 外部サービスでコメント機能を付与することは可能だが、無償プランだと連携機能に難があったり、コメントを投稿する側がサービス登録をする必要があったりするので、個人的なメモ用 blog と割り切って諦めることにした。
  • GUI がない
    • テキストのみであるが故に、文章に装飾を施した状態をリアルタイムで見ることはできない。
      • テキストエディタの拡張機能や、システム自体の機能でカバーできるものもある。
    • インライン画像を貼りづらい
      • 適切な画像ファイル (.jpg/.png/.webp) 形式のファイルを置き、ファイルパスと配置をテキストで指定する必要がある。Web GUI でドラッグ&ドロップ、のような気軽さはない。
  • Markdown 形式自体の弱点
    • 表組 (テーブル) を Markdown 標準書式で持っていない。
      • 複数の方言が存在するが、テーブルのような複雑な構造をテキストで表現する、わかりやすい記述方法がないらしい。
      • テーブルは静的サイトジェネレーターのシステムごとに独自の実装になっているため、システムの移行時にハードルになるかもしれない。

静的ファイルジェネレーターの種類と選定

この blog を乗り換えるにあたって、人気のある静的ファイルジェネレーターの候補を比較検討した。

最終成果物は「静的サイト」であっても、元記事ファイルからサイトをビルドするためのアプリは当然必要であり、ビルド環境構築の簡易さも重視した。

名称 読み方 ベース言語 ビルド用フレームワーク
Gatsby ギャッツビー Javascript Node.js/React
NEXT.js ネクスト ジェイエス Javascript Node.js/React
Nuxt ナクスト Javascript Node.js/Vue
jekyll ジキル Ruby (gem)
Hugo ヒューゴ go言語 不要

Web系のシステムだけあって Javascript 勢が強いようで、静的ファイルジェネレーター のシェアのトップは Gatsby と NEXT.js らしい。

当初これらも検討したのだが、私に Javascript/Typescript の基礎知識がなさすぎるのと、Node.js の脆弱性や頻繁なメジャーアップデート(数年で後方互換性の喪失など)でよい噂を聞かないので断念。

Ruby 製の jekyll も、tDiary と同様に Ruby の言語仕様に振り回されそうだったので避けることにした。Python/Ruby は脆弱性対応のための本体をアップデートすると、追加モジュールが動かなくなるという経験を何度もしたのでこれもいい印象がない。

Hugo の特徴は、コンパイル済みの Hugo.exe 1ファイルのみですべて完結しているということ。GO言語はコンパイラとして採用されているだけであって、Windows / macOS / Linux 用にコンパイル済みの実行形式バイナリが配布 されている。Hugo を使うときは GO言語を意識する必要は全くない。 依存ライブラリ/ファイルは一切なく、単に hugo.exe を差し替えればバージョンアップ完了。最強の可搬性である。

Hugo を詳しく見てみる

個人的に Hugo が刺さったので、さらに詳しく特徴を見てゆく。

  • スクリプト言語に依存しない
    • スクリプト言語のバージョンや環境を気にしなくてよい
  • オープンソース版のみであり、有償サービスの無料版ではない安心感
    • 運用中に突然課金制になるサービスをいくつか見てきたので
  • ドキュメントも充実
    • 英語のみだが、利用方法・開発の資料も保守されている
  • 開発コミュニティが活発
    • 毎月1～2回のアップデートが公開される。セキュリティ対応も安心
    • GitHub の★が 74,000 以上 (2024/8/12時点)
  • テーマの差し替えによりデザイン変更が可能
  • 日本語の解説サイトもそこそこある
    • 別のソリューションとも思える技術ブログサイト Qiita, Zenn, note にも Hugo での構築・評価記事が多数投稿あり

結論と方針

以上の状況と調査結果から、この blog は Hugo ベースで書いてゆくことにする。(と決断したのは4年前)

方針は次の通り。

  • Windows PC に Hugo を導入する
  • Microsoft Visual Studio Code(VScode/無償) ＋ Hugo アドオンで記事を作成・管理する
  • Dropbox(無償プラン) の同期フォルダ上に、blog 全体のビルドツリーを作成し、バックアップする
  • GitHub(無償プラン) で Hugo 関連フォルダツリー全体をバージョン管理する
  • Netlify(無償プラン) というホスティングサービスで blog 公開する
    • Cloudflare Pages で blog公開 (2024年9月移行)
  • GitHub にコミットすると、自動的に Netlify にデプロイ・公開される方式を採用
  • 検索には Google サイト検索を採用
  • Google Analytics で閲覧数を把握

以上から、無償ツールとサービスのみで blog 作成、バックアップ、公開、手元保存等々を全て実現できるようにした。 具体的な環境構築は次の記事で公開する。