GatsbyCLIのインストール/プロジェクト作成/ローカルWebサーバーでの公開まで(Windows10)

GatsbyCLIのインストール/プロジェクト作成/ローカルWebサーバーでの公開までを解説しています。

■PC環境

・Windows10、Administrator(管理者)アカウント

・node version 14.15.0

・npm version 6.14.8

■Windows PowerShellを起動する

Windows10のデスクトップ画面に、「ここに入力して検索」と表示されている検索ボックスで「powershell.exe」と検索します。検索すると、powershell.exeが表示されますので、こちらをクリックします。クリックすると、Windows PowerShellのウインドウが表示されます。

■GatsbyCLIをインストール

npm install -g gatsby-cli

表示後、上記のコマンドを入力し、Enterキーを押します。

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

> windows-build-tools@5.2.2 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\windows-build-tools
> node ./dist/index.js

 

Downloading python-2.7.15.amd64.msi
[============================================>] 100.0% of 20.25 MB (3.24 MB/s)
Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\Administrator\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
[============================================>] 100.0% of 1.12 MB (1.12 MB/s)
Downloaded vs_BuildTools.exe. Saved to C:\Users\Administrator\.windows-build-tools\vs_BuildTools.exe.

Starting installation…
Launched installers, now waiting for them to finish.
This will likely take some time – please be patient!

Status from the installers:
———- Visual Studio Build Tools ———-
Successfully installed Visual Studio Build Tools.
——————- Python ——————–
Still waiting for installer log file…

Now configuring the Visual Studio Build Tools and Python…

All done!

+ windows-build-tools@5.2.2
added 147 packages from 102 contributors in 40.989s
PS C:\Users\Administrator> npm install -g gatsby-cli
npm WARN deprecated @hapi/joi@15.1.1: Switch to ‘npm install joi’
npm WARN deprecated @hapi/address@2.1.4: Moved to ‘npm install @sideway/address’
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
C:\Users\Administrator\AppData\Roaming\npm\gatsby -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\cli.js

> core-js@2.6.11 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> gatsby-telemetry@1.3.39 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\gatsby-telemetry
> node src/postinstall.js || true

> gatsby-cli@2.12.115 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli
> node scripts/postinstall.js

╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you’d like to opt-out, you can use `gatsby telemetry –disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝
Success!

Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\gatsby-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ gatsby-cli@2.12.115
added 596 packages from 528 contributors in 61.711s

Enterキーを押すと、インストールが開始されます。開始後、しばらくするとインストールが完了となります。

■GatsbyJSのプロジェクトを作成する

完了後、GatsbyJSのプロジェクトを作成します。Windows PowerShellでプロジェクトを作成すると、エラーが表示されてしまったので、Windowsの「コマンドプロンプト」を起動します。

C:\Users\Administrator>gatsby new blog

起動後、上記のコマンドを入力し、Enterキーを押します。

info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into ‘blog’…
remote: Enumerating objects: 29, done.
remote: Counting objects: 100% (29/29), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 29 (delta 2), reused 13 (delta 0), pack-reused 0
Receiving objects: 100% (29/29), 613.73 KiB | 831.00 KiB/s, done.
Resolving deltas: 100% (2/2), done.
success Created starter directory layout
info Installing packages…
info Preferred package manager set to “npm”

> bufferutil@4.0.1 install C:\Users\Administrator\blog\node_modules\bufferutil
> node-gyp-build

> utf-8-validate@5.0.2 install C:\Users\Administrator\blog\node_modules\utf-8-validate
> node-gyp-build

> sharp@0.25.4 install C:\Users\Administrator\blog\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install –runtime=napi) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz
info sharp Creating C:\Users\Administrator\blog\node_modules\sharp\build\Release
info sharp Copying DLLs from C:\Users\Administrator\blog\node_modules\sharp\vendor\lib to C:\Users\Administrator\blog\node_modules\sharp\build\Release

> core-js@2.6.11 postinstall C:\Users\Administrator\blog\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@3.6.5 postinstall C:\Users\Administrator\blog\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js-pure@3.6.5 postinstall C:\Users\Administrator\blog\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”

> gatsby-telemetry@1.3.38 postinstall C:\Users\Administrator\blog\node_modules\gatsby-telemetry
> node src/postinstall.js || true

> mozjpeg@7.0.0 postinstall C:\Users\Administrator\blog\node_modules\mozjpeg
> node lib/install.js

√ mozjpeg pre-build test passed successfully

> pngquant-bin@6.0.0 postinstall C:\Users\Administrator\blog\node_modules\pngquant-bin
> node lib/install.js

√ pngquant pre-build test passed successfully

> gatsby-cli@2.12.113 postinstall C:\Users\Administrator\blog\node_modules\gatsby\node_modules\gatsby-cli
> node scripts/postinstall.js

> gatsby@2.24.91 postinstall C:\Users\Administrator\blog\node_modules\gatsby
> node scripts/postinstall.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

added 2229 packages from 1268 contributors and audited 2236 packages in 103.392s

141 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

info Initialising git in blog
Initialized empty Git repository in C:/Users/Administrator/blog/.git/
info Create initial git commit in blog
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

cd blog
gatsby develop

Enterキーを押すと、新しいプロジェクトが作成されます。「Your new Gatsby site has been successfully bootstrapped.(新しいGatsbyサイトは正常にブートストラップされました。)」と表示されますので、これが表示されれば、プロジェクトの作成は完了です。

■作成したプロジェクトをローカルWebサーバーで公開する

cd blog
gatsby develop

完了後、上記のコマンドを入力し、Enterキーを押します。

success open and validate gatsby-configs – 0.047s
success load plugins – 3.370s
success onPreInit – 0.046s
success initialize cache – 0.011s
success copy gatsby files – 0.251s
success onPreBootstrap – 0.050s
success createSchemaCustomization – 0.005s
success Checking for changed pages – 0.001s
success source and transform nodes – 0.101s
success building schema – 0.404s
info Total nodes: 33, SitePage nodes: 1 (use –verbose for breakdown)
success createPages – 0.002s
success Checking for changed pages – 0.001s
success createPagesStatefully – 0.136s
success update schema – 0.033s
success write out redirect data – 0.002s
success Build manifest and related icons – 0.144s
success onPostBootstrap – 0.148s
info bootstrap finished – 14.665s
success onPreExtractQueries – 0.001s
success extract queries from components – 0.509s
success write out requires – 0.033s
success run static queries – 0.286s – 3/3 10.49/s
success run page queries – 0.074s – 6/6 81.00/s
success Generating image thumbnails – 5.850s – 6/6 1.03/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 – 14.390s

Enterキーを押すと、上記のメッセージが表示されます。「You can now view gatsby-starter-default in the browser.(これで、ブラウザでgatsby-starter-defaultを表示できます。)」と表示されますので、「http://localhost:8000/」のURLをコピーし、Webブラウザを起動させます。

起動後、WebブラウザのアドレスバーにURLをコピーし、アクセスします。

アクセスすると、サイトに「Gatsby Default Starter」、「Welcome to your new Gatsby site.」等の表示が出ます。これでローカルWebサーバーでの公開がされました。

コメント

タイトルとURLをコピーしました