前回はHugoをインストールしたので今回はサイトを作って記事を書いて動作確認までやってみる。

環境

Windows7 64bit
Hugo v0.20.7

サイト作成

適当なディレクトリでhugo new siteコマンドを実行しサイトディレクトリを作成。

hugo new site [path]

ここではC:\hugo\sitesにmysiteというサイトを作成する。

$ mkdir c:\hugo\sites
$ cd c:\hugo\sites

$ hugo new site mysite
$ tree . /F
C:\HUGO\SITES\MYSITE
  │  config.toml
  │
  ├─archetypes
  ├─content
  ├─data
  ├─layouts
  ├─static
  └─themes

1ファイル、6ディレクトリが作成された。

ファイル/ディレクトリ 説明
config.toml サイト全体の設定ファイル。デフォルトでは設定ファイルはTOML形式だがYAMLまたはJSONも使用できる。
archetypes このディレクトリのdefault.mdの設定が新しい記事に適用される。
content サイトのコンテンツ(記事など)を置く。
data config.toml以外にサイト全体で使用する設定ファイルを置く。TOML、YAML、またはJSON形式。
layouts コンテンツを静的なサイトに変換するために使用するレイアウト(html)を置く。
static 画像、CSS、JavaScriptなどの静的コンテンツを置く。
themes サイトのテーマを置く。テーマは独自に作成することも可能。

記事作成

サイトディレクトリでhugo newコマンドを実行し記事を作成。

hugo new [コンテンツのパス]

$ hugo new post/hello.md

このコマンドによってmysite/content/post/hello.mdが作られる。

hello.mdの中身は以下のようになっている。

+++
date = "2017-05-24T22:49:45+09:00"
draft = true
title = "hello"

+++

+++内の内容はTOMLで記述された記事のための設定で、front matterという。

デフォルトでは三つの設定プロパティがある。

プロパティ 説明
date 記事が作成された日時
draft 下書きかどうかのフラグ
title 記事のタイトル(デフォルトはファイル名)

とりあえず最後の+++の下に記事を書いてみる。

+++
date = "2017-05-24T22:49:45+09:00"
draft = true
title = "hello"

+++

Hello World!

記事が書けたらテストサーバーで起動し表示確認できるが、この状態ではまだ何も表示されない。

hugoにはデフォルトのテーマがないのでテーマをインストールする必要がある。

テーマインストール

テーマは下記のサイトからダウンロードし、themesディレクトリに置く。
https://themes.gohugo.io/

今回はBlackburnというテーマをインストールしてみる。

$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.git

テーマをインストールしたディレクトリには以下のファイルが含まれる。

ファイル/ディレクトリ 説明
theme.toml テーマの設定ファイル。テーマの名前や定義、author、ライセンスなどを記述。
images screenshot.pngとtn.pngを含むディレクトリ。 screenshot.pngは一覧表示の画像でtn.pngは単一の記事の画像。
layouts 異なるコンテンツタイプのビューを含む。すべてのコンテンツタイプはsingle.htmlとlist.htmlが必要。single.htmlは単一のコンテンツ、list.htmlは一覧表示に使われる。
static 画像、CSS、JavaScriptなどの静的コンテンツを置く。

動作確認

サイトディレクトリに戻り下記のコマンドを実行。

$ cd ..
$ hugo server -t blackburn -D

HTMLが生成され、サーバーが起動する。

オプション 説明
-t テーマ名を指定
-D draftがtrueの記事も表示する

hugoはデフォルトでライブリロードが有効になっているので、記事を変更すると再読み込みされる。
なので表示内容を確認しながら記事を書くことができる。すばらしい。

表示確認はhttp://localhost:1313/にアクセス。

以下のように表示された。

quickstart

テーマを変えたい場合は、別のテーマをcloneし-tで指定するだけ。

ビルド

動作確認が終わったらビルド。

hugoコマンドでテーマを指定する。
hugo serverコマンドと同様に-Dを指定すると下書き(draftがtrue)の記事も生成されるがここでは指定しない。

$ hugo -t blackburn

これでpublicフォルダに公開用のサイトが生成される。あとはpublicフォルダをWebサーバーに公開すればいい。