HUGOのディレクトリ構成とそれぞれの役割を確認する

HUGOのディレクトリ構成

まずはHUGOのディレクトリ構成を見ていきましょう。

HUGOコマンドでサイトを作成すると、

hugo new site test-site

下記のような構成になっているはずです。

├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

それぞれのディレクトリ・ファイルの役割を見ていきます。

メインとなるディレクトリ

content

記事などのページの文章を格納するディレクトリです。

このcontent ディレクトリ内に、新たにディレクトリを設置すると、HUGOでは「セクション」として扱われます。セクションは、WordPressでいうところのカテゴリのような役割を持つもので、ディレクトリを階層式にすることで、URLを複数の階層式にすることができます。

content
└── blog        //<= example.com/blog/
    ├── funny-cats
  //<= example.com/blog/funny-cats/はエラーになる
    │   ├── mypost.md
  //<= example.com/blog/funny-cats/mypost/
    │   └── kittens    //<= example.com/blog/funny-cats/kittens/
    │       └── _index.md
    └── tech        //<= example.com/blog/tech/
        └── _index.md

セクションの一覧ページ（section page）を作成するには、セクションディレクトリ内に「_index.md」を設置します。

このcontentディレクトリとlayoutディレクトリ（またはthemeディレクトリ）の組み合わせで、HUGOで作成したサイトのURL構成が決まります。

layouts

レイアウトデータを格納します。このlayoutディレクトリと、contentディレクトリがHUGOの核となる部分です。

上記のcontentの中身は、このlayoutにあるテンプレートにのっとって静的ファイルに変換されます。

ここは、ボリュームがあるので、別の記事で詳しく説明することにします。

static

静的ファイルの置き場です。CSSファイルや、サイト全体で使う画像などを置きます。

ここに設置したファイル・ディレクトリは、そのままの状態で公開時に「example.com/」以下に設置されます。

サイトの設定や補助するためのディレクトリ・ファイル

archetypes

ディレクトリ ここには、hugo newコマンドで新規ページを作成する際の、フロントマッターの雛形が置かれます。

初期状態では「default.md」というファイルが置かれていて、下記のような中身になっているはずです。

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

ここをカスタマイズすることで、hugo newで作成した際に自動で生成されるフロントマッターをオリジナルのものにすることができます。

Archetypes | HUGO

config.toml

ファイル名の通り、設定ファイルになります。デフォルトではtomlフォーマットになっていますが、yamlなどにしても読み込んでくれます。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

デフォルトでは最低限のものしか書かれていませんが、Google AnalyticsのUIやメニューなど、サイト全般で扱う設定は、プロジェクトルートにあるこのconfigファイルに記述することで、下記の変数ですべてのテンプレートから呼び出せます。

.Site

toml形式を保っていれば、配列を持つこともできます。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

[params]
    siteDescription = "コードを探す、共有する。「codit」"
[permalinks]
    codes = "/codes/:slug"

ルートキーはすでにHUGO側で予約されているので、自分で新たに設定項目を使いたい場合は、「params」の中に追加していく形になります。

paramsで変数を受け取る場合は、テンプレート側では下記のように書きます。

{{ .Site.Params.siteDescription }}  // <= コードを探す、共有する。「codit」

Configure Hugo | HUGO

一方、configはセクションや言語ごとに設定をすることもできるので、細かい設定をしたい場合は、プロジェクトルートにconfigディレクトリを用意して、そちらにconfigファイルを置きます。

config
├── _default
│   ├── config.toml
│   ├── languages.toml
│   ├── menus.en.toml
│   ├── menus.zh.toml
│   └── params.toml
├── staging
│   ├── config.toml
│   └── params.toml
└── production
    ├── config.toml
    └── params.toml

data

サイトで使うデータ全般を格納するディレクトリです。

json形式でデータを入れておくと、

{{ .Site.Data}}

変数で、テンプレートからデータを引き出すことができます。

themes

テーマを格納するディレクトリです。多くのケースでは、このディレクトリ内にテーマをgit cloneで格納して、config.tomlで使うテーマを指定します。

theme = 'テーマ名'

自作デザインをする場合も、先程のlayoutでなくてこのthemeディレクトリに展開する形式でも構いません。

簡単にですが、HUGOのディレクトリ構造を見てきました。

それぞれの役割や動きを知ることで、自分でテンプレート・テーマを作る際に助けになるかと思います。