この記事では、HugoのWebサイトのディレクトリ構造を解説します。

ディレクトリ一覧

hugo new siteコマンドにより初期状態で作成されるディレクトリ一覧です。

  • archetypes
  • content
  • data
  • layouts
  • static
  • themes
  • config.toml

Hugoで使用されるすべてのディレクトリ一覧です。

  • archetypes
  • assets
  • config
  • content
  • data
  • layouts
  • public
  • resources
  • static
  • themes
  • config.toml

各ディレクトリの解説

archetypes

hugo newコマンドで新規コンテンツを作成するときに使用されるテンプレートを保存するディレクトリです。
テンプレートファイルは拡張子違いで複数保存できます。

assets

このディレクトリは初期状態では作成されません。

HugoがWebサイトを生成するときに使用するアセットファイルを保存するディレクトリです。
これは一例です。

  • SCSSをCSSへコンパイルするとき
  • TypeScriptをJavaScriptへコンパイルするとき
  • 画像ファイルを画像編集するとき

config

このディレクトリは初期状態で作成されません。

Hugoの設定ファイルを複数のファイルに分けたいときに使用するディレクトリです。

content

Webサイトのコンテンツを保存するディレクトリです。
ルートページ、セクションページ、シングルページのコンテンツを保存します。

data

HugoがWebサイトを生成するときに使用するサブの設定ファイルを保存するディレクトリです。

layouts

HugoがWebサイトを生成するときに使用するレイアウトファイルを保存するディレクトリです。
このディレクトリに保存されたファイルはテーマディレクトリをファイル単位で上書きします。

public

このディレクトリはデフォルトで作成されません。

Hugoが生成したWebサイトを保存するディレクトリです。
このディレクトリ内のファイルすべてが生成されたWebサイト一式になります。

resources

このディレクトリはデフォルトで作成されません。

HugoがWebサイトの生成を高速に行うためのキャッシュを保存します。

static

HugoがWebサイトを生成するときにルートディレクトリにそのまま展開するファイルを保存します。

themes

Webサイトを生成するときに使用するテーマを保存します。

config.toml

Hugoの設定ファイルです。
ファイルフォーマットはTOML、YAML、JSONをサポートしています。
設定内容が多いときは、代わりにconfigディレクトリを使用することもできます。