Hugoのディレクトリ構造を簡単に理解したい
Hugoは、静的ファイルでサイトを作るためのツールです。
コマンドを叩けば一瞬で簡単に自分のブログサイトを作れるという事もあって、技術ブログを書きたい人などに最近人気ですよね。
ただ、ちゃんとHugoを使いこなすには、まずはディレクトリ構造の理解が欠かせないと私は思います。
そこで、本記事では、Hugoの各ディレクトリについて簡単に説明します。
本記事の対象者
- Hugoのディレクトリ構造をざっくり掴みたい人
Hugoのディレクトリ構造
hugo new site sampleコマンドをたたいたら、まずは以下のようなディレクトリ構造になっていることを確認します。
sample/
├── archetypes/
│ └── default.md
├── assets/
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml
この各ディレクトリがそれぞれどういうものなのか、説明していきます。
archetypes
hugo newコマンドでコンテンツファイルを作ったときのMarkdownのフォーマット（テンプレートという表現の方がイメージしやすい人もいるかも）ファイルを格納するディレクトリです。
例えば、hugo new content/sample.mdをコマンドラインで実行してsample.mdというコンテンツファイルを作成すると、archetypes配下のdefalut.mdのフォーマットでファイルが作成されるということです。ここでは詳細割愛しますが、テンプレートを複数作ることもできます。
フォーマットがあることで、サイトの一貫性が保てたり、一から書かなくていいのでラクだったりします🐕✨
assets
Hugo Pipesで処理する必要があるファイルを格納するディレクトリです。
たとえばscssファイルをcssファイルにビルドしたい場合、ビルド対象の.scssファイルをこのディレクトリに置きます。
ここは、はじめはあまり気にしなくていいです。
content
Webサイトのすべての記事ファイルを置くディレクトリです。
contentの下にサブディレクトリを作ると、ブログのセクションを分けることができます。
たとえば、Webサイトに、
- blog
- articles
- info
上記3つのセクションを作りたい場合、以下のようなディレクトリ構造にすればOKです。
content/
├──blog
│ └── 001_blog.md
│ └── 002_blog.md
├──articles
│ └── 001_article.md
├──info
│ └── 001_info.md
data
サイトの全ページから参照したいデータを記述したファイルを格納するディレクトリです。
データベース的な、サイトから参照したいJSONファイルなどをここに置いておきます。
ファイルは、JSON以外にもYAML、TOML形式でもOKです。
layouts
themesディレクトリにおいたテーマファイルを一部修正したいときやレイアウトパーツを追加したいときにファイルを格納するディレクトリです。
static
画像、CSS、JavaScriptなどのすべての静的ファイルを格納するディレクトリです。記事に画像を貼る場合も、このディレクトリの下に置きます。Hugoがサイトを構築すると、このstaticディレクトリ内のすべてのアセットがそのままコピーされます。
たとえば、以下の構成の場合だと、
static/
├──blogimage
│ └── image.png
├──hoge.png
ファイルへのアクセスURLは以下のようになります。
- https://{your-site-url}/blogimage/image.png
- https://{your-site-url}/hoge.png
themes
Webサイトのテーマを格納するディレクトリです。
公式のテーマ一覧から気に入ったテーマをダウンロードしたら、ここに置きます。
config.toml
Hugoの設定ファイルです。TOML/YAML/JSON形式で指定できますが、デフォルトではTOML形式です。
参考
すごくざっくりした説明ですが、Hugoのディレクトリ構造を掴む助けになれば嬉しいです。
Discussion