以前、別ドメインでOctopress+GitHub Pagesでブログを立ち上げていましたが、更新が滞り早数年。 ドメイン廃止を期に、HUGOを使って心機一転ブログを立て直すことにいたしました。
自分的にOctopressは、作業PCの入れ替え後に環境構築を怠り放置する結果になってしまったので、インストールが楽なものという事で、、、

このエントリーではHUGOのインストールから記事・静的サイト生成までの一連の流れをクイックスタートとして備忘録として残すことにします。

クイックスタート

HUGOのインストール

macOS使いのため、Homebrewからインストールします。

$ brew install hugo

これだけでインストール出来てしまうのでとても簡単ですね。macOS以外へのインストールや詳細手順はオフィシャルドキュメントInstall Hugoをご覧下さい。
macOSの他、Windows/Linux/FreeBSDにも対応しているようです。ただパッとみた感じ、RHEL系のLinuxにインストールするのは一癖あるかもしれないです。 この辺りはいずれ試すと思いますのでその時に別途記事にしたいと思います。

サイト構成情報(Skelton)の作成

HUGOで生成するコンテンツの設定ファイル格納するディレクトリを作成します。 ここでは、my-siteという名前で作成する例です。

$ hugo new site my-site
$ cd my-site

コマンドを実行すると、以下の様なディレクトリ構成でスケルトンが作成されます。

my-site
├── archetypes/
│   └── default.md
├── config.toml
├── content/
├── data/
├── layouts/
├── static/
└── themes/

テーマのダウンロード

HUGOにはデフォルトのテーマが用意されていないため、自分でテーマを用意する必要があります。 手っ取り早く公式サイトのテーマからダウンロードすることにしました。

ここでは、BegというBootstrap3をベースにしたテーマを使用します。 Installationの手順に乗っ取り、git cloneします。

$ cd theme
$ git clone https://github.com/dim0627/hugo_theme_beg.git
$ cd ..

次のコマンドを実行すると、http://localhost:1313/でプレビューできます。

$ hugo server -t hugo_theme_beg

-tでテーマを指定することができます。

設定ファイル:config.tomlの編集

-|  baseURL = "http://example.org/"
+|  baseURL = "http://your.domain.name/"
-|  languageCode = "en-us"
+|  languageCode = "ja"
-|  title = "My New Hugo Site"
+|  title = "Your Site Title"
+|  theme = "hugo_theme_beg"

baseURLには公開するURLを入力します。日本語で記事を書くのでlanguageCode = "ja"としました。 theme = "hugo_theme_beg"は先ほどダウンロードしたbegをデフォルトのテーマとしています。この設定をすることで、-tオプションを省略できます。

他にも設定できるパラメータはありますが、ここでは最低限の設定だけということにしています。

Front Matter: archetypes/post.mdの作成

Front Matterは記事のメタ情報を管理します。すべての投稿はarchetypes/default.mdが適応されますが、SECTIONという単位ごとにテンプレート化することもできます。

ここでは、ブログエントリーのSECTIONをpostととすることを前提にpost.mdを作成します。

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description:  ""
categories: [""]
tags: [""]
draft: true

なおHUGOでは、SECTION(baseURL以下のサブディレクトリ)とジェネレータ内部で管理されるcategoriestagsの要素で記事の属性を管理することができます。その他にもコンテンツのグルーピングする方法がありますが、詳細はTaxonomiesご覧ください。

記事の作成

記事作成のコマンドは以下のフォーマットになります。

$ hugo new <section name>/<file name>.<file format>

先に書いた通りSECTIONpostとしますので、helloという記事を作成するには以下のコマンドになります。

$ hugo new post/hello.md

プレビュー

$ hugo server -D -w

-Dはドラフトコンテンツの表示。-wは変更をリアルタイム表示するオプションです。

記事の公開

記事が作成できたら、draft: trueを削除して以下のコマンドを実行します。

$ hugo

実行後、publicディレクトリに静的コンテンツが生成されますので、public内のコンテンツをホスティングサービスにデプロイすることで公開されます。

以上。