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

September 17, 2019

Category: Hugo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

お気に入りのテキストエディタに Emacs を利用している私の場合、記事の作成が楽なだけでなく、 git commit と git 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 よりも優れている点があれば教えて欲しいけどどうでしょうか？