静的サイトジェネレータとは

1リクエスト毎にサーバサイドスクリプト(ruby/perl/phpなど)でHTMLを生成する仕組みを動的サイトと呼びますが、
サーバサイドスクリプトを介さずに予め設置されたHTMLをWebサーバが直接クライアントへ返却する仕組みを静的サイトと呼びます。

一般的に、ホームページと呼ばれるものですね。
昔からHTMLなどをFTPなどでアップロードし、無料で使えるレンタルサーバのサービスが存在しています。

静的サイトジェネレータのメリット

テンプレートエンジンによりヘッダー/フッターなどの共通部分をコンポーネント化出来るため、HTMLをのそまま記述するよりも効率が上がる
CMSと違いDBとサーバサイドスクリプトが存在しないことによるメリット
1. レスポンス速度が速い
2. サーバサイドスクリプトに起因する脆弱性の心配が無くなる
3. 障害が起こった時、DB/サーバサイドスクリプトに対して原因を疑う必要が無いので、問題の切り分けがしやすい
4. サイトに使用するコンテンツをテキストファイルで管理するため、バージョン管理システムとの相性が良く、DBに比べてデータ損失の危険が少ない

静的サイトジェネレータのデメリット

編集、カスタマイズにHTML/CSS/JavaScript、コマンドラインの基礎知識が必要とされ、敷居が高い
上記の理由から、ノンプログラマでも運用可能な成果物としては納品しにくい
ページ数が膨大になると、ビルドの遅さがネックになる
Hugoの場合、1記事1msなので、10000記事だと10秒ビルドに要する

では、数ある静的サイトジェネレータのHugoの特徴が何なのか見ていきましょう。

Hugoの特徴

golang製で、1ページあたり1msという高速ビルド
Mac OSX/Windows/Linuxで動作する
Hugo用のテーマの種類が豊富
HugoのテンプレートエンジンはGoの標準Package

ブログに使用する場合は記事数が増えるに従ってビルド時間も増加しますので、
記事数が多いと静的サイトジェネレータの種類によって秒単位でビルド速度に差が出ます。

Jekyll、Octopress、Middleman(全てRuby製)など他のメジャーな静的サイトジェネレータとHugoを比較した場合、
出来る事に殆ど差はありませんが、ビルドの速度が大きな差別化要因となるでしょう。

インストール

Windows

https://github.com/spf13/hugo/releasesから最新のWindows版zipファイルをダウンロードして解凍
中にあるhugo_{バージョン名}_windows_amd64.exeをhugo.exeにリネーム
D:\Hugo\binディレクトリを作成
D:\Hugo\binディレクトリにhugo.exeを移動
D:\Hugo\binを環境変数に追加

Mac OSX

brew update && brew install hugo

コマンドラインでhugo versionと入力し、
バージョンが表示されればhugoコマンドが使用出来る状態です。

$ hugo version
Hugo Static Site Generator v0.15 BuildDate: 2015-11-26T15:29:07+09:00

基本コマンド

$ hugo new site hugo_site # 新規Hugoプロジェクト作成

$ hugo new page.md # 新規ページ作成

$ hugo # ビルド publicディレクトリへ出力

$ hugo server # ローカルサーバが起動 assetのパスやリンクURLのホスト部分が自動的にlocalhostへ書き換わる

$ hugo server -w # ライブリロードを有効にしてローカルサーバ起動 ファイル編集を検知するとブラウザがリロード

2分でブログを立ち上げる公式サイトのチュートリアル動画がありますので、初めての方はこちらがおすすめです。

テンプレート/設定ファイルの仕組み

プロジェクトルートにあるconfig.tomlにパラメータを記述

# config.toml

baseurl = "http://replace-this-with-your-domain.com/"
languageCode = "en-us"
title = "Steam - a minimal theme for Hugo"
theme = "hugo-steam-theme"
disqusShortname = "spf13"
paginate = 10

[params]

        title = "Steam"
        subtitle = "a minimal theme for ~~Ghost~~ Hugo"
        copyright = "Released under the MIT license."

テンプレートファイルでconfig.tomlのパラメータが読み込まれる

# themes/steam/layouts/partials/head.html
# {{  }}で`config.toml`の変数を読み込み 制御構文も使える

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

~

index.htmlが親テンプレートファイルで、ビルド時に_default、partialsディレトリ内のテンプレートパーツを読み込みHTMLを生成する

# themes/steam/layouts/index.html

{{ partial "head" . }} # `partials/head.html` を読み込んでいる
<body class="home-template">

    {{ partial "header" . }}
    {{ partial "navigation" . }}

    <main class="content" role="main">
        {{ partial "post-list" . }}
        {{ partial "pagination" . }}
    </main>

    {{ partial "footer" . }}
    {{ partial "js" . }}

</body>

これらの機能により、共通部分の使い回しと、ブログ記事一覧のようなセクションをループで記述出来るようになります。

まとめ

Webサイト制作のフレームワークとしてCMSの他に静的サイトジェネレータが存在する
静的サイトジェネレータを使うとDB/サーバサイドスクリプ無しでサイト構築が行え、メリットとデメリットがある
他の静的サイトジェネレータと出来る事にあまり差は無いが、Hugoはビルド速度が速い

UUUMエンジニアブログ

UUUMのエンジニアによる技術ブログです

静的サイトジェネレータ「Hugo」について