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