beta

静的サイトジェネレータ・GridsomeとHUGOの比較

静的サイトジェネレータとして、Vue.js(Javascirpt)ベースのGridsomeと、GOベースのHUGOを比較してみました。

公開日:2021年2月9日

静的サイトジェネレータとしての機能はHUGOのが上

開発の長さも関係しているかと思いますが、静的サイトジェネレータとしての機能はHUGOのが上です。フロント側でVue.jsを使わないのであれば、Gridsomeを選ぶ理由はないかと思います。

HUGOであれば、TOCやタクソノミーなどの静的サイトジェネレータに絶対欲しい基本的な機能が全て揃っています。テンプレートの拡張も簡単ですし、多言語サイトの自動生成なども簡単です。この辺りはGridsomeはまだまだというイメージです。

また、簡単にブログなどを立ち上げるにも、テーマがあるHUGOのが楽です。地味に大きいのはビルド時間。HUGOの方が圧倒的に速いです。ここはCI/CDのQuotaにも影響するので結構でかいですね。

SPA的な静的サイトを作るならGridsome

GridsomeのメリットはVue.jsベースというところ。Vue.jsなので、SPA的な静的サイトを驚くほど簡単に作れます。HUGOでは出来ないような高機能なサイトも当然ですが、構築可能です。

APIからデータを動的に取得してレンダリングも出来ますし、静的に表示する部分はジェネレータで事前にファイル出力しておけます。SPAサイトを構築しつつ、決め打ちコンテンツは出力済みデータで高速ロードしたいという場合は、Gridsomeはかなり有効です。

SPAはSEOに弱いので、そのあたりの欠点を埋めてくれるという意味でも、Gridsomeは今後ユーザーが増えてきそうな気がします。

Vue.js好きならGridsome

これは単純な好みの問題ですが、個人的にはReactよりもVue.js派なので、Vue.jsで静的サイトを書けるというのはかなり大きいです。Goもだいぶ慣れてきましたが、普段使いの言語でプログラムを書けるメリットは大きいですね。

あと地味に大きいのが、ドキュメント周りがGraphQLになっている点。クエリ言語になってくれることで、データをかなり自由に操作できます。ここはドキュメントの生成はフレームワーク任せなHUGOにはない大きなメリットです。

多少機能不足はありますが、Vue.js使いならGridsomeはメインの静的サイトジェネレータにしても全然良い気がします。


こうしてみてみると、Javascriptに抵抗がないなら、自由度があってやろうと思えば何でも出来るのがGridsome、全て揃っていてすぐにスタート出来るのがHUGOという感じでしょうか。

個人的には2021年は新規案件はGridsomeをベースに開発していこうと思っています。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード