Hugoで記事を書く方法(フロントマター編)

前回までのあらすじ

Hugoのテンプレートを作成して localhost で表示できるようになりました。

HugoをPCにインストールして実行する方法

今回の目標

記事を書く時にフロントマターの内容がある程度わかる。

hugo new ~の仕組み

前回の投稿ではhugo new Test.md というコマンドを実行すると、

Content フォルダ内に Test.mdファイルが作成されて

これが記事になるという話をしました。

このmarkdownファイルの素になっているのが、

archetypes ＞ default.md というファイルから作成されています。

この中をみると初期の状態では以下のようになっています。

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

この---で囲まれた箇所は「Front-matter(フロントマター)」と呼ばれていて、

記事の設定を記述する部分になります。

このdefault.mdファイルから生成されたファイルがこうなります。

---
title: "Test"
date: 2020-01-02T11:46:20+09:00
draft: true
---

フロントマターの項目説明を簡単にすると、

title：記事のタイトルを設定する項目
date：記事の作成日付を設定する項目
draft：公開するかどうか(True=非公開、False=公開）

をそれぞれ設定することができます。

フロントマターの応用

上記の３つでもブログとしては成立しますが、

もっとオリジナルなレイアウトにしたいとか、

もっと記事を装飾したり自分好みにしたいという要望が多いとおもいます。

そんな人のためにHugoではフロントマターに色んな項目を追加して

ゴリゴリ編集できる機能があります。

よく使いそうな項目は以下になります。

---
# 記事タイトルの設定
title: "{{ replace .Name "-" " " | title }}"
# 記事の説明
description : "記事の説明"
# 作成日付の設定
date: "{{ now.Format "2006-01-02" }}"
# 更新日
lastmod: "{{ now.Format "2006-01-02" }}"
#アーカイブの設定を作成日付で設定する
archives: [{{ dateFormat "2006/01" .Date }}]
# 下書きモード（true=下書き、false=公開）
draft: true
# タグ
tags: ["", ""]
# サムネイルの保存場所を/static/thumbnailにする
thumbnail: "./thumbnail/eye-catch_.jpg"
# 公開終了日付の設定(限定記事以外特に使わない)
expiryDate: "2020-12-31"
# URLのファイル名部分を変更するパラメータ。基本使わない
slug: "xxxxx"
# カテゴリ
categories: ["Hugo", "備忘録"]
# 目次設定（true=表示、false=非表示）
toc: true
---

title

記事のタイトルを設定する項目。

description

ページの説明文。RSS出力時の文章やSEO対策に使えたり使えなかったりするとか。

date

記事の作成日付を設定する項目。

hugo new ~.md コマンドを実行すると、実行した日付が自動で設定される。

lastmod

記事の更新日付を設定する項目。

hugo new ~.md コマンドを実行すると、実行した日付が自動で設定される。

作成日付と同一であれば表示されない。

また、この日付を最新日付にしても画面表示の順番が変わるわけではない。

draft

記事を公開するかどうかのフラグ。

True=非公開、False=公開

thumbnail

記事上部のサムネイルを設定する項目。

背景画像は ルートディレクトリ > staticフォルダ内に置くのがよいため

staticフォルダ内にthumbnailというフォルダを作成し、

上記のような書き方をしている。

thumbnail の設定がないとテーマごとのデフォルト画像が設定される。

Robust というテーマでは

hugo_theme_robust > static > images 内にあるdefault.jpgが設定される。

expiryDate

記事の公開終了日付を設定する項目。

限定記事を書きたい場合や、古い記事を自動で削除する場合に使用する。

slug

URLのファイル名部分を変更する場合に使う項目。

1.もともとのURLがこちら

2.slugに適当な文字を記載する

3.slug に記載した文字がURLに変わる。