このブログの作り方 — Hugo、カスタムテーマ、Azureへの自動デプロイ

Mon, 08 Jun 2026 00:00:00 +0000

このブログは完全に無料で動いています — 管理サーバーなし、データベースなし、ランタイムなし。新しいmarkdownファイルをGitHubにpushすると、30秒ほどでkhangnghiem.comにそのまま公開されます。SSHも、再起動も、月々のホスティング料金も不要です。

この記事では、スタック全体を解説します。Hugoとは何か・どう動くか、コンテンツの構成方法、ゼロから作ったカスタムテーマ、多言語対応（ベトナム語・英語・日本語）、そしてGitHub ActionsとAzure Static Web Appsを使った自動CI/CDパイプラインについて。

Hugoとは何か、なぜ選んだか

Hugoは静的サイトジェネレーターです。markdownファイルを入力として受け取り、純粋なHTML・CSS・JSを出力するプログラムです。サーバーサイドレンダリングも、データベースも、ランタイムの依存関係も不要です。結果は、どんなCDNやWebサーバーからでも配信できる静的ファイルを含む public/ フォルダです。

Hugoを選んだ理由は三つあります。

ビルドが速い。 Hugoは記事数に関係なく、数秒でサイト全体をビルドします。10記事以上あるこのブログでも500ms未満でビルドが完了します。Jekyll（Ruby）やNext.jsは大規模になると大幅に遅くなります。

JavaScriptランタイムが不要。 Node.jsも、npm installも、node_modulesも不要です。Hugoのインストールは単一のバイナリだけ — すぐに使えます。

ページバンドル。 Hugoでは各記事が独自のフォルダに入り、markdownと画像を一緒に管理できます。画像を別の場所に置いて絶対パスで参照するより、はるかに便利です。

Hugoの仕組み — markdownからWebサイトへ

content/ hugo.toml
 post/ (設定)
 java-threads/ │
 index.md ──────────────────┤
 main.jpg │
 page/ │
 about/index.md ──────────────┤
 ▼
themes/blog/ Hugo ビルドエンジン
 layouts/ │
 _default/ │ 1. 設定を読み込む
 baseof.html ────────────────┤ 2. コンテンツツリーを走査
 single.html ────────────────┤ 3. markdown → HTML に変換
 list.html ──────────────────┤ 4. テンプレートを適用
 assets/ │ 5. アセットを処理（CSS、JS）
 css/main.css ──────────────────┤ 6. 出力を書き込む
 js/main.js ────────────────────┘
 │
 ▼
 public/
 post/
 java-threads/
 index.html ← 完成したHTML、配信準備完了
 page/
 about/index.html
 index.html
 index.json ← 検索インデックス

hugo --minify を実行すると、エンジンは：

Azure on Khang Nghiem

このブログの作り方 — Hugo、カスタムテーマ、Azureへの自動デプロイ

Hugoとは何か、なぜ選んだか

Hugoの仕組み — markdownからWebサイトへ