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秒 |
GitHub star数は、2022/02/27時点の値。 ↩︎
テーマ数は、2022/02/27時点のJamstack Themesの値。カッコ内は、各公式サイトに登録されているテーマ数。 ↩︎
ビルド速度は、Comparing Static Site Generator Build Timesより。静的サイトジェネレータのみの時間であり、ビルドコンテナがビルド時間として計測する範囲(例: ビルド用Dockerイメージをプル/起動して、ソースをGitからプルして、静的サイトジェネレータを起動して…)の一部であることに注意。 ↩︎
LCP/CLS/リソース量等は、Jamstack - Web Almanacより。 ↩︎ ↩︎ ↩︎