📘 Hugoとは？（まずは全体像を理解する）

Hugo は Go言語で作られた静的サイトジェネレーター（SSG） です。
Markdownで書いた記事を HTML に変換し、高速に Web サイトを生成できます。

Hugoの特徴

  • とにかくビルドが速い（数百記事でも一瞬）
  • サーバー不要（静的ファイルなのでどこでもホスティング可能）
  • Markdownで記事を書くだけ
  • テーマが豊富（PaperMod、Stack、LoveIt など）
  • GitHub Pages / Netlify / Cloudflare Pages と相性抜群

補足：Hugo は CMS ではありません。WordPress のように管理画面はなく、ファイルベースで管理します。

⚡ Hugoで何ができるのか？

Hugo はブログだけでなく、以下のようなサイトにも向いています。

🔹 ブログ・技術メモ

Markdownで書けるため、エンジニアやクリエイターに人気。

🔹 企業サイト・LP

高速でセキュアなため、企業サイトにも採用例多数。

🔹 ドキュメントサイト

Hugo公式テーマ「Docsy」など、ドキュメント向けテーマも豊富。

🔹 ポートフォリオサイト

画像や作品をまとめるサイトも簡単に構築できます。

🆚 Hugoと他のツールの違い（WordPress / Jekyll / Next.js）

初心者がつまずきやすいポイントを比較しながら整理します。

🔸 Hugo vs WordPress（CMS）

項目HugoWordPress
サイト生成静的動的
セキュリティ高い低め
速度爆速遅くなりがち
管理画面なしあり
運用コストほぼ無料サーバー代が必要

注意：管理画面が欲しい人は WordPress の方が向いています。

🔸 Hugo vs Jekyll（SSG）

項目HugoJekyll
ビルド速度圧倒的に速い遅い
言語GoRuby
セットアップ簡単Ruby環境が必要
テーマ数多い多い

🔸 Hugo vs Next.js（SSG/SSR）

項目HugoNext.js
学習コスト低い高い
サイト生成静的静的＋動的
拡張性中高

補足：Hugoは「高速でシンプルな静的サイト」、Next.jsは「動的も扱えるアプリケーション向け」という違いがあります。

🛠️ Hugoの基本構造を理解しよう

Hugo のプロジェクトは以下のような構造になります。

my-site/
├── content/        # 記事（Markdown）
├── layouts/        # テンプレート
├── static/         # 画像・CSS・JS
├── themes/         # テーマ
└── hugo.yaml       # 設定ファイル

ポイント：記事は content/ に Markdown で保存するだけ。
テーマは themes/ に置き、hugo.yaml で指定します。

✍️ Hugoのインストールと初期セットアップ

1. Hugo（Extended版）のインストール

# macOS（Homebrew）
brew install hugo

# Linux（Debian/Ubuntu）
sudo apt install hugo

注意：テーマによっては SCSS を使うため、Extended版が必要です。

2. 新規サイトを作成

hugo new site blog --format yaml   # YAML形式で設定ファイルを生成
cd blog

3. テーマを追加（例：PaperMod）

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

hugo.yaml にテーマを設定：

theme: ["PaperMod"]   # 使用するテーマを指定

4. 記事を作成

hugo new posts/hello-hugo.md

生成されたファイルを編集：

---
title: "Hello Hugo"
date: 2025-12-24T10:00:00+09:00
draft: false
---
Hugoで最初の記事を書きました！

5. ローカルでプレビュー

hugo server -D   # ドラフト記事も表示

ブラウザで http://localhost:1313/ を開いて確認できます。

🌐 Hugoで作ったサイトはどこに公開できる？

Hugoは静的ファイルなので、ほぼどこでも公開できます。

  • GitHub Pages（無料）
  • Netlify（無料枠あり）
  • Cloudflare Pages（無料）
  • Firebase Hosting
  • Vercel

補足：初心者には GitHub Pages + GitHub Actions が最も簡単でおすすめ。

🧭 Hugoが初心者に向いている理由

  • Markdownで書くだけなので学習コストが低い
  • 高速ビルドでストレスがない
  • テーマが豊富でデザインに困らない
  • GitHub Pagesと相性抜群で無料運用できる
  • セキュアで壊れにくい

「ブログを作りたいけど、WordPressは難しそう…」
そんな人にこそ Hugo はぴったりです。

🔍 よくある疑問Q&A

Q. プログラミング知識は必要？

→ 不要です。 Markdown と簡単な設定だけでOK。

Q. テーマは後から変更できる？

→ 可能です。 ただしレイアウトが変わるため調整が必要な場合があります。

Q. 画像やCSSはどう管理する？

→ static/ フォルダに置くだけで利用できます。

📚 参考リンク

🚀 拡張案（次のステップ）

  • PaperModテーマのカスタマイズ
  • GitHub Actionsで自動デプロイ
  • OGP画像の設定
  • 独自ドメインの設定
  • Google Analyticsの導入
  • カテゴリ・タグの整理とSEO最適化

初心者でも Hugo は必ず使いこなせます。
まずはローカルで動かしてみて、Markdownで記事を書く楽しさを体験してみましょう！