Gatsby.js が動くことを検証(Windows10環境)

以前 Gatsby.jsを触ろうとして失敗した話(Windows10環境) で挫折した Gatsby.js ですが、ふと改めて試したところ動いたので記録としてメモしておきます。

手順

まず PowerShell を管理者実行して

> npm install windows-build-tools -g

で windows-build-tools を入れ直します。10分強くらい時間がかかりましたが成功。

途中、 Python のインストールが successfully で完了した後にコントロールが戻ってこないので焦りましたが、根気強く待ち続けると configure 等が走って最後のコントロールが戻るところまで完了しました。この粘り強さが必要だったのですね……。

> mkdir gatsby_revenge
> cd .\gatsby_revenge\

続いてディレクトリを掘ります。

> yarn add gatsby-cli

## 略

それから、 Gatsby.js の CLI をインストール。グローバルではなくローカルで。

このインストールもかなり時間がかかりましたが完了。

> gatsby --version
Gatsby CLI version: 3.0.0

CLI のバージョンが無事表示されました。

> gatsby new gatsby-site
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git

Cloning into 'gatsby-site'...

## 略

info Initialising git in gatsby-site

info Create initial git commit in gatsby-site
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd gatsby-site
  gatsby develop

新規サイトを作成します。コマンドが完了したら、末尾のガイドに沿ってディレクトリに進んで develop 。

>  cd gatsby-site
> gatsby develop
success open and validate gatsby-configs - 0.240s
success load plugins - 5.348s
success onPreInit - 0.057s
success initialize cache - 0.014s
success copy gatsby files - 1.726s
success onPreBootstrap - 0.109s
success createSchemaCustomization - 0.012s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.131s
success building schema - 0.483s
info Total nodes: 37, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.005s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.261s
success update schema - 0.048s
success write out redirect data - 0.006s
success Build manifest and related icons - 0.172s
success onPostBootstrap - 0.181s
info bootstrap finished - 25.881s
success onPreExtractQueries - 0.002s
success extract queries from components - 2.455s
success write out requires - 0.166s
success run static queries - 0.131s - 2/2 15.31/s
success run page queries - 0.022s - 3/3 135.61/s
⠀
You can now view gatsby-starter-default 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
⠀
success Building development bundle - 28.511s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.204s
success write out requires - 0.002s
success run page queries - 0.013s - 1/1 74.24/s
success onPreExtractQueries - 0.004s
success extract queries from components - 0.189s
success write out requires - 0.002s
success run page queries - 0.022s - 1/1 44.48/s

お、前回とは違ってエラーでコケませんでした。

http://localhost:8000/ にアクセスすると、サンプルサイトが表示されました。

……前回失敗した原因はおそらく windows-build-tools のインストールが最後まできちんと完了していなかったせいと思われます。

参考

• [React] Windows 10上でGatsbyJSを利用して開発用サーバでデフォルトの静的サイトを立ち上げる – Qiita