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/zloirockAlso, 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.
[2K[1G[32msuccess[39m Created starter directory layout
[2K[1G[94minfo[39m Installing packages…
[2K[1G[94minfo[39m 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/zloirockAlso, 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.jsnpm 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 detailsfound 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サーバーでの公開がされました。
コメント