MASTERS
Hugoフォルダの構成
ここでは、Hugo のフォルダの構成について簡単に見ていきます。
なお、ここでかいている内容は、Hugo のバージョンによって違うこともあるので注意してください。
Hugoが作り出すフォルダの構成
Hugoの基本的な使い方で見たように、Hugoで新規サイトを作成する場合は、 hugo new site SiteName をコマンドプロンプトで実行します。そうすると、次のようなフォルダやファイルが出来上がります。
root
├── archetypes
├── content
├── data
├── layouts
├── public
├── resources
├── static
├── themes
└── config.toml
public フォルダは、はじめはありませんが、それ以外ははじめから存在するフォルダです。今まで触れてこなかったフォルダもあるので、各フォルダの役割を簡単に説明していきたいと思います。
archetypesフォルダの役割
archetypes フォルダは、記事のひな型を置いておくフォルダです。デフォルトでは、 default.md というファイルがあります。この中身をみると、次のように書いてあります。
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
Hugo で記事を書いていると、これを見てピンと来る人もいると思います。これは、
> hugo new posts/my-first-post.md
を実行したときに使われる、記事の雛形です。特に何も指定しなければ、この default.md をテンプレートとして、新記事用のマークダウンファイルが作られます。
title は、ファイル名の空白をハイフンに変えたものにする、と設定されています。 date は、ファイルの作成時、つまり、 hugo new を実行した時刻にする、という設定になっています。 draft には true が設定されています。
なので、仮に、 draft の行を消して上書き保存すれば、今後は draft の設定がない状態で、マークダウンファイルが作られることになります。
実は、 hugo new posts/my-first-post.md を実行したときに、背後では、 archetypes フォルダの posts.md を探しにいっています。これがない場合は、 default.md が使われます。なので、初期設定では、 default.md が使われることになります。 posts フォルダに追加する記事の雛形を変えたい場合は、 posts.md を作成・変更することになります。
contentフォルダの役割
content フォルダは、記事用のマークダウンファイルを置いていくフォルダです。
新規の記事は
> hugo new posts/my-first-post.md
などと実行して作成しますが、こうすると、 content/posts/my-first-post.md が作成されます。
content フォルダの直下にあるフォルダ名は、 セクション ともいいます。Hugo では、ただのフォルダ名ではなく、特別な意味のあるものと認識されます。例えば、 hugo new を実行したときには、先ほど出てきた archetypes フォルダの セクション名.md が雛形として使われます。また、テーマを作成・修正するときにも、セクションを使う場面が出てきます。
dataフォルダの役割
data フォルダは、サイト内で使うデータを、データベースのように格納しておくためのフォルダです。
例えば、用語集のページを作りたいとしましょう。そのときに、用語とその解説を、 html タグを使いながら書くのは面倒です。しかし、用語と解説のデータを json ファイルなどに格納しておき、それを表示するためのテンプレートを作成しておくと扱いやすくなります。データと表示方法を分けておくことで、修正や追加が行うのが楽になります。
data フォルダの下におけるファイルは、 YAML, JSON, TOML ファイルに限られます。 MySQL や SQLite などが使えるわけではないため、大容量のデータを使って何かを処理するのには向いていません。それでも、上で書いたような用語集や、紹介したい本や映画のデータなどをまとめておくには便利です。
ただ、はじめの頃は使うケースが少なく、普通のブログを作成するのであれば全く使う必要性がないかもしれません。また、独自にテンプレートを作成する必要があるので、使いたいと思っても、少しハードルは高いでしょう。
layoutsフォルダの役割
layouts フォルダは、サイトのレイアウトの設定ファイルを置いておくフォルダです。
はじめの頃は、サイトのレイアウトは、公式テーマの一覧から探してそれを使うことになります。しかし、サイトを作っていくと、少しレイアウトを変えたくなることもあるでしょう。また、一から作りたくなることもあるかもしれません。
そのような場合に使うのが layouts フォルダです。
このフォルダは、 themes の下にある各テーマのフォルダにも含まれています。 layouts フォルダの下には、 index.html や _default/baseof.html などがあると思います。
サイトには、いろいろなタイプのページが含まれています。個別の記事以外にも、記事のアーカイブやトップページ、タグの一覧ページなどがあります。それらのページごとに、レイアウトの雛形が用意されています。
また、中身を見てもわかりますが、ページの中で、どの情報をどのように載せるかを設定しています。プログラミングの領域に入っていくため、ハードルは高くなります。
テーマの下にある layouts フォルダ内のファイルのようなものをいきなり作るのは難しいですが、一部を修正するくらいならまだできるかもしれません。修正する場合は、テーマの下にあるファイルをそのまま変更するのではなく、直下にある layouts フォルダに対応するファイルをコピーし、修正するといいでしょう。テーマの下にある layouts フォルダよりも、直下の設定が優先されるからです。この方法については、今後見ていくことにします。
レベルが上がってくれば、公式のテーマに頼らず、一から自分でテーマを作ることもできます。そのときには、この layouts フォルダに必要なファイルをすべて格納していくことになります。
publicフォルダの役割
public フォルダは、公開用のファイル一式を含んだフォルダです。
はじめは自動では作られてはいませんが、 hugo コマンドを実行したときに、存在しなければ自動で作成されます。このフォルダの下には、 content フォルダにあるファイルをもとに、公開用のファイル一式が作成されます。個別記事だけでなく、アーカイブやトップページも作成されます。
resourcesフォルダの役割
resources フォルダは、とくにユーザーが触る必要はありません。 Hugo が処理をする際に使うものです。
staticフォルダの役割
static フォルダは、画像や css ファイル、 JavaScript ファイルなどの、静的なファイルを置いておくフォルダです。
ここに置いたファイルは、 hugo を実行したときに、 public フォルダの直下にそのままコピーされます。例えば、 static/img/sample.png というファイルは、 public/img/sample.png にそのままコピーされます。そのまま使いたいファイルを置いておけばいいでしょう。
なお、画像ファイルは、昔は static フォルダの下に置くしかありませんでしたが、今では content フォルダの下に置く方法もあります。画像を追加しようが参考になるでしょう。
themesフォルダの役割
themes フォルダは、サイトで設定するテーマを格納しておくフォルダです。
テーマを格納する方法は、Hugoを動かしてみようにも書きましたが、公式テーマの一覧から使いたいものを探し、ダウンロードしてデータを移します（ git clone を使ってもいいです）。そして、 config.toml で
theme = "THEMENAME"
のようにすれば、指定したテーマが使えるようになります。
themes フォルダには、複数のテーマを格納しておくこともできます。テーマの設定は、 config.toml 内で行いますが、 hugo コマンドを実行する際に、強制的に別のテーマを使うようにすることもできます。プレビューで行いたいときは、次のようにします。
> hugo server -t THEMENAME
公開用のファイルを作るときにテーマを設定したい場合は、次のようにします。
> hugo -t THEMENAME
毎回 config.toml の中身を変えなくても、このようにして、テーマを簡単に切り替えることができます。
おわりに
ここでは、 Hugo のフォルダの構成と、各フォルダの役割を見てきました。普段使うものは、 content と public がほとんどですが、より深く使っていく場合には、他のフォルダも利用する機会が増えていくでしょう。