HUGO のディレクトリ構成

HUGO プロジェクトのディレクトリは、次のような構成になっています。 この記事では、HUGO プロジェクトのディレクトリの役割について説明します。

$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

公式ドキュメントは、Directory Structureを参照してください。

archetypes

hugo new コマンドでコンテンツファイルを作ったときの Markdown のフォーマットです。 デフォルトでは、次の内容で作られます。

++++
title: ファイル名と同じ
date: new コマンドを実行した日時
draft: true
++++

たとえば、タグをつける書式をデフォルトで設定したい場合は、次のように archetypes/default.md に追記します。

++++
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: [""] # 追記部分
++++

セクション名（content 次のディレクトリ名）ごとに、テンプレートを複数作ることもできます。

たとえば、content が次のような構造のとき、blog と product の下に配置する記事ファイルで、別々のテンプレートを利用したいというケースです。

├── ...
├── content
│   ├── news
│   │   └── 20191004_news.md
│   └── product
│       └── service_a.md
├── ...

この場合、archetypes の下に、セクション名を名前にもつファイル（例：archetypes\news.md）を用意します。

├── ...
├── archetypes
│   ├── news.md
│   └── product.md
├── ...

hugo new news/20191005_news として記事を作ると、その記事ファイルにはnews.md テンプレートが適用されます。

assets

hugo new site したときには生成されません。 Hugo Pipes で処理するファイルを保存するためのディレクトリです。

たとえば scss ファイルを css ファイルにビルドしたい場合、ビルド対象の .scss ファイルをこのディレクトリに置きます。

config.toml

HUGO の設定ファイルです。 TOML・YAML・JSON 形式で指定でき、デフォルトでは TOML 形式です。

config

hugo new site したときには生成されません。 HUGO の設定ファイルが複数必要な場合、この config ディレクトリに設定ファイルを置きます。

content

記事ファイルを置くディレクトリです。 content の下にサブディレクトリを作り、ブログのセクションを分けることができます。

├── ...
├── content
│   │   ├── news
│   │   └── 20191004_news.md
│   ├── product
│   └── blog
├── ...

data

サイトの全ページから参照したいデータを記述したファイルを置くディレクトリです。 HUGO では、設定ファイル（config.toml）の [Params]に書くと、{{ .Site.Params.variable }} で参照できます。

しかし、データベースとしてサイトから参照したい情報を設定ファイルに保持すると、設定ファイルが煩雑化します。

そこで、data の下に TOML・YAML・JSON 形式のファイルを配置することで、Data Template として扱うことができます。 呼び出しは {{ .Site.Data.ファイル名 }} と記述します。

たとえば、次のような JSON ファイルを./data/hitsong2019.json に置いたとします。

{
  "hits": [
    {
      "Title": "Lemon",
      "Artist": "米津玄師"
    },
    {
      "Title": "Flamingo",
      "Artist": "米津玄師"
    },
    {
      "Title": "マリーゴールド",
      "Artist": "あいみょん"
    }
  ]
}

テンプレートでは次のように書くと、ファイルの内容を参照できます。

<ul>
  {{ range  .Site.Data.hitsong2019.hits }}
    <li>{{ .Title }} - {{ .Artist }} </li>
  {{ end }}
</ul>

layouts

themes においたテーマファイルを一部修正したいときやレイアウトパーツを追加したいときに使います。 修正したいテンプレートファイルと同じ構成・ファイル名で layouts の下に配置すると、そのレイアウトファイルだけ独自に変更できます。

たとえば、記事ページ（single.html）のレイアウトを変更したい場合は、次のように行います。

まず、テーマでは、テーマ/layouts/_default/single.html という構成でファイルが配置されています。 プロジェクト直下でも同じように ./layouts/_default/single.html に配置することで、記事ページのレイアウトを上書きできます。

├── ...
├── layouts
│   └── _default
│       └── single.html # 上書きするレイアウトファイル
├── static
└── themes
    └── theme-a
        ├── ...
        ├── layouts
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html # 上書きしたいレイアウトファイル
        │   ├── partials
        │   ├── 404.html
        │   └── index.html
        ├── ...

static

サイト内の静的ファイル（スタイルシート、JavaScript や画像ファイルなど）を配置するディレクトリです。 記事に画像を貼る場合も、このディレクトリの下に配置します。

static ディレクトリに配置したディレクトリ・ファイルは、サーバーを立ち上げたときのルートディレクトリ（hugo コマンドでビルドしたときの publicディレクトリ）に同じ構成で配置されます。

たとえば、次のような構成で static ディレクトリに配置するとします。

├── ...
├── static
│   ├─── img
│   │   └── image.png
│   └── me.png
├── ...

static 次のファイルは、それぞれ次のようにアクセスできます。

• https://{your-site-url}/img/image.png
• https://{your-site-url}/me.png