静的サイトジェネレータHugoの導入

written: kengo
tag:

1. Hugo導入のいきさつ

今回、このWebを作るにあたって静的WebジェネレータのHugoを使っています。 Joomla,Modx,WordPressなどいくつかCMSを試したのち、原点回帰して静的Webに落ち着きました。 PHP+DBのシステムは本件ではオーバースペックであると判断したためです。 とはいえ、すべてHTML手入力もつらいので静的Webジェネレータにしよう、どうせだしMarkdownにしよう、ということでHugoに白羽の矢を立てました。

2. Hugoのメリット・デメリット

当初はJekyllを使っており、とてもテンポよく作成できていました。Jekyllは記事の数が増えるとかなり遅くなるデメリットがあるため、 より高速に動作するHugoに移行しました。メリットとデメリットをあげてみます。

Jekyllも自動更新機能がありますが、生成に時間がかかると意味が薄れます。 Hugoは数十ミリ秒で終わらせてくれるため、自動更新が生かされるのが最大の魅力と思います。

3. 用意した環境

Hugoはターミナルがあると便利なので、弊社では簡単のためにMacを使用しました。 以下は今回用いた環境です。Windowsでもコマンドプロンプトからできるようですね。 こちらが参考になります。

4. 導入

HugoはGithubからダウンロードできますが、今回はHomebrew経由で入手することにします。

4-1. Rubyのインストール

Homebrewを使うにはRubyが必要です。 OSXはあらかじめRubyがありますので、作業はありません。 Windowsの場合、Ruby公式からインストールをしてください。

4-2. Homebrewのインストール

Homebrewはアプリケーションマネージャです。OSXですとMacPortが有名ですが類似のサービスです。 ターミナルからrubyコマンドを使ってHomebrewを入手します。

Homebrewの入手:

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"

Homebrewの更新:

brew update

4-3. Hugoのインストール

Homebrewを使ってHugoをインストールします。

brew install hugo

つぎにHugoで管理するWebのフォルダ(サイト)を作成します。

hugo new site /出力先絶対パス

Hugoはmarkdownに適用するテーマを切り替えることができます。 既存テーマをそのまま適用することもできますし、自分で作ることもできます。

hugo new theme テーマ名

サイトとテーマの関係について

Hugoはサイトの中に挿し替え用のテーマを持つ形になっています。 一方でhugo new siteで生成されるサイト情報自体もテーマと同様のLayoutsやassetsなどのフォルダを持ちます。 hugoコマンド時に-tを指定しなければこれらがデフォルトのテーマとして適用されます。 テーマは1つでいい、ということであれば意図的にテーマを作る必要はないかな、と思います。

4-4. Hugoのビルド

Hugoのサイトフォルダが準備できたら、これをビルドします。 Hugoサイトフォルダにカレントディレクトリを移し、hugo -tを実行します。

hugo -t テーマ名

-tはデザインテーマを指定するパラメータです。指定したテーマを使ってWebが生成されます。 実行するとHugoのビルド結果がコンソールに表示されます。

同時に”public”というフォルダが作られ、この中に完成したWebデータがすべて入っています。

4-5. ページの確認

ビルド単体でも問題ありませんが、作られたサイトを確認したい場合「server」を指定すると、 ビルドした結果をそのまま見ることができます。

hugo server -t テーマ名

上記を実行するとローカルサーバが起動し、http://localhost:1313/ で結果が確認できます。 Ctrl+Cでサーバを中断します。

References