Hugoのフォルダ構成

written: kengo
tag:

1. Hugoのフォルダのしくみ

Hugoは決まったフォルダにリソースを入れることで動作します。 利用環境はHugo0.14です。

1-1. フォルダの基本構成

初期の基本構成を以下に示します。

1-2. 各ファイル/フォルダのしくみ

config.toml (config.yaml)

TOML形式(あるいはYAML)でサイト全体の設定情報を記述します。 サイトのBaseURL、タイトルなどサイト全体を通して使う情報を入力します。

MetadataFormat = "toml"
BaseURL = "http://wdkk.co.jp"
LanguageCode = "jp"
Title = "Watanabe-DENKI Inc."

[Params]
site_name_jp = "渡辺電気株式会社"
author = "Kengo Watanabe"
description = "Welcome to Watanabe-DENKI Inc web."

いくつか定義必須の要素がありますので、注意してください(BaseURLなど)

contentフォルダ

サイトの具体的な記事をmarkdownで記述し格納します。.mdファイルを入れる場所と覚えておいてください。

archetypesフォルダ

記事を作成する際に基本となるmarkdownのファイルを置いておきます。 コマンドで、

hugo new 記事のファイルパス/記事タイトル.md

上記を入力すると記事の.mdファイルがcontentフォルダ内に生成されます。 このときdefault.mdにTOML(YAML) Front Matterを記述しておくと、 生成された記事にあらかじめ基本となる情報が入力された状態になります。

layoutsフォルダ

layoutsはHTMLのレイアウトを用意します。layouts内の_defaultフォルダに single.htmlというファイルを用意すると、基本のレイアウトデザインとなります。 ビルド時にcontentフォルダ内の.mdの中身を、layoutsに挿入していきHTMLを完成させます。

layouts > partialsフォルダ

partialsは、簡単にいってしまえば部品化されたHTMLです。layouts内のHTML内に埋め込みが可能です。

staticフォルダ

staticは加工せずそのままサイトに使う素材です。 ビルド時にpublicフォルダ内に直接コピーされます。

themesフォルダとtheme.toml

複数のレイアウトテーマを格納する場所です。hugoのビルド時に指定するテーマはこのフォルダ内に入れておく必要があります。テーマ名はtheme.tomlに記述します。

その他のフォルダ

上記までがHugoサイトの基本構成になりますが、このほかにdataフォルダ、layouts内のindexesフォルダ、shortcodesフォルダなどが特別なフォルダとなっており、必要に応じて用意して使うことができます。

1-3. テーマの使用/不使用

レイアウトにテーマを指定する場合は、hugoのビルド時に-tでテーマ名を指定します。

hugo -t テーマ名

この場合、themes以下にある指定したテーマがレイアウトに適用されます。テーマのレイアウトを使うと上記で示したlayoutsとstaticのフォルダは無視されます。 よって、上記で述べたlayoutsとstaticは下記コマンドのように「-t テーマ名」を指定しない時に用いるレイアウト情報になります。

hugo

References