Hugoのディレクトリ構造を理解する

Posted by ちょいハック on Sunday, February 14, 2021

目次

Hugoで生成される構造

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

参照: Directory Structure

config.toml

Hugoの設定を記述します。

環境毎に設定を変更したい場合は、configディレクトリが有効です。(configディレクトリはデフォルトでは作成されない)
configディレクトリを使用することで、環境ごとの追加設定を定義することもできます。

archetypes

新しいコンテンツを追加する際のテンプレートを定義できます。
参照: Archetypes

content

記事を入れるディレクトリです。
このディレクトリ構造はそのまま記事のURLになります。
それぞれのディレクトリは、セクションとして扱われます。

例えば、 blog , articles , tutorials のように、記事をセクション分けしたい場合は、
content/blog , content/articles , content/tutorials のようにディレクトリを作るだけです。

data

設定ファイルを使用したい場合に、このディレクトリを使用できます。
YAML, JSON, TOMLなどのフォーマットで定義できます。

サンプルはここにあります。

layouts

画像、CSS、JavaScriptなどのような、静的コンテンツ(動的に変わらないコンテンツ)を配置します。
サイトをビルドすると、staticディレクトリのコンテンツはそのままビルド結果にコピーされます。

resources

このディレクトリはデフォルトでは作成されません。
キャッシュなどのスピードアップのためなどに使用されるディレクトリです。