こんにちは、村上です。
今回紹介するHugoは静的サイトジェネレータ(static site generator)と呼ばれるフレームワークの一種です。
静的サイトジェネレータとは
1リクエスト毎にサーバサイドスクリプト(ruby/perl/phpなど)でHTMLを生成する仕組みを動的サイトと呼びますが、
サーバサイドスクリプトを介さずに予め設置されたHTMLをWebサーバが直接クライアントへ返却する仕組みを静的サイトと呼びます。
一般的に、ホームページと呼ばれるものですね。
昔からHTMLなどをFTPなどでアップロードし、無料で使えるレンタルサーバのサービスが存在しています。
静的サイトジェネレータのメリット
- テンプレートエンジンによりヘッダー/フッターなどの共通部分をコンポーネント化出来るため、HTMLをのそまま記述するよりも効率が上がる
- CMSと違いDBとサーバサイドスクリプトが存在しないことによるメリット
- レスポンス速度が速い
- サーバサイドスクリプトに起因する脆弱性の心配が無くなる
- 障害が起こった時、DB/サーバサイドスクリプトに対して原因を疑う必要が無いので、問題の切り分けがしやすい
- サイトに使用するコンテンツをテキストファイルで管理するため、バージョン管理システムとの相性が良く、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はビルド速度が速い