2019-10-16

Gridsome をインストールしてみる


DotAll の資料とか見ていて、 Gridsome という言葉が出てたので色々見てみた。
Gatsby の Vue.js 版といったかんじっぽい。

Gridsome と GraphQL をつかうところまでがとりあえずの目標という感じで。

Gridsome 公式サイト

Modern Site Generator for Vue.js - Gridsome
https://gridsome.org/

スターターがいくつか揃っている。

Gridsome - Gridsome
https://gridsome.org/starters/

まだ Craft CMS はない様子。

Gridsome インストール

$ yarn global add @gridsome/cli

このBootstrap ベースのスターターを使ってみる。

Gridsome - Gridsome
https://gridsome.org/starters/...
$ gridsome create gridsome-site https://github.com/LokeCarlsson/gridsome-starter-resume.git

 Clone https://github.com/LokeCarlsson/gridsome-starter-resume.git 1.9s
 Update project package.json 0.01s
 Install dependencies
  • Building fresh packages (4 of 4)
Error: Failed to install dependencies with yarn. Please enter gridsome-site directory and install dependencies with yarn or npm manually. Then run gridsome develop to start local development.

一旦 yarn で追加したほうを消してみる

$ yarn global remove @gridsome/cli

npm で入れ直す

$ npm install --global @gridsome/cli

$ gridsome create gridsome-site https://github.com/LokeCarlsson/gridsome-starter-resume.git

結局エラーは変わらないので、直接入れる。 --force でよかったのかどうか、、、はあるけど。

$ yarn global add @gridsome/cli

$ gridsome create gridsome-site

エラー

$ cd gridsome-site

$ yarn install --force

→ error Incorrect integrity when fetching from the cache

ということなので、こちらを参考にして

yarnのIncorrect integrity when fetching from the cacheではまった（初歩的？） - ulab
https://ulab.hatenablog.com/en...
$ yarn cache dir
$ yarn cache clean
$ yarn cache dir
$ yarn install --force

でインストール完了。

$ gridsome develop

で立ち上がって、 http://localhost:8080/ でこんな感じで見れた。

node のバージョン下げたりしたけど、関係なかったかもな。

node のバージョンを元に戻してみる。

$ nodenv local system
$ nodenv version
system

再度スターターで入れ直す

$ gridsome create gridsome-site https://github.com/LokeCarlsson/gridsome-starter-resume.git

 Clone https://github.com/LokeCarlsson/gridsome-starter-resume.git 3.74s
 Update project package.json 0.01s
 Install dependencies
  • Building fresh packages (4 of 4) ＜＜ここ結構時間かかる

→ error 

$ cd gridsome-site
$ yarn install --force

→ 色々エラー

エラーが出たので一旦すべて削除。

node のバージョン戻したからかも知れないので一旦デフォルトで再度やり直す。

$ node -v
v12.10.0

$ gridsome create gridsome-site

 Clone https://github.com/gridsome/gridsome-starter-default.git 1.82s
 Update project package.json 0.01s
 Install dependencies 36.47s

  - Enter directory cd gridsome-site
  - Run gridsome develop to start local development
  - Run gridsome build to build for production

エラーなくインストールできた。

$ cd gridsome-site/
$ gridsome develop

で問題なく立ち上がったのでとりあえずスターターの方かも知れないのだけど、直すのも手間なのでこれで始めることにする。

参考リンク