この記事はアドベントカレンダー4日目の記事です。
https://qiita.com/advent-calendar/2025/dokokanoradio_hugo
本記事の概要
Hugoでの記事の作り方とFront Matter(フロントマター)の概要について記載する。
前提
Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)
記事の作り方
Hugoのビルド環境内でPowerShellから下記のようにコマンドを打てばよい。
hugo new ファイルパス
実際にやってみる
具体例として下記のようにPowerShellで下記のように打ってみる。
hugo new test.md
すると、content/test.mdに下記の様なファイルが出来る。
+++
date = '2025-12-05T02:37:02+09:00'
draft = true
title = 'Test'
+++
Hugoにおいては、記事(Webサイトのページ)は、contentフォルダに置かれるというルールがある。
また、Webページの記事としては、Markdown(.md)で書くのが基本である。
そのため、content/～.mdと書かなくても、単にtest.mdとするだけで、勝手にcontentフォルダ内に置かれる。
なお、Webサイトとしては、このファイルの記事には、
ルートURL/test/
というURLでアクセスできる。
Front Matter(フロントマター)について
先程のMarkdownの内容を再掲すると、下記のようになっている。
+++
date = '2025-12-05T02:37:02+09:00'
draft = true
title = 'Test'
+++
先頭行に「+++」と書かれていて、何行かパラメータのようなものが記載されたのちに、また「+++」と書かれている。
この「+++」で囲まれた部分をFront Matter(フロントマター)と呼ぶ。
フロントマターは、記事に関わるパラメーターを記載できる部分である。
「+++」等には意味があり、
- 「+++」の場合は、toml形式でパラメーターが書かれている
- 「---」の場合は、YAML形式でパラメーターが書かれている
という意味である。
詳しくは下記Hugoのドキュメント(日本語版)にも書かれている。
Hugoはtomlでパラメーターを記載することが多いので、tomlの方が分かりやすいと思われる。
Front Matterを変えてみる
さて、記載されているFront Matterの意味はこのようになる。
- date = '2025-12-05T02:37:02+09:00'
- この記事が書かれた日付を指す
- 2025年12月5日02:37:02(UTC+9時間=日本時間)となる
- ちなみに、デフォルトでは日付が未来になっている記事はビルドされない
- コマンドで指定すればビルドすることも可能
- draft = true
- 記事が下書き(ドラフトか)否かを表す
- 下書き記事が混入しないようにするため、通常、ドラフト記事はビルドされない
- コマンドで指定すればドラフトを表示することも可能
- title = 'Test'
- 記事タイトルを表す
- この場合は"Test"となっている
これを踏まえたうえで、次のように書き換えてみる。
+++
date = '2025-12-05T02:37:02+09:00'
draft = false
title = 'テストページを作りました'
+++
本文を書いてみる
Front Matter部分の後に本文を記載することになる。
テストとして以下のように書いてみる。
+++
date = '2025-12-05T02:37:02+09:00'
draft = false
title = 'テストページを作りました'
+++
実際にテストページを作ってみました。
どのように見えているでしょうか。
表示を確認してみる
Day3と同様に、内蔵Webサーバーで表示してみる。
コマンドは下記である。
hugo server
http://localhost:1313/test/ にアクセスしてみると下記のようになる。
404と表示される人は保存し忘れだと思うので、保存してからもう一度ブラウザーを更新すること。
無事、タイトルや本文、そして記事の日付が表示されていることが分かる。
補足：記事のひな型について
archetypes/default.mdの内容が記事のひな型になっている。
ひな形は複数作ることができ、いずれのひな型にもマッチしない場合はdefault.mdの内容となる。
(ひな形については、自分で置いたりテーマに置かれていたりする)
例えば、archetypes/deafault.mdを下記の様に書き換えてから、再びコマンドを使って記事を作ると、本文に「本文です」と書かれた状態でMarkdownファイルが作成される。
+++
date = '{{ .Date }}'
draft = true
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+++
本文です