Hugo のコンテンツ管理

コンテンツの構成 #

section（セクション） #

Hugo のコンテンツをグループ化する「カテゴリーのようなもの」

Hugo では、content/ フォルダの 第一階層のフォルダ を「セクション（section）」と呼びます。

例: セクションの例

content/
├── blog/        ← これが "blog" セクション
│   ├── first-post.md
│   ├── second-post.md
├── news/        ← これが "news" セクション
│   ├── announcement.md
│   ├── update.md

各セクションには、リストページ (_index.md) を作ることができます。
例えば content/blog/_index.md を作ると、 /blog/ にリストページができます。

slug（スラッグ） #

記事ごとのURLの末尾を変更するオプション

通常、Hugo は .md ファイルの名前を URL に使いますが、slug を指定すると URLの末尾だけ変更 できます。

例: slug を使わない場合

content/blog/my-first-post.md

➡ /blog/my-first-post/ というURLになる。

例: slug を指定した場合

---
title: "最初の記事"
slug: "first"
---

➡ /blog/first/ というURLになる。（ファイル名 my-first-post.md とは関係なくなる）

path（パス） #

ファイルシステム上の場所を指すもの（サイトの URL とは直接関係しない）

「パス」は Hugo 内部のファイルの場所を指します。

例:

content/blog/my-first-post.md

このファイルの パス（path） は:

content/blog/my-first-post.md

ですが、Hugo が生成する URL は:

/blog/my-first-post/

となります。

「パス」は物理的なファイルの場所で、「URL」はウェブ上のアドレスという違いがあります。

url（URL） #

Hugo が生成する「ウェブ上のアクセスパス」

通常は content/ のフォルダ構成から自動的にURLが決まりますが、
url を指定すると完全にカスタムURLを設定できます。

例: url を指定する

---
title: "カスタムURLの記事"
url: "/custom-path/"
---

➡ このページのURLは /custom-path/ になる。（/blog/ を無視）

slug は末尾だけ変えるもの、url は完全にURLを決めるものという違いがあります。

ページバンドル #

1つのページとその関連リソース（画像、ファイル、データなど）を1つのフォルダ内にまとめる仕組み

Leaf Bundle #

1つのページに関連するリソースを含むフォルダ

index.mdを使うと leaf bundle になる。

例:

content/blog/my-post/
├── index.md       ← ページの本文（必須）
├── image.jpg      ← 関連画像
├── data.json      ← 関連データ

Branch Bundle #

リストページと複数ページを含むフォルダ

_index.mdを使うと branch bundle になる。

例:

content/blog/
├── _index.md        ← リストページ（一覧ページ）
├── first-post/
│   ├── index.md
│   ├── first-image.jpg
├── second-post/
│   ├── index.md
│   ├── second-image.jpg

フロントマター #

Markdown ファイルの最上部に記述するメタデータ

---
title: "Hugo の基本"
date: 2024-02-14
author: "John Doe"
tags: ["hugo", "静的サイト"]
categories: ["Tech"]
draft: true
---

よく使う Front Matter のキー

キー	説明	例
title	記事のタイトル	`title: "Hugo の基本"`
date	公開日	`date: 2024-02-14`
author	著者名	`author: "John Doe"`
draft	下書き（true にすると未公開）	`draft: true`
tags	タグ（複数設定可能）	`tags: ["hugo", "静的サイト"]`
categories	カテゴリー	`categories: ["Tech"]`
slug	URL の末尾を変更	`slug: "hugo-basics"` → `/hugo-basics/`
url	完全な URL を設定	`url: "/special-page/"`
summary	記事の概要	`summary: "Hugo の概要を説明"`

カスタム変数を作ることもできる。

---
title: "カスタム変数の例"
author: "John Doe"
custom_variable: "これはカスタム変数です"
---

テンプレートで表示することもできる。

<p>{{ .Params.custom_variable }}</p>

ビルドオプション #

コンテンツの公開・非公開の制御やビルドの挙動を変更する設定

オプション	説明	ビルドオプション
`draft`	`true` にすると下書き	`hugo server -D` で表示
`publishDate`	指定日より前は非公開	`hugo server --buildFuture` で表示
`expiryDate`	指定日を過ぎると非公開	`hugo server --buildExpired` で表示
`buildDraft`	`false` なら `-D` でも非表示	`hugo server -D` でも見えない
`headless`	URL でアクセス不可、データとして利用	`.Site.GetPage` で取得
`outputs`	出力フォーマットを変更	`outputs: ["html", "json"]`
`layout`	適用するテンプレートを変更	`layout: "custom-single"`

アーキタイプ #

新しいコンテンツを作成するためのテンプレートファイル

hugo new posts/my-first-post.md

➡ archetypes/posts.md の内容が content/posts/my-first-post.md に適用される。

メニュー #

サイトのナビゲーションメニューを設定する

hugo.toml にメニューを設定するか、Front Matter に menu キーを追加する。

[[menu.main]]
name = "Home"
url = "/"
weight = 1

[[menu.main]]
name = "About"
url = "/about/"
weight = 2

---
title: "About"
menu:
    main:
        name: "About"
        weight: 2
---