Git-based Jamstackなブログ環境を構築するならプラットフォームは「Hugo + GitLab Pages」

無料かつサーバレスで、Git-based Jamstackなブログサイトを構築するなら、プラットフォームはHugo + GitLab Pagesがお薦めです。 他の代表的な静的サイトジェネレータ/プラットフォームサービスと比較しながら、その理由を説明します。

下記は、Git-based Jamstackサービスセットの構成要素です。 ここでは、Jamstackの肝となる静的サイトジェネレータと、Git/ビルド/ホスティングを行うプラットフォームサービスを比較します。 なお、基本プラットフォームとして比較したいので、オプショナルな位置付けの動的コンテンツサービスは対象外とします。

静的サイトジェネレータ比較

Site Generators - Jamstack.orgの上位4つを比較します。

ソフトウェア Next.js Hugo Gatsby Jekyll
GitHub star数1 82068 57301 52420 44171
テーマ数2 31(不明) 126(414) 231(112) 325(459)
ビューフレームワーク React Go template React Liquid
ビルド速度(256ページ)3 15.11秒 0.11秒 33.22秒 0.89秒
ページ読込時間適性(LCP)4 25.8% 70.3% 41.2% 76.4%
レイアウト崩れ耐性(CLS)4 50.0% 74.2% 65.7% 81.1%
Webリソース量4 1838KB 1025KB 1739KB 753KB
├ JS量 746KB 177KB 645KB 129KB
└ CSS量 14KB 29KB 1KB 23KB

Go templateやLiquidといったテンプレート言語のわかりやすさを好むか、Reactといったプログラミングフレームワークの柔軟さを好むか、意見が分かれそうですが、私は下記理由から、Hugoがベストだと思います。

  • ビルドが速い。
    ビルドコンテナサービスが定めたビルド時間上限を守るためにも、ビュープログラム変更後の動作確認や投稿プレビューを素早く行うためにも、ビルド速度はとても重要。
  • コアWebバイタル(Googleの閲覧者エクスペリエンス指標)が高い。
    JSよりCSSを多用しているので、ページ読込/表示が速く、表示後のレイアウトシフトも少ない、閲覧者UXの高いサイトが作れる。
  • テーマが充実。
    Go templateを知らなくても、好きなテーマを選ぶだけでサイトの着せ替えが楽しめる。

サーバレスでGit-based Jamstackなブログ環境を実現するプラットフォームサービス比較

Git + ビルド + ホスティングのプラットフォームサービス比較

単体でGit-based Jamstackなブログサイトが構築できる、オールインワンタイプのプラットフォームサービスです。 大手2つを比較します。

ベンダ GitHub GitLab
商品プラン Free(無料) Free(無料)
プロジェクトタイプ Pages Pages
Git公開度 public public, private
Git容量上限 1GB/リポジトリ 5GB/リポジトリ(現状は10GB)
Git転送量上限 (不明) 10GB/月
ビルド時間上限 publicリポジトリは無制限 publicリポジトリは50000分/月, privateリポジトリは400分/月
ビルド回数上限 10回/時間 無制限
ホスティング容量上限 1GB/プロジェクト プロジェクトのリポジトリ容量内で無制限
ホスティング帯域上限 100GB/月 無制限
静的サイトジェネレータテンプレート Jekyll Gatsby, Hugo, Jekyll, GitBook, Hexo等
商用利用 不可

privateリポジトリに対応していて、各種静的サイトジェネレータのためのテンプレートが用意されているGitLabの方が、多くの人にとって使いやすいと思います。 また、広告/アフェリエイトで収益を得たい場合は、商用利用可のGitLabの方が安全です(広告/アフェリエイトは商用と見做される可能性あり)。

ビルド + ホスティングのプラットフォームサービス比較

別のGitサービスと組み合わせて使用する、ビルド+ ホスティングのみのプラットフォームサービスです。 大手2つを比較します。

ベンダ Netlify Vercel
商品プラン Starter(無料) Hobby(無料)
ビルド時間上限 300分/月 6000分/月
ビルド回数上限 (不明) 100回/日
ホスティング容量上限 無制限 (不明)
ホスティング帯域上限 100GB/月 100GB/月
商用利用 不可

商用利用しない前提で、ビルド時間が6000分/月のVercelに軍配が上がります。 GitLab Pagesのビルド時間400分/月では足りないケースでは、Vercelと組み合わせて使用することが選択肢になり得ます。

結論 : Hugo + GitLab Pagesがお薦め

静的サイトジェネレータには、ビルド最速かつコアWebバイタルの高いHugo、プラットフォームサービスには、privateリポジトリ対応かつ広告/アフェリエイトでも安心なGitLab Pages、この組み合わせが必要十分な組み合わせだと思います。

GitLab Pagesの少な目なビルド時間が気になるところですが、私の実績では問題ありませんでした。 サイトリニューアルのため、平日3時間 + 休日8時間びっちりブログ開発に明け暮れた際のビルド時間は250分/月程度、GitLab Pagesのビルド時間上限の63%ほどで収まりました。

なお、使用するテーマによって、git sub modduleによる依存関係最新化や追加パッケージのインストール、HugoからPostCSSを呼ぶ等の事情が異なるため、ビルド時間が大きく変動します。上記250分/月は、テーマにDocsyを使用した場合の話です。

テーマ Beautiful Hugo Docsy
ビルド時間/回 17秒 45秒
├ Docker起動 9秒 13秒
├ Gitからプル 1秒 13秒
├ Hugo環境準備 1秒 11秒
├ Hugo実行 0秒 3秒
├ 生産物登録 2秒 3秒
├ 作業域クリア 1秒 1秒
└ 他 3秒 1秒

  1. GitHub star数は、2022/02/27時点の値。 ↩︎

  2. テーマ数は、2022/02/27時点のJamstack Themesの値。カッコ内は、各公式サイトに登録されているテーマ数。 ↩︎

  3. ビルド速度は、Comparing Static Site Generator Build Timesより。静的サイトジェネレータのみの時間であり、ビルドコンテナがビルド時間として計測する範囲(例: ビルド用Dockerイメージをプル/起動して、ソースをGitからプルして、静的サイトジェネレータを起動して…)の一部であることに注意。 ↩︎

  4. LCP/CLS/リソース量等は、Jamstack - Web Almanacより。 ↩︎ ↩︎ ↩︎