ページバンドルを理解する

Hugoのページバンドル機能で、コンテンツと関連ファイルを効率的に管理する方法を解説します。

ページバンドルとは

コンテンツと関連ファイル（画像、PDF等）をまとめて管理する仕組みです。

2種類のページバンドル

1. リーフバンドル（Leaf Bundle）

単一の記事とその関連ファイルをまとめる形式です。

content/posts/
  my-article/          ← フォルダ名がURLになる
    index.md           ← 必ず index.md（重要！）
    hero.jpg           ← この記事専用の画像
    document.pdf       ← この記事専用のファイル

• URL: /posts/my-article/
• 特徴: index.md を使う（アンダースコアなし）
• 用途: 画像を多く含む記事、添付ファイルがある記事
• 子ページ: 持てない

2. ブランチバンドル（Branch Bundle）

**セクション（カテゴリページ等）**を定義する形式です。

content/tutorials/
  _index.md            ← アンダースコア付き（重要！）
  getting-started.md   ← 子ページ
  installation.md      ← 子ページ

• 特徴: _index.md を使う（アンダースコア付き）
• 用途: セクションページ、一覧ページのカスタマイズ
• 子ページ: 持てる

比較表

従来形式との比較

【従来形式】
content/posts/
  my-article.md        ← 単独ファイル
  another-post.md

【ページバンドル形式】
content/posts/
  my-article/
    index.md           ← フォルダにまとめる
    image.jpg

ページバンドルのメリット

1. 整理しやすい - 記事と画像が同じフォルダ
2. 移動が簡単 - フォルダごと移動できる
3. 画像処理が使える - .Resources でアクセス可能
4. 名前衝突を回避 - 記事ごとに同じファイル名が使える

リソースへのアクセス（テンプレート内）

{{/* 特定の画像を取得 */}}
{{ $image := .Resources.GetMatch "hero.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" alt="Hero">
{{ end }}

{{/* すべての画像を取得 */}}
{{ range .Resources.ByType "image" }}
  <img src="{{ .RelPermalink }}">
{{ end }}

{{/* パターンマッチで取得 */}}
{{ $photos := .Resources.Match "photos/*" }}

いつどちらを使う？

まとめ

• リーフバンドル = index.md = 単一記事 + 関連ファイル
• ブランチバンドル = _index.md = セクション + 子ページ
• アンダースコアの有無で動作が変わる！

• ページバンドル
• Hugo
• 構造