前回の続きです。
いよいよテスト記事を書きます。
こちらに傚って進めれば簡単そうです。
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/にアクセス。
(サーバーを起動しないとブラウザで見れません)
見れました!
マークダウンで書いた見出しもしっかり見出しになっています。
気になる点もあります。TOCって何?というのと、フォントがおそらく中国語向け。
それにしても、ファイルの内容を変更して保存すると、すぐにページに反映される!ブラウザの読み込み操作なしに!
Hugo サーバは、content ディレクトリ内の変更を監視しており、記事が作成されたり修正されたりした場合に自動的にリロードしてくれるので、Hugo サーバは一度立ち上げたら立ち上げっぱなしで大丈夫です。
監視!すごい。感動しました。