Hugo で記事を作成する

記事の作成

hugo new 記事へのパスでcontentDIR配下に新しい記事が作成される.「記事へのパス」は直接ファイル名のみならcontent直下に、フォルダ名/ファイル名などとするとcontent/フォルダ名/ファイル名の形で作成される.content内にフォルダ名のDIRが無い場合は自動的に新しく作られる.

例えばhugo new posts/sample.mdで、content/posts/sample.mdというマークダウンファイルが作られる.

$ hugo new posts/sample.md
/home/user/Hugo/hugo-blog/content/posts/sample.md created
$ tree content/
content/
└── posts
    └── sample.md

1 directory, 1 file

新しく作られた記事は、すでに先頭にfront matterが付与された雛形になっている.

[content/posts/sample.md]

---
title: "Sample"
date: 2020-08-04T11:01:16+09:00
draft: true
---

この記事に内容を追加してみる.ただしfront matterのdraftをfalseにするかコメントアウト（又は削除）しておかないと下書き扱いになって公開されないので注意.

---
title: "Sample"
date: 2020-08-04T11:01:16+09:00
draft: false
---

## Hugo Blog スタート

最初の記事です.

テーマによっては作成された記事が自動的にトップに表示されるものもあるが、Minimoというこのテーマはそうならないので明示的にURLを指定してアクセスする.記事のURLが「http://localhost:1313/posts/sample/」として/posts/sampleというcontent以下のパス名になっている.

Hugoサーバは一度立ち上げたら立ち上げっぱなしでも、記事の変更を反映してくれる.Jekyllなどと違って、設定ファイルの変更も即座に反映される.

front matterでdraft: trueを指定した下書きコンテンツは表示されないが、hugo server -Dで表示することもできる.

localhost以外のIPアドレスで接続したい場合は「--bind ＜IPアドレス/ホスト名＞」オプションでそのIPアドレスもしくはホスト名を指定する.

サーバコマンドのその他のオプションはhugo server --help

記事の雛形

記事の雛形となっているのはarchetypes/default.mdというファイル.front matterのテンプレだけが記述されている.

[archetypes/default.md]

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

titleフィールドに hugo new コマンドで指定したファイル名から、ハイフンがスペースに置き換えられたタイトルが作られて自動で入る.date フィールドには現在の時刻が自動で入る.

記事は基本Markdownで記述するのでファイル拡張子は「.md」にするが、HTMLで直接書いて拡張子「.html」にすればHTMLファイルで保存できる. .htmlファイルであってもレイアウト・テンプレートは適用され、フロントマターは読み込まれるようだ。

front matter に指定できるメタデータ

個別の記事ページの front matter に指定できるメタデータの主なもの

メタデータ名	説明
date	作成日時
description	コンテンツの概要（要約）
draft	trueの場合、下書きとして認識されコンテンツは公開されない
expiryDate	公開終了日時
keyword	metaタグなどで指定するキーワード
lastmod	最終変更日時
publishDate	公開開始日時
slug	コンテンツのURLに使用される文字列
summary	コンテンツの要約
title	コンテンツのタイトル
type	コンテンツのタイプ
url	コンテンツのURL
weight	コンテンツの表示順を決定する際に使用される重み
tags	タグ、Taxonomy（分類用データ）
categories	カテゴリー、Taxonomy（分類用データ）

front matter の例

---
title: "テスト記事"
date: 2019-09-27T11:23:09Z
draft: false
tags: [ example, test ]
categories: [ test ]
---

記事作成時にエディタで編集する

hugo new コマンドに次の--editorオプションで好きなエディタを指定することで、ファイル生成後すぐにそのエディタで編集作業ができる.

$ hugo new posts/sample2.md --editor code
/home/user/hugo-blog/content/posts/sample2.md created
Editing posts/sample2.md with "code" ...

ここではVSCodeで新規ファイルを開いた.すでに他のファイルの編集作業でVSCodeを開いていた場合、新しいタブで新規の記事が開かれる.