hugo new site コマンドを実行したばかりの時、一気にたくさんのフォルダが作成されて「どれをどのように使えばいいのだろう？」と戸惑ってしまう方は多いはずです。
この記事では、Hugoプロジェクトにおける各フォルダ（content / layouts / static など）がどのようなデータを格納する役割を持っているのか、そしてテーマファイルを安全に扱うための仕組みについて整理して解説します。
1. 📂 content/
記事のMarkdownファイル を置く場所です。
- 全てのコンテンツはここに入れます。
content/posts/のようにフォルダを分けると、URLも/posts/...のようになります。- イメージ: 原稿の保管庫📄
- もっと詳しく:
2. 📂 layouts/
テンプレート（HTML） を置く場所です。
「あれ？ themes/ の中にも layouts/ があるけど、何が違うの？」と思いましたか？
ここがHugoの 超重要ポイント です！
themes/my-tutorial-theme/layouts/: テーマの「本来の」デザインが入っています。- (ルートの)
layouts/: テーマのデザインを 「上書き（カスタマイズ）」 するための場所です。
🎨 カスタマイズの基本：上書き（Override）
Hugoは、ページを作るときに 「ルートの layouts/ にファイルがあるか？」 を真っ先に確認します。
- もしルートの
layouts/にファイルがあれば、それを使います（上書き）。 - なければ、
themes/.../layouts/にあるファイルを使います（デフォルト）。
つまり、 「テーマのファイルは直接いじらず、変えたいファイルだけをルートの layouts/ にコピーして編集する」 のが、Hugo流の賢いカスタマイズ方法なんです。
こうすれば、テーマ自体はきれいな状態のまま、自分好みの変更だけを管理できます。
- 詳しくは 【Tips】テーマのファイル構成と役割 を見てください。
- イメージ: ページのデザイン型抜き🏭（兼 カスタマイズ作業台🛠️）
3. 📂 static/
画像やCSSなどの「静的ファイル」 を置く場所です。
- ここに置いたファイルは、Hugoは何もしません。そのまま公開サイトのトップにコピーされます。
- 例えば
static/images/logo.pngに置くと、公開時はhttp://.../images/logo.pngとしてアクセスできます。 - イメージ: 配布資料置き場📦
4. 📂 themes/
テーマ を入れる場所です。
- Step 2 でダウンロード（または作成）したテーマファイルがここに入ります。
- サイトのデザイン（着せ替え）データ一式です。
- イメージ: 衣装部屋👗
5. 📂 data/
記事以外の「データ」 を置く場所です。
- TOML, YAML, JSON などの形式でデータを保存できます。
- 例えば「メンバー紹介」や「商品リスト」など、記事にするほどではないけど管理したいデータに使います。
- ここに
members.tomlを置くと、テンプレートから{{ .Site.Data.members }}で簡単に呼び出せます。 - イメージ: データベース、書類棚🗄️
- もっと詳しく: 記事からデータを分離しよう！ (dataフォルダの活用)
6. 📂 i18n/
翻訳ファイル を置く場所です（i18n = internationalization の略）。
- サイトを多言語化（英語・日本語対応など）する時に使います。
- また、「Read More」を「続きを読む」に変えるような、 テーマ内の定型文の翻訳 もここで管理します。
en.toml,ja.tomlのようなファイルを作り、{{ T "key" }}という関数で呼び出します。- イメージ: 翻訳辞書📖
- もっと詳しく: 世界へ発信！サイトの多言語化 (i18n)
7. 📂 hugo.toml
サイト全体の設定ファイル です。
- サイトのタイトルやURL、使うテーマなどをここで決めます。
- 昔は
config.tomlという名前でした（古い記事を見る時は注意！）。 - 詳しくは 【Tips】サイトの設定ファイル hugo.toml を理解しよう で解説します。
- イメージ: 司令塔の指示書📜
その他のフォルダ
📂 archetypes/
「新しい記事の雛形」 です。
hugo new contentコマンドを使った時、ここにあるファイル（default.md）がコピーされて記事が作られます。- 最初にタイトルや日付が自動で入るのは、これのおかげです。
📂 public/
「完成したWebサイト」 が出力される場所です。
hugoコマンドを実行（ビルド）すると、このフォルダが生成されます。- 本番サーバーにアップロードするのは、このフォルダの中身だけです！
- 注意: この中身は手動で編集しません（ビルドするたびに作り直されるので消えちゃいます）。
フォルダごとの役割を把握してスムーズに開発を進めよう
非常に多く見えるHugoのフォルダ群ですが、基本的には「記事は content/」「デザインのカスタマイズはルートの layouts/」「画像は static/」という3つの大原則さえ押さえれば、どこにファイルを置くべきかで迷うことはなくなります。
各ディレクトリの目的を理解して、安全で効率的にサイト作りの作業を進めていきましょう！🧭
