静的サイトジェネレータHugoを使ったサイト構築（導入編）

静的サイトジェネレータ · Hugo

こんにちは、tamaoki (@t0shiya) です。

これから何回かに分けて本サイト構築時に使用した静的サイトジェネレータ Hugo についてご紹介したいと思います。

Hugoとは？

Go言語で書かれた静的サイトジェネレータです。
代表的な静的サイトジェネレータとして、GitHub社が開発しているJekyllやMiddleman、 国産ではChatwork社が開発しているPhest等がありますが、Hugoを選んだ大きな理由は以下の３つです。

  • インストールが楽
  • クロスプラットフォーム対応
  • ページ生成が速い

Win/Mac/Linux環境に対応していて、どの環境も実行ファイル１つです。簡易HTTPサーバも内蔵しているのでRubyやPHPのインストールはもちろんApacheさえも不要です。
ページ生成も高速で本ブログの規模であれば0.3秒くらいで生成されます。

インストール

各プラットフォーム用の実行ファイルが提供されているのでリリース情報のページからダウンロードしてください。 Windows 64bit版はhugo_0.15_windows_amd64.zip、MacOSX版はhugo_0.15_darwin_amd64.zipです。zipファイルから展開した実行ファイルは hugo（Winは hugo.exe）という名前に変更しておきましょう。
Mac版であればHomebrewからもインストールできます。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
$ brew install hugo

サイト作成

新規サイトを作成するには以下のコマンドを実行します。hugo(.exe)を環境変数PATHに登録していない場合はダウンロードしたhugo(.exe)があるフォルダで実行しましょう。

$ hugo new site サイト名

これで空のサイトが出来上がります。生成されたのはサイトの情報を入力する config.toml ファイルと空のフォルダ５つ（archetypes, content, data, layouts, static）だけで中身はありません。 以降、hugo コマンドは config.toml ファイルのあるフォルダで実行しますので、hugo(.exe)を同じ場所に移動しておくとよいでしょう。

生成された config.toml ファイルは以下のようになっています。

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

baseurlがこのサイトを公開するURL、languageCodeはRSS出力に付与する文字コード、titleはサイトのタイトルです。環境に合わせて変更してください。

baseurl = "http://example.com/"
languageCode = "ja"
title = "Hugo入門"

テーマのインストール

レイアウトを１から作るのは時間がかかるので、一般公開されているテーマを利用してみましょう。
Hugo公式サイトのテーマ一覧のページから好きなデザインを選択します。ここでは公式サイトのクイックスタートと同じく hugo-uno テーマを使ってみます。 まずはサイトのトップフォルダ（config.tomlがあるフォルダ）に themes というフォルダを作って、そこにhugo-unoテーマを設置します。gitコマンドが使える方は以下で。

$ mkdir themes
$ cd themes
$ git clone https://github.com/SenjinDarashiva/hugo-uno.git

git コマンドが使えない方は ここ からzipファイルをダウンロードして展開してください。フォルダ名は hugo-uno に変更してください。

記事の追加

記事は content フォルダに置きます。以下のコマンドでからの記事ファイルを作ることができます。

$ hugo new ファイル名

ここでは post/hello.md という名前で作ってみます。

$ hugo new post/hello.md

コマンドを実行すると content フォルダ内に post フォルダが作成され、その中に hello.md ファイルが作られます。
標準設定ではファイルの場所・名前がそのままURLのパス部分になるので、この記事は http://サーバ名/post/hello/ というURLで公開されることになります。

テキストエディタで hello.md を編集しましょう。生成された直後の hello.md ファイルの中身は以下のようになっています。

+++
date = "2016-04-05T12:00:00+09:00"
draft = true
title = "hello"

+++

先頭の半角 + 3文字から次の + 3文字の行までを フロントマター と呼び、記事のタイトルや日付、カテゴリ等ページの属性を指定します。
title がページのタイトルです。draft は下書きかどうかの状態で true が指定されているとプレビューやページ生成がされませんので false に指定するか削除しましょう。本文はフロントマター以降（この場合は７行目以降）に Markdown記法 で記述します。

+++
date = "2016-04-05T12:00:00+09:00"
title = "Hugoを始めました"

+++

こんにちは、**Hugo** を始めました。

### Markdown記法

Markdownの書き方は以下のサイトが参考になります。

- [Wikipedia](https://ja.wikipedia.org/wiki/Markdown)
- [Qiita](http://qiita.com/Qiita/items/c686397e4a0f4f11683d)
- [日本語Markdownユーザー会](http://www.markdown.jp/what-is-markdown/#markdown-1)

プレビュー

hugo は簡易HTTPサーバを内蔵していていつでもプレビューできます。プレビュー中は自動的にリロードがかかるため何もしなくても表示が逐次更新されます。 プレビュー機能を実行するには hugo server コマンドを使用します。-t の後ろはテーマのフォルダ名を指定してください。

$ hugo server -t hugo-uno -w

ブラウザで http://127.0.0.1:1313/ にアクセスすると作成したサイトが表示されます。終了するときは Ctrl+C を押してください。

ページ生成

プレビューで問題がないことを確認できたらページ生成です。以下のコマンドを実行してください。

$ hugo -t hugo-uno

ウェブサイトとして公開するファイル一式が public フォルダに出力されますので、このままウェブサーバに設置してください。

今回はインストールからページ生成、ウェブサーバの公開までの流れを急ぎでご紹介しましたが、次回以降は各項目についてもう少し掘り下げていこうと思います。

このエントリーをはてなブックマークに追加