Vue.jsベースの静的サイトジェネレータGridsomeの感想

Gridsomeとは

Vue.jsベースで、静的サイト + Vue.jsサイトのコンビネーションになっている静的サイトジェネレータです。ReactのGatsby.jsという感じでしょうか。

Gridsome

上記の公式ページがGridsomeで出来ているので、公式サイトを触っていればどんなものなのかは何となくわかります。

Vue.jsは使いたいけど、SEO的には個別ページはプレーンなHTMLにしたいという方には最適な静的サイトジェネレータなっています。

Gridsomeの使い方

インストール

GridsomeはNode.jsベースのCLIがあるのでそちらをインストールします。

npm install -g @gridsome/cli

インストールができたら、ターミナルをリフレッシュすればgridsomeコマンドが使えるようになります。

新規プロジェクトの作成

新規プロジェクトの作成は、

gridsome create ディレクトリ名

で作成ができます。依存関係などもインストールされて、テンプレがインストールされます。

プレビューサーバー

プレビューサーバーの立ち上げは、プロジェクトルートで、

gridsome develop

と打てばlocalhostで出来ます。ホットリロードで開発ができるので、かなり便利です。

Starterで作った場合は、ローカルにレポジトリを持ってくるときに必要なnode_moduleがないため、

Unknown command develop

となってしまいます。

これは先ほどのグローバルなGridsome CLIのインストールが失敗しているのではなく、プロジェクトに依存モジュールがないことが原因なので、

npm install

で依存関係をインストールすれば使えるようになります。

ビルドする

公開時のビルドは、

gridsome build

でビルドします。生成結果は、Vue.jsと同様distディレクトリに出力されるので、Netlifyなどでホスティングする際は、distを公開ディレクトリに指定します。FTPでアップロードする際は、distディレクトリの中身だけアップロードすればOKです。

軽く触った感想

これまで、Vue.jsとHUGOを組み合わせて使うことが多かったのですが、これで単体で管理できるのでかなり便利です。出力結果も、あくまでVue.jsでレンダリングする（Javascript必須）NuxtやVuepressなどと違って、しっかりとHTMLファイルにページ情報が書き出されています。

試しにJavascriptをオフにして表示しても、しっかりとページはレンダリングされました。これで、Vue.jsの難点であるSEOのレンダリング問題点もクリアです。

ビルド時間は、HUGOなどの静的サイトジェネレータよりかはかかりますが、そもそもHUGOが爆速ですからね。ここは、実際にある程度の規模のサイトを作って見ると大きな差になってきそうです。

ContentfulなどのヘッドレスCMSとNetlifyなどのホスティングを組み合わせると、かなりWordPressに近い感じで記事管理もできるので、JAMstackもここまで来たかぁという感じですね。

Vue.jsベースの静的サイトジェネレータGridsomeの感想でした。

まだまだお試し段階なので、これからじっくり触って行こうと思います。