Hugoコンテンツ管理

こんにちはnasustです。 Hugoのコンテンツ管理、つまり記事の管理方法について解説します。

記事とウェブサイトの構造について

Hugoの記事は、contentディレクトリ以下にMarkdownの文章を置く事で出来ます。 content以下のディレクトリの構造はデフォルトでは、そのままURLに対応します。

ディレクトリ構造の例

content
└── about
    │   └── index.md       // <- https://example.com/about/
    ├── posts
    │   ├── firstpost.md   // <- https://example.com/posts/firstpost/
    │   ├── happy
    │   │   └── index.md  // <- https://example.com/posts/happy/
    │   └── secondpost.md  // <- https://example.com/posts/secondpost/
    └── quote
        ├── first.md        // <- https://example.com/quote/first/
        └── second.md       // <- https://example.com/quote/second/
bash

記事のURLの末尾が記事のディレクトリ名またはファイル名になるパターンがあります。

URLの末尾がディレクトリ名の場合

content/about/index.mdのようにディレクトリ/index.mdの構造でMarkdownを置いた場合です。 この場合、ディレクトリ名がURLの末尾になります。記事自体はindex.mdとなります。

URLの末尾がファイル名の場合

content/posts/firstpost.mdのようにindex.md以外のファイル名になります。

コンテンツ管理機能とディレクトリ構造の関係について

例のようにディレクトリ構造と記事のURLは完全には対になっておりません。 それについて、Hugoのコンテンツ管理の機能と構造がどのように扱われるか解説します。

セクション

https://example.com/posts/のようにpostsディレクトリの事をHugoではセクションと読んでいます。 このセクションは記事の格納する場所として扱っています。posts/firstpost.mdposts/happyは、postsセクションの記事という扱いになります。

またセクションの下にセクションを設置できるので自由な構造で構築することが出来ます。

なお、記事のURLのパターンは設定で変更することが出来ます。

記事のURLのパターン変更の例

設定を変更することでウェブサービスのブログのように記事の日付のURLにすることが出来ます。

https://example.com/posts/2019/12/28/firstpost

Page Bundles

content/about/index.mdのようにaboutディレクトリがURLの末尾なる場合は HugoではPage Bundlesという機能になります。

Page Bundlesとは記事と同じディレクトリに、この場所だけ使用する画像などを置く場合に便利な機能です。 また画像などのファイルの事をPage Resourcesと読んでいます。

セクションのindex.htmlの設置方法

セクション以下に_index.mdを設置します。これがindex.htmlになります。

トップページの場合は、content/_index.md、postsディレクトリの場合はcontent/posts/index.mdとなります。

prevnext