MacにGatsbyの環境を構築

静的サイトジェネレータのGatsbyとNetlifyの組み合わせでブログを作りたいと思い、まずは手元のMacにGatsbyをインストールしてみることにしました。

やりたいこと

MacにGatsbyを入れる
サンプルを出力させる

参考リソース

Set Up Your Development Environment | GatsbyJS

0. Set Up Your Development Environment

Install Node.js

とりあえずnodebrewで最新版を入れた。ところ後に失敗。

nodeのバージョンを、チュートリアルと同じv8.11.3にそろえてもう一度やったところうまくいったので、「とりあえず最新入れとけばいいでしょ」というのはやめて、チュートリアルに従っておいたほうがよいでしょう。

私はnodebrewをつかっているので、以下コマンドで入れました。

$ nodebrew install-binary v8.11.3

Check your Node.js installation

$ node -v
v8.11.3
$ npm -v
6.4.1

Install Git

Skip.(済んでいるため)

Install Gatsby CLI

$ npm install --global gatsby-cli
/Users/yoshikiito/.nodebrew/node/v8.11.3/bin/gatsby -> /Users/yoshikiito/.nodebrew/node/v8.11.3/lib/node_modules/gatsby-cli/lib/index.js
+ gatsby-cli@2.4.6
added 206 packages in 11.811s

Check your Gatsby CLI installation

$ gatsby -v
2.4.6
$ gatsby --help
Usage: gatsby <command> [options]

コマンド:
  gatsby develop                   Start development server. Watches files,
                                    rebuilds, and hot reloads if something
                                    changes
  gatsby build                     Build a Gatsby project.
  gatsby serve                     Serve previously built Gatsby site.
  gatsby info                      Get environment information for debugging
                                    and issue reporting
  gatsby repl                      Get a node repl with context of Gatsby
                                    environment, see (add docs link here)
  gatsby new [rootPath] [starter]  Create new Gatsby project.

オプション:
  --verbose      Turn on verbose output            [真偽] [デフォルト: false]
  --no-color     Turn off the color in output      [真偽] [デフォルト: false]
  -h, --help     ヘルプを表示                                          [真偽]
  -v, --version  バージョンを表示                                      [真偽]

Create a Gatsby site

チュートリアルの手順に従い、まずはhello-worldというサンプルを作成します。

$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-hello-world.git
Cloning into 'hello-world'...
remote: Enumerating objects: 247, done.
remote: Total 247 (delta 0), reused 0 (delta 0), pack-reused 247
Receiving objects: 100% (247/247), 547.13 KiB | 513.00 KiB/s, done.
Resolving deltas: 100% (119/119), done.
success Created starter directory layout
info Installing packages...

> fsevents@1.2.4 install /Users/yoshikiito/blog/hello-world/node_modules/fsevents
> node install

[fsevents] Success: "/Users/yoshikiito/blog/hello-world/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm WARN gatsby-starter-hello-world@ No repository field.

added 1578 packages in 27.762s

$ cd hello-world/
$ gatsby develop
success open and validate gatsby-configs — 0.006 s
success load plugins — 0.130 s
success onPreInit — 0.075 s
success delete html and css files from previous builds — 0.005 s
success initialize cache — 0.007 s
success copy gatsby files — 0.064 s
success onPreBootstrap — 0.013 s
success source and transform nodes — 0.019 s
success building schema — 0.178 s
success createPages — 0.001 s
success createPagesStatefully — 0.044 s
success onPreExtractQueries — 0.001 s
success update schema — 0.078 s
success extract queries from components — 0.026 s
success run graphql queries — 0.015 s — 2/2 170.55 queries/second
success write out page data — 0.008 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.208 s

  ERROR  Failed to compile with 2 errors                              16:59:39

These dependencies were not found:

- gatsby-link in ./.cache/gatsby-browser-entry.js
- gatsby-react-router-scroll in ./.cache/root.js

To install them, you can run: npm install --save gatsby-link gatsby-react-router-scroll
✖ ｢wdm｣: 
ERROR in ./.cache/gatsby-browser-entry.js
Module not found: Error: Can't resolve 'gatsby-link' in '/Users/yoshikiito/blog/hello-world/.cache'
  @ ./.cache/gatsby-browser-entry.js 9:0-84 35:0-38:48 35:0-38:48 35:0-38:48 35:0-38:48 35:0-38:48 35:0-38:48
  @ ./.cache/dev-404-page.js
  @ ./.cache/sync-requires.js
  @ ./.cache/app.js
  @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./.cache/root.js
Module not found: Error: Can't resolve 'gatsby-react-router-scroll' in '/Users/yoshikiito/blog/hello-world/.cache'
  @ ./.cache/root.js 13:0-59 68:31-44
  @ ./.cache/app.js
  @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

エラーになってしまいました。言われた通りに、無いものを入れてみます。

$ npm install --save gatsby-link gatsby-react-router-scroll
npm WARN gatsby-starter-hello-world@ No repository field.

+ gatsby-react-router-scroll@2.0.2
+ gatsby-link@2.0.7
added 2 packages in 9.774s

追加できたっぽいので、再度develpを試みる。

$ gatsby develop
success open and validate gatsby-configs — 0.008 s
success load plugins — 0.159 s
success onPreInit — 0.115 s
success delete html and css files from previous builds — 0.011 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.021 s
success copy gatsby files — 0.064 s
success onPreBootstrap — 0.007 s
success source and transform nodes — 0.015 s
success building schema — 0.109 s
success createPages — 0.001 s
success createPagesStatefully — 0.036 s
success onPreExtractQueries — 0.003 s
success update schema — 0.079 s
success extract queries from components — 0.024 s
success run graphql queries — 0.011 s — 2/2 244.76 queries/second
success write out page data — 0.006 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 2.761 s

  DONE  Compiled successfully in 1682ms                               17:02:29


You can now view gatsby-starter-hello-world in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.
  WAIT  Compiling...                                                  17:02:29

ℹ ｢wdm｣: Compiling...
  DONE  Compiled successfully in 22ms                                 17:02:29

ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

今度はうまくいきました。

View your site locally

http://localhost:8000/

にアクセスしてHello Worldの表示が確認できた。（上記画像は、少し中身をいじったもの）

ここまでで、Gatsbyを入れてサンプルサイトを立ち上げるまで、ができました。

まとめ

このあと、サイトのコンテンツを軽くつくってみるなどしたのですが、CMSなしで自分でGatsbyでブログ更新しつづけるの、しんどそうだなというのが正直な感想でした。

Gatsbyはフロントまわりがわかってる人には良いのかもですが、私はそれほど詳しくないのでHugoのほうが易しそうです。（でも、やってみたからこれがわかったわけで。進歩進歩。）