「 Hugo 」は簡単！ バージョンに注意しながら3ステップで導入してみる ｜ SiTest (サイテスト) ブログ

近年、 Jekyll や Hexo といった静的サイトジェネレータが話題になりましたね。
その中でも2017年に注目を浴びているのが、超高速 Golang 製の「 Hugo 」です。

何が超高速なのかというと、ビルドの速さです。
Hugo だと1記事あたり1msでビルドすることができます。
1000記事を1秒でビルドできるのは魅力的です。

ただ、導入する際にバージョンに関して躓くことがあります。
今回はその Hugo の概要から、バージョンに注意しながら導入までを紹介していきます。

※ この記事は Mac で Homebrew によりインストールすることを想定しております。

冒頭でもお伝えした通り、 超高速にWebサイトを生成してくれる Golang 製の静的サイトジェネレータです。

Hugo の操作は CLI なので、ターミナルで完結できます。
また、記事投稿の際はマークダウンを使用することができるので、エンジニアにとっては嬉しいメリットです。

他の静的サイトジェネレータに負けを劣らず、テーマが豊富です。
Webサイトにあった、デザインを見つける可能性が高くなります。

導入方法としては、Mac で、 Homebrew を用いて簡単にインストールすることができます。

他にも、 Netlify というホスティングサービスとも相性がよかったりします。

それでは、ウェブサイトを立ち上げていきましょう。

導入から、テーマの選定、ローカルサーバーの立て方まで、バージョンを意識しつつ紹介していきます。

1. 「 Hugo 」を導入しよう

Homebrew が入っていれば、下記のコマンドで簡単に導入できます。

brew install hugo

ただ、ここで注意点があります。
下記のコマンドで Homebrew をアップデートしていないと、現在の Homebrew にあったバージョンで Hugo をインストールしてしまいます。

brew update

導入後、 Hugo のバージョンを変えるのは容易ではないので、注意して導入してください。
Hugo が入れば、下記のコマンドでバージョンを確認できます。(現バージョン v0.20.7)

hugo version

hugo-test のディレクトリができあがりますので、ディレクトリ構造を確認しましょう。

cd hugo-test
ls

上記のようなディレクトリ構造になっております。
基本的には、 themes/ ディレクトリに Hugo で用意されているテーマをインストールして、大枠を作っていきます。

それでは、テーマを選定してインストールしていきましょう。

2. テーマを選定しよう

まず、テーマを選定していきましょう。

http://themes.gohugo.io/

試しに右上の「 Beautiful Hugo 」を選んでみます。

ここで注目するべきは、 MINIMUM HUGO VERSION です。
その名のとおり、 Hugo の最小バージョンを示しています。

Hugo 現バージョンは v0.20.7 なので v0.17 は越えてます。
問題ありませんね。

それでは、このテーマをインストールしていきましょう。

テーマのページをスクロールすると Installation にインストール方法が書いてありますので、そのとおりに行っていきましょう。

ただ、 themes/ ディレクトリはすでにあるので、 mkdir themes は省きましょう。

cd themes
git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo

インストールできましたね。
それでは、ローカルサーバーを立ち上げていきましょう。

3. ローカルサーバーを立ち上げよう

立ち上げる前に記事を作成しましょう。
themes/ から１つ階層をあがったところで下記のコマンドを叩いてください。

hugo new post/test-post.md

すると、 content/post/ の直下に test-post.md というファイルが作成されるので、開いて見ましょう。

date は日付
draft は下書きかどうか
title は記事のタイトルを表しています。

「+++」より下にマークダウンで記事の文章を書くことができます。

記事もできたので、ローカルサーバーを立ち上げていきましょう。
下記のコマンドをプロジェクトルートで叩いてください。

hugo server -t beautifulhugo -D

-t はテーマ名を指定するためのオプションです。
-D は記事ファイル中で draft = true になっている記事も表示します。

それでは http://localhost:1313/ にアクセスしてみてください。

立ち上がりましたね。これで完了です。

いかがでしたでしょうか？
今回は、 Hugo の概要からローカルサーバーの立ち上げまでを説明しました。

Hugo と Netlify で簡単にサイト運用もできるので試してみてください。
ちなみにですが、 Netlify でビルドするときにもバージョンに注意してください。
現在、 Netlify に搭載されている Hugo のデフォルトのバージョンは v0.17 です。
違うバージョンでビルドしたければ、 hugo コマンドを hugo_0.18 のように指定してビルドしてください。

Netlify について詳しくはこちらの記事を参考にしてください。

「 Netlify 初心者必見！ Bitbucket 上のコードをビルドして静的サイトを公開してみる」

次回は Netlify CMS について書いていこうと思います。