大まかな記事作成フロー
- hugo serverを起動。
- 記事ファイルを生成。
- ブラウザで記事画面を開く。
- 記事を編集＋保存。
- ライブリロードがブラウザを自動リロード。
- 記事が完成したら draft = false に変更して保存する。
hugo serverを起動する
以下のコマンドでローカルのhugo serverを起動します。テーマも指定します。
tree-no-iMac:hoge tree$
1 of 1 draft rendered
0 future content
1 pages created
0 paginator pages created
0 tags created
0 categories created
in 12 ms
Watching for changes in /project/hugo/hoge/{data,content,layouts,static}
Serving pages from /project/hugo/hoge/public
Web Server is available at http://127.0.0.1:1313/
Press Ctrl+C to stop
この時「Web Server is available at http://127.0.0.1:1313/ 」と表示されますが、これがトップページのURLになります。hugo serverを複数起動しようとした場合はportが変わったりするので、URL、特にポート番号はよく見ておきましょう。
なおメッセージ通りに「contol + c」でhugo serverを停止する事ができます。
HUGO CLIで記事を生成する
いよいよ記事作成です。記事はmarkdownで記述します。そのmarkdownの記事ファイルはHUGO CLIで生成します。
hugo new hoge.md
例えばこのように実行すると、以下のようにcontentフォルダ配下にファイルが生成されます。「hoge.md」というように拡張子は「.md」と指定していますが、これはmarkdownを表す拡張子です。拡張子は自由につける事が可能（付けなくてもいい）ですが、色々エディタやソフトが.mdをマークダウンと判定するので、拡張子は.mdとするのが無難です。
tree-no-iMac:hoge tree$ hugo new hoge.md
/project/hugo/hoge/content/hoge.md created
tree-no-iMac:hoge tree$ tree content/
content/
└── hoge.md
0 directories, 1 file
後はこのhoge.mdに記事を書いていくだけです。
記事をブラウザで表示する
記事ページは http://127.0.0.1:1313/hoge/ でアクセスする事ができます。
なお、hugo serverのオプションとして -w でライブリロードを指定しているので、hoge.mdの記事ファイルを編集しながらライブリロードで画面表示を確認していきます。記事を保存してから約0.5秒〜1秒くらいでライブリロードは実行されます。
記事を書いていく
hoge.mdの記事ファイルを開くと、以下のようになっています。
+++
date = "2015-10-19T00:28:20+09:00"
draft = true
title = "hoge"
+++
この「+++」は「Front Matter」と呼ばれるブロックで、この記事のメタデータを記述します。（参考） Front Matter
ここでは3種類の変数しかありませんが、使用するテーマによってはカスタムの変数が定義されている場合もあります。変数は自由に定義する事ができ、layout内で自由に参照する事ができます。
date
dateは記事の作成日時で、hugo new hoge.md 実行時のタイムスタンプが自動で設定されています。
draft
draftはtrueの場合は「下書き状態である」事を表し、falseの場合は「下書き状態でない」事を表します。記事を書いている途中の場合はdraft=trueとし、記事が完成したらtrueに修正します。
「hugo server -D」と「-D」を付ける事で、ローカルのhugo serverでドラフト記事もビルド対象にする事ができます。
title
titleはこのページのタイトルを入力します。使用するテーマによってはこれがtitleタグとして使用されたりします。