次に、Hugoのディレクトリ構成について書いていきます。
その前に、まずHugoでサイトを作っておきましょう。

Hugoでサイトを作る

サイトを作るのは簡単です。以下のようにしましょう。bookshelf以外でも大丈夫です。

hugo new site bookshelf

次に、bookshelfに移動し、treeコマンドを打って確認してみます。(treeコマンドがない場合はhomebrewなどを使ってインストールしてください)

cd bookshelf
tree -a

すると、次のようなリストになると思います。

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

ディレクトリ構成とその説明

とりあえず、押さえておくべきディレクトリとファイルを説明します。

archetypes

ファイルのヘッダー部分のテンプレートになるものです。今はまだわからなくてもよいです。

config.toml

Hugoの設定ファイルです。toml形式で記述します。

content

ウェブサイトのコンテンツが保存されていくディレクトリです。サブディレクトリを作ると、それがsectionとして認識されます。sectionの説明はまた違うところで行います。

data

私はまだ使ったことがないのですが、ここにyaml,jsonなどのデータ形式でデータを置くらしいです。使わなくてもHugoは使えますから、必要になったら調べましょう。

layouts

レイアウトファイルの置き場です。共通レイアウトなどをここで定義します。taxonomy(カテゴリやタグ)、セクションごとにレイアウトを切り替える方法などがあります。また別のところで説明します。

static

画像、CSS、JavaScriptなどのファイルを置く場所です。

これに、あと1つ、テーマ用のディレクトリが加わります。

テーマとは？

テーマは、ブログシステムによくある、テーマテンプレートのことです。他の人が作ったデザインテーマを利用することができます。 オリジナルのデザインを使いたい場合はテーマを利用しません。 既存のもので十分だという場合は、テーマを使いましょう。 別にテーマテンプレートを使わずに、layouts以下に定義していっても構いません。 自分用のテーマを作っておいて、それを使うと、テーマに慣れることができるかと思います。 私はテーマから作成していってみたので、まずはテーマを作ってみましょう。

テーマを作成する

テーマは、以下のコマンドで作ります。

hugo new theme [name]

今回は、適当に、テーマをhappyにしてみました。 できあがったディレクトリを見てみましょう。

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── happy
        ├── LICENSE.md
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── footer.html
        │       └── header.html
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml

themesディレクトリの下に、happyというディレクトリができていて、その下にsiteを作った時と同じようなファイル群が出来上がっています。

実は、テーマの構成はほぼサイト直下のファイル群との構成に似ています。 相違点は、

• contentがない
• theme.tomlがある(テーマを公開する場合に使う)
• LISENSE.mdがある(テーマを公開する場合に使う)

という辺りです。

archetypes,layouts,staticは前に説明したものと同様なので省略します。 次は、テーマの中のlayoutsディレクトリの中を説明していきます。

layoutsディレクトリ以下について

深く見ていくために、layoutsディレクトリの中身だけ見てみましょう。

themes/happy/layouts/
├── 404.html
├── _default
│   ├── list.html
│   └── single.html
├── index.html
└── partials
    ├── footer.html
    └── header.html

index.html

ドキュメントルートで使われるテンプレート

partials

部分テンプレートを置く場所。
部分テンプレートとは、ヘッダー、フッター、サイドバーなど、他のテンプレートでも利用するパーツを切り出したもの。 header.htmlやfooter.htmlはそれぞれのパーツ部分のhtmlを書き、index.htmlなどのテンプレートファイルではそれらを読み込むようにします。

_default

１つの記事や、taxonomyを使ったカテゴリーやタグの記事一覧を表示する際に適用されるデフォルトのテンプレート。 それぞれ、カテゴリーやタグ専用のテンプレートを作ることができるが、それがない場合に使われます。

single.html

1つの記事を表示するためのテンプレート。

list.html

複数の記事を表示するためのテンプレート。ページング処理などもここで行う。

テーマを作っただけだと、ファイルはありますが、中身は空の状態です。次回は、ドキュメントルート用のindex.htmlを定義していきます。