HUGOのディレクトリ構成

Blog

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が次のような構造のとき、blogproductの下に配置する記事ファイルで、別々のテンプレートを利用したいというケースです。

├── ...
├── 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