静的サイトジェネレーターHugoの良いとこ悪いとこ

July 11, 2018 is8r design hugo

はじめまして。フリーランスのデザイナーの石原（@is8r_）と申します。 MF KESSAIさんでは業務委託のデザイナーとして創業当初よりお手伝いさせていただいております。

書いている事

MF KESSAI TECH BLOGは、静的サイトジェネレーターHugoで構築されておりまして、制作するにあたりアレコレ知見を得ることができたのでこちらでご紹介させていただきます。

Hugoの導入を検討されている方の参考になれば幸いです。

Hugoを採用した経緯

といっても単純な話なのですが、MF KESSAIではサーバーサイドの開発にGolangを採用していて、ブログを構築するにあたり、数ある静的サイトジェネレーターの中でもGolangで動いてるのがあるぞ！という事でHugoを採用する事となりました。 技術ブログ以外のMF KESSAIのサイト、コーポレートサイトやランディングページなども同様にHugoで構築されています。

静的サイトジェネレーターを採用したので管理画面は存在しないのですが、通常の更新業務は開発者でない担当者もブラウザ上でGitHubを開いてプルリクエストを作り、更新できるようになっています。その辺はまた別の記事ででも…

Hugoの良いところ

私自身普段から他のお仕事などでMiddlemanやHexoなど、いくつかの静的サイトジェネレーターを使用しているのですが、その中でHugoを触っていて「これは良い！」と思った箇所がいくつもあったので、まずはそちらをご紹介していけたらと思います。

サーバーが立ち上がるのが超早い！

まず、Hugoはローカルでサーバーを立ち上げるところから凄くてコマンドを叩いてからサーバーが立ち上がるまでの速度が爆速です。

Hugoの起動 Hexoの起動
よし！ブログを書くぞ！

…と思ってから、いざ書き始めるまで待たされるとなんかモチベーションが下がりますよね。この点においてHugoは非常に捗ります。

記事が書きやすい

マークダウンでスラスラ書ける、というのは他のツールでも同様です。しかし、例えば下書きをする時にHexoだとdraftフォルダに格納するという形式になっているので、コマンド打って記事を移動させることなどが必要となり面倒です。 その点Hugoは記事の先頭、Front Matterと呼ばれるエリアにymlとかtomlとかでdraft: trueと書き加えるだけでよくて、非常にシンプルです。

ショートコードが簡単に使用できる（例: 対話型エントリー）

タイトルの通りですが、WordPressのショートコードみたいなのが自前で簡単に実装できます。

例えばこんな感じの会話しているようなUIを作ろうと思ったら、

もしもしポリスメン？


下記のような感じでテンプレートを作っておいてlayouts/shortcodes/talk.html に格納しておけば…

<div class='talk is-{{ .Get "author" }}'>
  <div class="talk__inner">
    {{ .Inner | markdownify }}
  </div>
</div>

記事の中に下記のコードを記述するだけで表現できます。

｛{< talk author="garsue" >}}
 もしもしポリスメン？
｛{< /talk >}}

リダイレクトの容易さ

サイトを運用していると故あってURLが変わる事もあるかと思うのですが、Hugoを使用していた場合、マークダウンの頭に記載するFront Matterに配列を追加するだけでエイリアスを作成することができるようになっています。

aliases
- /posts/aliases/"
- /posts/hogehoge.html

…便利！

テーマの作成が柔軟

テンプレートを作成するにあたって共通のパーツをどう管理するのかが気になるところですが、Hugoではベースのテンプレート（Ruby on Railsみたいに親のテンプレート作って、その中にページが読み込まれる方式）からページを作る方法と、ブロックのテンプレート（WordPressみたいにパーツごとにテンプレートを作ってページ内に配置していく）をページに差し込んでいく方式のどちらも使用できるようになっていて、柔軟にサイトを構築する事ができます。

Hugoの困ったところ

逆に、使っていて困った部分ももいくつかありました。

記事の中に　{{　が入れられない..？

先ほどのショートコードの項でのコードの説明部分ですが、{{を打ち込もうと思ったらHugoだとマークダウンの解釈の前にショートコードが展開されてしまうみたいで{{から書き始められませんでした。なので結局大文字の{で記載しています… （エスケープも効かなくて、文字実体参照でも{が無くて大文字しか打てなかった…）

エラーの際の挙動が変

テンプレート内に記述しているGolang部分（変数を呼び出しているところとか）にエラーがあった時、通常ならページが表示されなくなると思いますが、Hugoではなんとエラーが出ずにその前の表示していたページが表示されます。 これでは開発中のどこかの時点でエラーが混入してしまっても気づくの遅れてしまって結構面倒でした。

まとめ

Hugoでブログを作成する一番最初のコマンド、hugo new site quickstartを実行するとブログを立ち上げるのに必要な最低限のファイル群が作成されます。

「ファイル群が」と書いたのですが、実際作成される要素は凄くシンプルな構成になっていて、最初はとてもびっくりしました。 （今はデフォルト記事と設定ファイルだけですが、昔はなんと空のディレクトリが作られるだけでした）

細かいところにまでGolangのSimplicityの哲学が込められていて、潔く、余分な事が嫌いな人にはしっくりくるような気がします。

RECENT ENTRIES
ARCHIVES
ABOUT