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

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

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

サーバレスなブログ環境を実現するサービスアーキテクチャ : Git-based Jamstackの構成要素
サーバレスなブログ環境を実現するサービスアーキテクチャ : Git-based Jamstackの構成要素

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

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

ソフトウェアNext.jsHugoGatsbyJekyll
GitHub star数182068573015242044171
テーマ数231(不明)126(414)231(112)325(459)
ビューフレームワークReactGo templateReactLiquid
ビルド速度(256ページ)315.11秒0.11秒33.22秒0.89秒
ページ読込時間適性(LCP)425.8%70.3%41.2%76.4%
レイアウト崩れ耐性(CLS)450.0%74.2%65.7%81.1%
Webリソース量41838KB1025KB1739KB753KB
├ JS量746KB177KB645KB129KB
└ CSS量14KB29KB1KB23KB

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

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

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

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

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

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

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

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

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

ベンダNetlifyVercel
商品プラン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 HugoDocsy
ビルド時間/回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より。 ↩︎ ↩︎ ↩︎