Hugo - 記事を書く

前回の続きです。
いよいよテスト記事を書きます。

こちらに傚って進めれば簡単そうです。

Hugo で記事を作成する | まくまくHugo/Goノート

1. 記事ファイルを作る

【コマンド】記事ファイルを作る

hugo new post/ファイル名.md

【コマンド】記事ファイルを作ってエディタを開く

hugo new post/ファイル名.md ---editor エディタ名

まずこのコマンドをどこで打つのだろう、と思いましたが、サイトディレクトリ(今は「test」)の中です。

サイトディレクトリより上や、「content」ディレクトリ「post」ディレクトリでhugo new post/ファイル名.mdを試しましたが、

Error: Unable to locate config file or config directory. Perhaps you need to create a new site. Run hugo help new for details.

とエラーが出ます。

また、間違えてhugo new ファイル名.mdとやると「content」ディレクトリのすぐ下にできてしまい、記事として見れません。

記事ファイルは content/post/ の中に作っていきます。
(しかし参考サイトには content/ の中で作ることになっているので、そういうケースもあるのだと思います)

2. mdファイルの中身を編集

.mdという、「md(マークダウン)ファイル」の存在を知りました。 はてなブログを書いているだけではよく分かっていませんでした。 そしてREADMEファイルもmdファイルだったとは!気づきませんでした。

これはまた別で少し調べようと思います!

...改めて、hugo newコマンドで作られたsample.mdファイルを開いて、テストで以下のように書き換えてみました。

sample.md

---  
title: "ブログ記事タイトル"  
date: 2020-03-06T13:15:38+09:00
draft: true
---
記事本文
hugo記事第一号!

# 見出し

---で囲まれた部分は1. の時点で自動生成されています。
この部分をFront matterヘッダ といい、archetypes/default.mdに書かれているFront matterヘッダを元にしてhugo newでmdファイルが作られるそうです。

探したところ、themes/hugo-theme-cleanwhite/archetypes/post.mdというのがありました(default.md はありませんでした)。

post.md

---
title:       "An Example Post"
subtitle:    ""
description: ""
date:        2018-06-04
author:      ""
image:       ""
tags:        ["tag1", "tag2"]
categories:  ["Tech" ]
---

subtitleなどあるのにできた記事ファイルには自動生成されておらず、dateも固定...post.mdを元に記事ファイルは作られていないようです。これはこのテーマのドキュメントを呼んだほうが良さそうです。

ちなみに「archetypes=原型」です。

3. draft: true を削除する

「draft=下書き」なので、公開の準備が整ったら消します。
(draft: false でもOKでした)

4. Hugoのサーバーを起動する

【コマンド】サーバー起動

hugo server

サーバーを起動してhttp://localhost:1313/にアクセス。
(サーバーを起動しないとブラウザで見れません)

見れました!

f:id:yokoyoko_115:20200308010702p:plain

マークダウンで書いた見出しもしっかり見出しになっています。

気になる点もあります。TOCって何?というのと、フォントがおそらく中国語向け。

それにしても、ファイルの内容を変更して保存すると、すぐにページに反映される!ブラウザの読み込み操作なしに!

Hugo サーバは、content ディレクトリ内の変更を監視しており、記事が作成されたり修正されたりした場合に自動的にリロードしてくれるので、Hugo サーバは一度立ち上げたら立ち上げっぱなしで大丈夫です。

監視!すごい。感動しました。