ランディネットワークの BLOG

Hugo を初めて使ってみた感想

Created at:
Category: Hugo

私たちの事務所「ランディネットワーク」の Web サイトですが、ようやくリニューアル作業を開始しました。

今回のリニューアル作業では大きな変更がありました。 それは、いままで散々お世話になってきたコンテンツ管理システム( CMS )の利用をやめて、 Hugo という静的サイトジェネレータを用いているところです。

サイトジェネレータは素晴らしいです。

まだ既存のサイトをコピペしてページ作成しているだけなので、見栄えなどの不完全なところが多数残っています。 (レイアウトの崩れや画像のサイズが不釣り合いだったりします。)

それでも、コンテンツの作成が楽すぎてまったく苦痛を感じません。 HTML ではなく Markdown で記述出来ることで、タイプ数がかなり減らせそうです。

また、CMS のようにウェブブラウザを用いた更新をしなくても良くなり、使い慣れたテキストエディタを使うことが出来ます。 操作が楽になった分、文章作成に集中できそうです。

数ある静的サイトジェネレータのなかから Hugo を選んだ理由

使い方やカスタマイズ方法、テーマの作成等でつまずいたときに、 日本語の情報があると楽です。そういう意味から、 Qiita での情報が多い(日本人に人気) HugoJekyll を候補にしました。

そして、Hugo のほうが速いという記述をどこかのサイトで見かけ、最初に試したのが Hugo でした。 Jekyll を試すまでもなく、Hugo に決めてしまいました。

Web サーバを Netlify に変更

サイトジェネレータを使ったこと以外にも大きな変更があります。

今までは事務所に設置していたサーバでコンテンツを公開していましたが、今回は Netlify というクラウドサービス を利用しています。

Netlify は、静的サイトのホスティングサービスで、 GitHub などのリポジトリと連携して自動デプロイが可能です。また、 Hugo によるビルドにも対応しています。

PC で 好きなエディタで記事を作成し、使い慣れた git コマンドで GitHub に push すると Web サーバに自動デプロイされるという Web コンテンツの公開フローを作成しました。

(2019年 10月 2日 追記: Netlify については、近いうちに別の投稿にまとめます)

Hugo + Netlify での Web コンテンツ公開までの手軽さ

私たちが構築した仕組みでは、 Web コンテンツの公開までの手順は以下のようになります。

  1. hugo new で記事の雛形を作成
  2. お気に入りのテキストエディタで記事の雛形を開き、タグと文章を記述する
  3. hugo server -D で記事の文章を確認しながら修正する
  4. 記事の内容を確認し、公開できると判断したら draft (下書き中フラグ)を false に変更
  5. git commit && git push で GitHub に送る
  6. GitHub が Netlify の Webhook を呼び出す
  7. Netlify が Deploy を始める。と同時に Slack の Webhook を利用して開始を通知する
  8. Deploy が終了し、Netlify が成功、失敗のどちらかを Slack に通知する

お気に入りのテキストエディタに Emacs を利用している私の場合、記事の作成が楽なだけでなく、 git commitgit push もキーボードに割り当てられているために少ないキーストロークで実行されます。 それがまた今回の仕組みのお気に入り理由の一つです。

下書き内容の確認

MovableType や WordPress などの一般的な CMS と同様に、Hugo も draft (下書き)に対応しています。 そのため、うっかり GitHub に push してしまっても draft 状態の記事であれば公開はされません。

ローカル環境で draft の記事を閲覧するには、以下のコマンドで Hugo サーバを起動してください。

hugo server -D

ローカル環境で Hugo サーバを起動した場合は、Webブラウザで http://localhost:1313/ にアクセスすると表示されます。

また、Live プレビューなので、コンテンツのソースファイルを変更すると、自動的に再読込されます。

テンプレート

今のところは全然わかってないので、少しずつ理解していこうと考えています。

今は、 Ananke という Hugo のテーマ を利用していますが、 テンプレートの文法を理解すれば、うちのサイトオリジナルで作りたいとは思っています。

(2019年 10月 2日 追記: テンプレートについても、近いうちに別の記事にまとめる予定です)

今後

Netlify も Hugo も覚えることが多すぎて、なんとなく全体がつかめた程度です。 もう少し深くまで理解できるようになりたいと思っています。

また、せっかくサイトが作れるようになったので、初期設定から公開までの手順をまとめた記事を作ろうと思います。

あと、知人エンジニアに教えてもらった Firebase Hosting も気になっています。GitHub Pages もいいなあ。

Jekyll はもういいかな。Hugo よりも優れている点があれば教えて欲しいけどどうでしょうか?