Hugoにおいて、記事を保管する content フォルダは、「フォルダの階層構造がそのままサイトのURL構造に直結する」 という非常に重要な役割を持っています。

  • 例: content/posts/my-post.md 👉 example.com/posts/my-post/

このようにフォルダで区切られたエリア（例：ブログエリア、お知らせエリアなど）を、Hugoでは 「セクション」 と呼びます。

そして、このコンテンツ管理において最も多くの人がつまずきやすいのが、「アンダーバーありの _index.md」と「アンダーバーなしの index.md」の違い です。
この2つのファイルの役割と使い分け（いわゆる Page Bundle の仕組み）を理解すれば、複雑な構造を持つWebサイトも自在に管理できるようになります！

2つの「index」の違い

結論から言うと、こうです！

  1. _index.md (アンダーバーあり)

    • 一覧ページ（セクション） 用の設定ファイル。
    • 例: 「記事一覧」「カテゴリー一覧」のタイトルや説明文を変えたい時に使う。

  2. index.md (アンダーバーなし)

    • 記事ページ（個別ページ） そのもの。
    • Page Bundle（ページバンドル）と呼ばれる仕組みで使う。

1. _index.md: 一覧ページの顔

フォルダ自体（セクション）に、情報を与えるためのファイルです。

使いどき

  • /posts/ (記事一覧) のタイトルを「My Blog Posts」に変えたい！
  • /categories/basic/ (カテゴリー一覧) のタイトルを「基本編」に変えたい！

配置例

content/
  posts/
    _index.md  <-- title: "記事一覧" と書く
    post-1.md
    post-2.md

カテゴリー名の日本語化 も、この _index.md の機能を使っています。

【応用】トップページも _index.md で管理できる？

はい、できます！
content/_index.md（フォルダの中ではなく、content の直下）を作ると、それが 「トップページの設定ファイル」 になります。

  • title: サイトのキャッチコピーなどを設定したり、
  • 本文: トップページにウェルカムメッセージを表示したりできます。

hugo.toml の設定よりも柔軟にトップページを作りたい時は、ぜひ試してみてください。

2. index.md: 記事と画像をセットに

「1つの記事」と「その記事で使う画像」を、1つのフォルダにまとめて管理したい時に使います。これを Leaf Bundle (リーフバンドル) と呼びます。

使いどき

  • 今までは static/images/ に画像を置いてたけど、記事が増えてごちゃごちゃしてきた…。
  • 「この記事専用の画像」を、記事ファイルと同じ場所に置きたい！

配置例

content/
  posts/
    my-trip/         <-- フォルダを作る
      index.md       <-- 記事本文 (ここがURL /posts/my-trip/ になる)
      photo.jpg      <-- 画像

こうすると、Markdown内で ![写真](photo.jpg) と書くだけで画像が表示できます。
（static フォルダに入れたり、長いパスを書かなくてOK！）

【上級編】画像の自動リサイズ・軽量化
画像を assets フォルダに置いて Hugo Pipes で処理すると、自動でリサイズや軽量化ができます。
詳しいやり方は 「【上級編】画像の自動リサイズ・軽量化 (Hugo Pipes)」 をご覧ください。

コンテンツ整理のポイント

  • フォルダの「表紙」を作りたいなら 👉 _index.md
  • 記事と画像を「セット」にしたいなら 👉 index.md

この2つを使いこなせれば、コンテンツ整理の達人です！✨

3. URLの形と uglyURLs

最後に、HugoのデフォルトのURL構造について触れておきます。

Pretty URLs（デフォルト）

Hugoは標準で、「記事ごとにフォルダを作って index.html を置く」 という挙動をします。

  • 記事ファイル: content/posts/my-post.md
  • 生成されるファイル: public/posts/my-post/index.html
  • アクセスするURL: example.com/posts/my-post/

これを Pretty URLs (きれいなURL) と呼びます。末尾が / で終わるのが特徴です。

Pretty URLs vs Ugly URLs: なぜ「醜い」の？

.html が付くのが「醜い (Ugly)」と呼ばれるのは、けして見た目だけの問題ではありません。
Webの世界では 「URLはなるべくシンプルで、技術に依存しない方が良い」 と言われているからです。

  • Pretty URLs: example.com/about/
    • 「このページは『アバウト』についてのページだ」と分かります。
    • 将来、HugoからWordPressに変えたり技術が変わっても、このURLはそのまま使えます。
  • Ugly URLs: example.com/about.html
    • 「このページは『HTMLファイル』で作られている」という技術的な内情が見えてしまっています。
    • もし将来、システムを変えて拡張子が .php や .jsp になったら？ URLも変えなければいけません（リンク切れのリスク！）。

「ユーザーには有用なコンテンツ（中身）を届けたいのであって、システム都合のファイル形式を届けたいわけではない」という思想から、拡張子を隠す Pretty URLs がモダンなWebの標準（きれいなURL）とされています。

2つのindexファイルを使いこなしてコンテンツを整理しよう

一見すると複雑に見える _index.md と index.md ですが、基本原則は非常にシンプルです。

  • 一覧ページ（セクション）の表紙（タイトルや設定）を作りたいなら 👉 _index.md
  • 1つの記事と関連画像などを「セット」にして管理したいなら 👉 index.md

この2つのルールの違いをしっかりと押さえておくことで、Hugoでのファイル管理やサイト構成の構築が格段にスムーズになります！✨