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