SSG

🧭 はじめに：この記事で理解できること Hugo は高速で柔軟な静的サイトジェネレーターですが、フォルダ構造が分かりにくいと感じる初心者は多いです。 この記事では、以下のことを丁寧に解説します。 Hugo プロジェクトのフォルダ構造の全体像 各ディレクトリの役割 PaperMod を使う場合の注意点 GitHub Pages で運用する際に理解しておくべきポイント 補足 Hugo のフォルダ構造は「必要なものだけ作ればよい」仕組みです。最初から全部覚える必要はありません。 🗂️ 全体構造：Hugo プロジェクトの基本フォルダ まずは、Hugo プロジェクトの典型的な構造を見てみましょう。 # Hugo プロジェクトの基本構造（例） . ├─ config/ または hugo.yaml # サイト設定 ├─ content/ # 記事（Markdown） ├─ layouts/ # テンプレート（上書き用） ├─ static/ # 静的ファイル（画像・HTMLなど） ├─ assets/ # SCSS/JS（Hugo Pipes） ├─ themes/ # PaperModなどテーマ ├─ archetypes/ # 記事テンプレート └─ public/ # ビルド後の出力（自動生成） 注意 public/ は Hugo がビルド時に自動生成するため、手動で編集しないようにしましょう。 📁 1. config/（または hugo.yaml）：サイト全体の設定 Hugo の設定は config ディレクトリまたは hugo.yaml に記述します。 PaperMod を使う場合、hugo.yaml で管理するのが一般的です。 ...

📘 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） 項目 Hugo WordPress サイト生成 静的 動的 セキュリティ 高い 低め 速度 爆速 遅くなりがち 管理画面 なし あり 運用コスト ほぼ無料 サーバー代が必要 注意：管理画面が欲しい人は WordPress の方が向いています。 ...