【完全版】Hugoのフォルダ構造を完全理解するガイド|初心者が迷わない実践的な解説

🧭 はじめに:この記事で理解できること 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 で管理するのが一般的です。 ...