Hugo を使ったウェブサイトの作成: 技術選定

TL;DR

これはアドベントカレンダーの8日目の記事です。 今日から数回に渡って、このウェブサイト https://astropengu.in の作成方法についてメモしていきます。 まずはウェブサイトの作成に至った経緯と技術選定についてです。

Why personal website?

このウェブサイトを作ろうと思った経緯について簡単にまとめておきます。 研究を進めていく上で必要な情報のまとめや、何かのツールの使い方の tips を公開する場として、個人ウェブサイトは必要だと思っていました。 学生時代に作成したサイトは大学のサーバに置かせてもらっていましたが (現在もご好意で置かせてもらっていますがそのうち削除すると思います) 、研究者としてしばらくは職場の移動も多いので、研究機関に縛られない環境でウェブサイトを作成する方が色々と楽であると思うようになりました。 ついでに独自ドメインも取得することで、名刺代わりにもなるでしょう。

Selecting tools

というわけでウェブサイトを作成するための技術選定です。 2018年現在、ウェブサイトの公開する手段は無数にあるわけですが、私は以下の点を特に強く意識してツールを選びました。

プレーンテキストフォーマットで楽に書けること: 記事がプレーンテキストで書けて保存できることで、バージョン管理システムによる管理が容易になります。さらに、特定のフォーマットに従っていることで、将来的にツールを変えた時に移行作業の負担も減ることが予想できます。楽に書けるということを踏まえると、これは軽量マークアップ言語の Markdown ほぼ一択となりそうです。

特定のウェブサービスに依存しないサイトであること: これは楽に書くということとトレードオフの関係にあるかもしれません。特定のサービスを使うとウェブサイトの管理が楽になる一方、そのサービスが終了してしまった時にサルベージが難しくなります。そこで、Markdown で書かれた記事から動的にページを生成するのではなく、静的な HTML ページを完全に生成することを考えます。こうすることで、生成されたウェブサイトをホストするためのサーバやサービスを転々とできるので、依存度がぐっと下がります。静的なウェブサイト生成 (ビルド) には、静的サイトジェネレータ (static site generator) と呼ばれるツールが使えます。オープンソースで様々なツールが利用可能ですが、ビルドが高速でバイナリファイル一つで動作するという理由で Hugo を選択しました。

さらに、必須ではありませんが、記事を更新するハードルを下げることも大事なので、ウェブサイトのバージョン管理やビルドについてもなるべく自動化するための仕組みがほしいところです。

Current tools

以上より、2018年12月現在、このウェブサイトは以下のツールやウェブサービスを使って作成・運用しています。 このうち費用がかかっているアイテムには 💰 が付いてます。

Item Description
Hugo Golang (Go 言語) で書かれた静的サイトジェネレータ。Markdown で書かれた記事をビルドし、静的な HTML ページを生成するのに使います。
Google Domains 💰 ウェブサイトの独自ドメイン (astropengu.in) の取得・管理に使います。ちなみに .in はインドの ccTLD で、年間 1,500 円ほどで取得しています。
Git & GitHub ご存じ分散型バージョン管理システムとレポジトリのホスティングサービス。Hugo の設定ファイルとビルド前の記事データ (Markdown, 画像等) のレポジトリの管理に使います。これらは astropenguin/website ですべて公開されています。
GitHub Pages GitHub が提供するレポジトリに置かれたウェブサイトのホスティングサービス。Hugo でビルドした生成物を公開するのに使います。
Travis CI ビルドやテストを行うためのオンラインの継続的インテグレーション (CI) サービス。記事を作成・更新してプッシュするたびに、レポジトリの取得 → Hugoでビルド → 生成物をレポジトリの gh-pages ブランチにプッシュ、という一連の流れを自動的に行い、ウェブサイトを自動更新するのに使います。

こうしてみると、利用しているツールは多いですね。 ただし、Git(Hub) と CI はウェブサイト以外にも使える汎用性のある技術なので、学ぶ価値が大いにあります。 独自ドメインに関しては、ウェブサイトを公開するというだけなら特に必要ありません。 ということで、ウェブサイトのためだけに新規に学ぶのは Hugo の使い方ということになります。

Other choices?

もし、ウェブサイトを公開するためのサーバを自由に使えるのだとしたら、フラットファイル CMS と呼ばれるツールも選択肢の一つかもしれません。 これは、記事を Markdown ファイルで管理しつつ、サーバ上でページを動的に生成するタイプのツールなので、記事の管理とウェブサイトの公開の手間という意味ではバランスが取れている気がします。 2018年現在でおそらく最も情報があって使いやすいのは Grav だと思います (私も少しの間使ってました)。

また、研究プロジェクト単位で複数人かつクローズな情報共有という意味では、Kibelaesa をはじめとするオンライン Markdown 情報共有ツールが有用です。 これについては、どこかの機会に別記事でまとめておきたいところです。

References

Built with Hugo
Theme Stack designed by Jimmy