Hugoで静的サイトを生成してみる

Posted at — Apr 5, 2019

Hugoとは

Hugoとは、Golangで作られている静的サイトジェネレーター。なんでも、生成が速いらしいです。今回はコイツを使って、サイトを生成し公開してみようと思います。

この記事が役立つであろう人

サイトを立ち上げたくて、ターミナルでの作業が苦でない人。また、自分でCSSなどをいじったりしてデザインするなら、記事を書くほうに労力を割きたい人。

手順

基本的にはここを参考にしています。以下の手順はWindows 10にて行っていますが、多分macOSとかでも同様なはずです。なお、個人的な好みでWindowsのコマンドプロンプトではなくbusyboxで実行していますが、普通にコマンドプロンプトやPowerShellで実行しても問題ないと思います。

Hugoのインストール

HugoのGithubから、自分が利用するプラットフォーム用のインストーラーをダウンロードして展開します。この記事を書いている現在での最新は0.54.0。

インストール後、Hugoのbin（実行ファイルが格納されているアドレス）を環境変数に追加します。GUIでもいいし、setxコマンドを実行しても問題ありません。インストールしたあとで、下記コマンドを実行してみます。

$ hugo version
Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z

上記のように返ってくれば完了です。

サイトを生成

以下のコマンドを実行してサイトを生成します。hogeの部分は任意で、自分が生成したいサイト名でOKです。実行したら生成されたフォルダーに移動します。

hugo new site hoge
cd hoge

テーマを決定

Hugoのテーマを集めたページを参照して、好みのテーマを探します。カスタマイズしたり、自力で作成することももちろん可能ですが今回は割愛します。今回はミニマムなデザインが気に入ったので、Hermitにしてみました。

Hermit

テーマを決めたら下記のコマンドを実行して、gitでGitHubから必要なファイルをダウンロードします。なお、導入手順はテーマのページにしっかり記述されていました。親切！

git init
git submodule add https://github.com/Track3/hermit.git themes/hermit

ここまで実行すると、下記のようなフォルダーとファイルの構成ができ上がっているはずです。

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

この時点で下記のコマンドを実行すると、publicという名前でフォルダーが作成されて、その中に生成されたHTMLファイルなどが格納されるはずです。ただし、この時点ではコンテンツを作成していないため、トップページだけで中身はなにもありません。

hugo

設定ファイルを変更

ファイルconfig.tomlに設定を追記します。

オフィシャルでは下記のコマンドを実行するだけでいい、としています。要はテーマの名前を追加しています。なぜかというと、生成直後の設定ファイルの中身では、何のテーマを利用するか記述がないためわからないから追記してやる必要があるわけです。

echo 'theme = "ananke"' >> config.toml

ただ、一応これ以外にも後々修正や追記したりする部分があるので、この時点で編集してしまっても問題ありません。それと、他のテーマについては不明ですがHermitに関して言えば、config.tomlは自分で記述するのではなくて、用意されたものを流用して中身を編集した方が便利です。というのは、テーマによってはこの設定ファイル中に特定の設定値がないと、hugoコマンドでのサイト生成の際エラーになる可能性があるから・・・実際、それで30分ほどムダにしました_(┐「ε:)_

記事を作成

下記のコマンドを実行するとcontentフォルダー配下にファイルを生成します。

hugo new hoge.md

この際、出力先のフォルダーを指定できます。下記のコマンドでは、contentフォルダー配下にpostsフォルダーが存在しなければ自動的に生成してから、ファイルを生成します。カテゴリだとかジャンル別にファイルを分別したい場合に有効な方法です。

hugo new posts/hoge.md

生成された直後のファイルの中身は下記のような感じ。

---
title: "Hoge"
date: 2019-04-04T18:21:09+09:00
draft: true
---

ここに記事をMarkdown形式で記述します。ちなみに、ファイル冒頭のdraftはtrueだと下書き扱いになります。hugo serverとかでファイル生成すると内容の確認はできるんだけど、publicフォルダーには下書き扱いであるため出力されません。なので、サイト公開時には忘れずにdraft: falseとしておく必要があります。じゃないと、地味に30分くらいハマることになるので_(┐「ε:)_

なお、Windowsあるある・・・かどうかはよくわからないけど、UTF-8でファイルを保存しておかないとコマンドhugoの実行の際エラーになるので注意が必要です。

サーバーを起動して確認

下記のコマンドを実行します。

hugo server -D

その後ブラウザでhttp://localhost:1313/にアクセスします。なお、ブラウザで生成したサイトを表示させたままconfig.tomlや記事の内容をいじったりすると、そのままホットリロードされてすぐさま反映されます。スゲェ。

ちなみに、Hugoのサーバーを終了するにはCtrl+Cを押します。

固定ページなどの表示設定

ここからの作業は任意ですが、大抵のblogにはコンテンツ以外に「このページについて」みたいな固定ページが存在します。そういった、コンテンツ以外のページも必要に応じて追加します。

追加する手順は基本的に記事を生成する際と何ら変わりません。注意するのはcontentフォルダー配下の構成とconfig.tomlファイルの設定内容。たとえば、contentフォルダーの内容が下記の通りだったとします。pageとpostsはフォルダーです。

.
├── page
│    └── hoge-page.md
├── posts
│    ├── content1.md
│    ├── content2.md
│    └── content3.md
└── about.md

この場合、設定ファイルのconfig.tomlの内容を下記の通り記述することで、ファイルと生成後の出力内容を紐づけることができます。

## コンテンツ用設定
    [[menu.main]]
    name = "Posts"
    url = "posts/"
    weight = 10

## 固定ページ用設定。
    [[menu.main]]
    name = "pages"
    url = "page/"
    weight = 10

## 「このページについて」ページの設定。
    [[menu.main]]
    name = "About"
    url = "about/"
    weight = 10

なお、ここで*.mdファイルを単体で置いておくと1枚の単体ページとしてHTMLファイル生成されます。が、1つ以上の*.mdファイルをフォルダー配下に格納しておくと、各記事をHTMLファイルに変換するのと同時に、自動的にリストページを生成してくれます。便利。

ただし、前述の下書き設定draftがtrueになっていたりすると、Markdownファイルがあっても下書き扱いとなるのでHTMLファイルが生成されません。そのため、メニューに項目があってもファイルが存在せず404になってしまうので、そこだけは注意が必要です。

というわけで

当ページはHugoで作成されています。テーマはいろいろとっかえひっかえして好きなの探してね_(┐「ε:)_

頑張らないために頑張る

ゆるく頑張ります