HUGOのディレクトリ構成

Posts Published: 2019年10月4日

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