はてなブログからHugoに移行した理由

※記事内に商品プロモーションを含むことがあります。

はじめに

独自ドメインで格安にブログを運営するため、無料版はてなブログからHugoに移行した。ホスティングサービスにGithub Pagesを利用することで、運営コストはドメイン代のみにできた。

移行の理由

2017年6月に技術系ブログ (Helve’s Python Memo) を始めた当初、記事の作成を続けられるか分からなかったため無料版のはてなブログで始めた。しかし、書くことによる知識の定着を実感でき、意外にもアクセスが集まったこともあり、3年間も続けることができた。ありがとうございます。

今後もブログを続けたいので、独自のドメインを取得したい気分になった。はてなブログを有料版にしようかとも考えたが、折角なので他のブログツールと比較して選ぶことにした。

ブログツールの選定

ブログツールを選ぶ基準は以下の通りである。

必須要件

Markdownを使って書ける
シンタックスハイライトを使ってコードを表示できる
数式を記述できる
独自ドメインを利用できる

希望要件

学習コストが低い
ブログの記事をGitで管理できる
コメント欄
Twitterとの連携機能
アクセスが高速

ブログツールの比較

まず、以下のツールを比較・検討した。

ブログサービス（はてなブログ、Note等）
WordPress
静的サイトジェネレータ(Hugo, Hexo等)

ブログサービス上で独自ドメインを使用する場合、有料プランに移行する必要がある。はてなブログのまま有料版に移行すると最も手間が少ないが、年間7,200円（2年契約の場合）+ドメイン代が掛かる点がネックである。

次に、WordPressの場合、XFREEがWordPress用のサーバを無料で提供しており、ドメイン代だけで済む。
ただし、日本語のドキュメントが豊富であるとはいえ、WordPressの使い方を覚える必要がある。また、WordPressは利用者が多いが故にハッキング被害が多く、プラグインを定期的にアップデートする必要があるらしいが、そんな箇所にあまり時間を掛けたくない。

最後に、静的サイトジェネレータの場合、Github PagesやNetlifyなどの無料ホスティングサービスが使えるため、ドメイン代だけで済む。日本語のドキュメントは少ないが、WordPressと比較すると機能が限られているため、そこまで学習コストが掛からないと判断した。

そのため、静的サイトジェネレータを使うことにした。

静的サイトジェネレータの選定

静的サイトジェネレータの選定には、以下のサイトを参考にさせていただいた。

他のサイト等も調べると、以下の静的サイトジェネレータが広く使われているようである。

GatsbyJS
Next.js
Hugo
Hexo
Jekyll

これらの中から、学習コストが低そうなHugo (Go言語製) とHexo (Node.js製) を実際に使い、Hugoを採用した（なお、筆者はフロントエンドの技術に特に詳しいわけではない）。使った感想は以下の通り。

Hugo

Hugoでは、300種類以上のテーマが用意されており、ユーザが1つ選んで、必要に応じてカスタマイズして実装することになる。
Complete List Hugo Themes

中でもZzoというテーマは2カラムのオーソドックスなブログの形式であり、公式ドキュメントもある程度充実しており、個人的に気に入った。
また、いくつかの日本語ブログでもHugoとZzoの導入について記事があり、参考にできそうであった。
これらの日本語サイトやZzoのデモサイトを見ると、数式の記述ができ、コメント欄を設置できるため、要件に合致している。

Hugoではテーマごとにカスタマイズの方法が大きく異なっているのが難点だが、頻繁にテーマを変更しなければ特に問題にならない。

HugoはHTMLファイルのビルド処理が高速であることも大きなメリットである。一部のホスティングサービスでは自動デプロイ機能を提供しているが、ビルド時間に対して制限がある。例えば、2021年1月3日現在、Netlifyの無料プラン(STARTER)では、ビルド時間は300分/月に制限されている。しかし、試しにNetlifyでHugo(記事数15)をビルドすると1分も掛からなかったため、ビルド時間の制約は実用上問題ない。

Hexo

Hexoも同様に、300種類以上のテーマが用意されている。
Themes Hexo

こちらもインストールして使ってみたが、標準の機能が少なく、機能を追加するためにプラグインを導入する必要がある。プラグインの管理はNode.jsを使うが、筆者はNode.jsを触ったことがないため少々ハードルが高い。また、サイトを作り込みたい場合には良いが、サイトの構築自体に時間を掛けたくないという要望にはマッチしなかった。

したがって、Hugoを導入することにした。

ホスティングサービスの選定

次に、ホスティングサービス（静的サイトを公開するサーバの提供サービス）を選ぶ。以下のサイトを参考にさせていただいた。

無料枠の転送量が100GB/月である、Github PagesとNetlifyの二択となった。

アクセス速度の観点では、Github Pagesのサーバは日本国内にあるようだが、Netlifyのサーバはシンガポールにあるようで若干アクセスが遅い。
参考：Netlifyが日本からだと遅い - id_anatooのブログ

また、自動デプロイという点では、NetlifyではGitリポジトリのpushを検知して自動デプロイしてくれた。一方、Github PagesではGithub Actionという機能を使う必要があるが、なぜかうまく動作しなかった。そのため、ローカルでデプロイしてGithub Pagesにpushする必要があるのだが、これはスクリプトを組んで自動化できそうである。

結局、Github Pagesを採用することにした。

はてなブログとGithub Pagesのアクセス速度比較

静的サイトはアクセス速度が早いことが利点の1つであるため、GoogleのPageSpeed Insightsで速度を計測した。スコアは100点満点で、値が大きいほどアクセスが高速である。

このサイト (https://helve-blog.com/) は「実際の速度データが十分にありません」と表示されてスコアが出なかった。そこで、同じZZoテーマを使用しており、Github Pagesを使用しているHugoブログとして以下のサイトを測定させていただいた。
BAMBi’s Blog

旧ブログ（はてなブログ）を計測すると38点（モバイル版）であった。一方、Hugoブログでは88点（モバイル版）となった。
はてなブログではMathjaxを全ページで読み込んでいるため単純な比較はできないが、それでもHugo+Github Pagesが圧倒的に早い結果となった。