Day1：Hugoで静的サイトを作るメリット

この記事はアドベントカレンダーの記事です。
https://qiita.com/advent-calendar/2025/dokokanoradio_hugo

前置き：モチベーションなど(興味のある方向け)

元々、自分のSNSのリンクをまとめるのに、いわゆる「プロフサイト」のようなサービスを使っていました。
しかし、以下のような点が不満でした。

• サービス終了してしまうと一からやり直しになる
  • 実際に自分の使っていたサービスが終了して移行することになった
  • ブログの様にお引越し機能があれば便利だが、対応しているプロフサイトは珍しい？
• プロフィール以外のコンテンツも載せたいが、対応していない
  • 当たり前と言えば当たり前だが、 違うサービスを使うしかない
• 自分の思ったようにカスタマイズできない
  • 自分が使っていた所では、課金しないとOGP¹が使えないなど

ということで、モダンなWeb技術の勉強も兼ねて、個人でWebサイトを作ることにしました。
かといって、HTMLを手打ちで作るのも大変です。(遠い昔にやってはいましたが)
色々と調べた結果、Hugoを利用してWebサイトを作ることにしました。

構成

• SSG(静的サイトジェネレーター
  • Hugo(https://gohugo.io)
• Hugo用テーマ
  • Blowfish(https://blowfish.page)
• リポジトリ / バージョン管理
  • GitHub(https://github.com) / git(https://git-scm.com)
• サーバー
  • CloudFlare Pages(https://www.cloudflare.com/ja-jp/developer-platform/products/pages/)
    • GitHubリポジトリ連携によりPushすればデプロイされる
• デプロイの通知等
  • Discord(https://discord.com)
    • GitHubに設定することで、デプロイなどの際にチャットが飛ぶ

実際に作ったサイト

Hugoで作成したサイトのイメージとして掲載します。

Hugoで作った上で感じたメリット

観点別で挙げていきます。

• サイトを更新する・公開する上でのメリット
  • HTMLを手打ちすることなく容易に生成できる(Markdownのおかげ)
  • 生成処理が高速(公式もこれが売りの模様)
  • レンタルサーバーがサービス終了したとしても移行が容易
    • 手元にMarkdownやHTMLが残る
    • アドレス修正して再ビルドし、新サーバーに上げるだけ
    • そもそも、自分でサーバーを立てるという手もある
    • いずれにせよ柔軟性がある
  • テーマ機能により、見た目の良いサイトが簡単に作れる
    • 今回はBlowfishというテーマを使用した
  • コンフィグパラメーターによるカスタマイズ性もある
  • 汎用的なWebサイトが作れる
    • ブログの様なサイトもできるし、普通の個人サイトも作れる
• 技術的なメリット
  • MarkdownはHTMLタグも貼れるので、Googleマップなどの埋め込みも容易
  • ShortCodeにより、テンプレート処理を容易に記載できる
    • 引数もあるので「HTMLタグを生成する関数」の様に使える
    • 足りない部分を自分で補える
  • NetlifyやCloudflareなどのサーバーでもサポートされている
    • Githubのリポジトリにコミットすればデプロイできる
    • 当然、手動でサーバーにアップする選択肢もあり、柔軟性が高い
  • ビルド時に引数を付けるだけで、HTMLのMinifyも自動で行える
    • サイトの転送量削減が容易
  • テーマによっては画像処理で自動的に画像を小さくしてくれる
• 技術的な勉強として
  • 静的サイトなので、学習コストが低い
    • 過去に学んだHTML等の知識が使える
  • モダンな技術が使われていているうえ、カスタマイズ性がある
    • 興味に応じて少しずついじることで勉強になる
  • 扱う範囲が広いけど、Webサイトという目に見える実感が出来る
    • URLをどうするか、画像を載せるには、○○するにはetc....

ひとりアドベントカレンダーとして

この記事は、2025年のひとりアドベントカレンダーの記事として書いています。
実際に作ってみた分かったことや、「サイトを作っているときにこんな情報が欲しかった」などを25日間掛けて記事に出来ればと思います。
「このアドベントカレンダーを見てHugoにトライしてみた」とか、困った時の助けになれば幸いです。

1. SNSなどでURLを貼った際に、画像や見出しなどを付けて表示する機能。QiitaでもURLを貼るときれいに表示できるのはOGPのおかげである。 ↩