React/Gatsby/TypeScript/GitHub Pages で blog を作る

フロントエンドフレームワーク世界大戦が小康状態と聞いたので

ググると沢山の技術ブログが出てきてついそれをコピペしそうになるけど、ちゃんと公式ドキュメントを参照しましょうね

まずは Quick start をコピペしていこう

code:shell

$ brew upgrade npm

Updating Homebrew...

Warning: npm 17.0.1 already installed

$ npm install -g gatsby-cli

added 385 packages, and audited 386 packages in 24s

64 packages are looking for funding

8 vulnerabilities (4 moderate, 4 high)

To address all issues (including breaking changes), run:

npm audit fix --force

npm notice

npm notice New minor version of npm available! 8.1.0 -> 8.16.0

npm notice Run npm install -g npm@8.16.0 to update!

npm notice

$ npm audit fix --force

npm WARN using --force Recommended protections disabled.

npm ERR! code ENOLOCK

npm ERR! audit This command requires an existing lockfile.

npm ERR! audit Try creating one first with: npm i --package-lock-only

npm ERR! audit Original error: loadVirtual requires existing shrinkwrap file

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/inutano/.npm/_logs/2022-08-07T13_54_38_029Z-debug.log

npm i --package-lock-only

npm ERR! code ENOENT

npm ERR! syscall open

npm ERR! path /Users/inutano/package.json

npm ERR! errno -2

npm ERR! enoent ENOENT: no such file or directory, open '/Users/inutano/package.json'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/inutano/.npm/_logs/2022-08-07T13_55_29_514Z-debug.log

$ npm audit fix --force

npm WARN using --force Recommended protections disabled.

up to date, audited 1 package in 184ms

found 0 vulnerabilities

╔════════════════════════════════════════════════════════════════════════╗

║ ║

║ Gatsby collects anonymous usage analytics ║

║ to help improve Gatsby for all users. ║

║ ║

║ ║

╚════════════════════════════════════════════════════════════════════════╝

Cloning into 'gatsby-blog-starter'...

Enter passphrase for key '/Users/inutano/.ssh/id_ecdsa_yume':

remote: Enumerating objects: 103, done.

remote: Counting objects: 100% (103/103), done.

remote: Compressing objects: 100% (91/91), done.

remote: Total 103 (delta 2), reused 73 (delta 2), pack-reused 0

Receiving objects: 100% (103/103), 1.59 MiB | 956.00 KiB/s, done.

success Created starter directory layout

info Installing packages...

info Preferred package manager set to "npm"

npm WARN old lockfile

npm WARN old lockfile The package-lock.json file was created with an old version of npm,

npm WARN old lockfile so supplemental metadata must be fetched from the registry.

npm WARN old lockfile

npm WARN old lockfile This is a one-time fix-up, please be patient...

npm WARN old lockfile

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

npm WARN deprecated har-validator@5.1.5: this library is no longer supported

npm WARN deprecated cheerio-select-tmp@0.1.1: Use cheerio-select instead

npm WARN deprecated devcert@1.1.3: critical regex denial of service bug fixed in 1.2.1 patch

npm WARN deprecated gatsby-recipes@0.12.0: gatsby-recipes has been removed from gatsby/gatsby-cli >=4.5.0. Update to gatsby@latest/gatsby-cli@latest to use versions without gatsby-recipes. This package will no longer receive updates.

npm WARN deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.

npm WARN deprecated core-js-pure@3.9.1: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.

npm WARN deprecated core-js@3.9.1: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'

npm WARN deprecated @hapi/topo@3.1.6: 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/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'

...

npm ERR! ^

npm ERR! 1 error generated.

npm ERR! gyp ERR! build error

npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/inutano/repos/gatsby-blog-starter/node_modules/node-gyp/lib/build.js:194:23)

npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)

npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

npm ERR! gyp ERR! System Darwin 21.5.0

npm ERR! gyp ERR! command "/usr/local/Cellar/node/17.0.1/bin/node" "/Users/inutano/repos/gatsby-blog-starter/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="

npm ERR! gyp ERR! cwd /Users/inutano/repos/gatsby-blog-starter/node_modules/node-sass

npm ERR! gyp ERR! node -v v17.0.1

npm ERR! gyp ERR! node-gyp -v v7.1.2

npm ERR! gyp ERR! not ok

npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:

ERROR

Command failed with exit code 1: npm install

Error: Command failed with exit code 1: npm install

- error.js:60 makeError

- index.js:118 handlePromise

- task_queues:96 processTicksAndRejections

node:internal/process/task_queues:96:5

- init-starter.js:135 install

- init-starter.js:202 clone

- init-starter.js:343 initStarter

- create-cli.js:458

コケやがった

ていうか warn/error 出過ぎでは？

npm に対する心象がどんどん悪化する

yarn でいこう

code:shell

$ brew install yarn

==> Pouring yarn--1.22.19.all.bottle.tar.gz

==> Caveats

yarn requires a Node installation to function. You can install one with:

brew install node

==> Summary

🍺 /usr/local/Cellar/yarn/1.22.19: 15 files, 5MB

Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.

$ yarn global add gatsby-cli

yarn global v1.22.19

success Installed "gatsby-cli@4.20.0" with binaries:

- gatsby

✨ Done in 18.70s.

warn/error なくあっさり入った

code:shell

Cloning into 'gatsby-blog-starter'...

remote: Enumerating objects: 103, done.

remote: Counting objects: 100% (103/103), done.

remote: Compressing objects: 100% (91/91), done.

remote: Total 103 (delta 2), reused 73 (delta 2), pack-reused 0

Receiving objects: 100% (103/103), 1.59 MiB | 1.55 MiB/s, done.

success Created starter directory layout

info Installing packages...

npm WARN old lockfile

npm WARN old lockfile The package-lock.json file was created with an old version of npm,

npm WARN old lockfile so supplemental metadata must be fetched from the registry.

npm WARN old lockfile

npm WARN old lockfile This is a one-time fix-up, please be patient...

npm WARN old lockfile

...

npm ERR! ^

npm ERR! 1 error generated.

npm ERR! gyp ERR! build error

npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/inutano/gatsby-blog-starter/node_modules/node-gyp/lib/build.js:194:23)

npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)

npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

npm ERR! gyp ERR! System Darwin 21.5.0

npm ERR! gyp ERR! command "/usr/local/Cellar/node/17.0.1/bin/node" "/Users/inutano/gatsby-blog-starter/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="

npm ERR! gyp ERR! cwd /Users/inutano/gatsby-blog-starter/node_modules/node-sass

npm ERR! gyp ERR! node -v v17.0.1

npm ERR! gyp ERR! node-gyp -v v7.1.2

npm ERR! gyp ERR! not ok

npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:

ERROR

Command failed with exit code 1: npm install

Error: Command failed with exit code 1: npm install

- error.js:60 makeError

- index.js:118 handlePromise

- task_queues:96 processTicksAndRejections

node:internal/process/task_queues:96:5

- init-starter.js:135 install

- init-starter.js:202 clone

- init-starter.js:343 initStarter

- create-cli.js:458

同じコケ方

ググるとGatsbyが最新のnodeに対応してないとかなんとか

code:shell

$ which node

/usr/local/bin/node

$ node -v

v17.0.1

16.x: Active, 18.x Current で 17 がない

なぜ…

公式によると Current, Active, Maintenance の status にあるものはサポートするとあるが、この17はなんなんだ

16 に落としてみましょうか

code:shell

$ brew install node@14

...

$ node -v

v18.7.0

あれ……

なんで……

そして再度コケる

なんなの……

nvm をインスコして 14 系を入れます、面倒くさすぎる

code:shell

% Total % Received % Xferd Average Speed Time Time Time Current

Dload Upload Total Spent Left Speed

100 15037 100 15037 0 0 316k 0 --:--:-- --:--:-- --:--:-- 358k

=> nvm is already installed in /Users/inutano/.nvm, trying to update using git

=> => Compressing and cleaning up git repository

=> nvm source string already in /Users/inutano/.zshrc

=> bash_completion source string already in /Users/inutano/.zshrc

=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"

$ exec zsh

$ nvm install 14.13.1

v14.13.1 is already installed. # メッセージ飛んだので二度目だから

Now using node v14.13.1 (npm v6.14.8)

$ npm install --global yarn

yarn@1.22.19 preinstall /Users/inutano/.nvm/versions/node/v14.13.1/lib/node_modules/yarn

:; (node ./preinstall.js > /dev/null 2>&1 || true)

/Users/inutano/.nvm/versions/node/v14.13.1/bin/yarnpkg -> /Users/inutano/.nvm/versions/node/v14.13.1/lib/node_modules/yarn/bin/yarn.js

/Users/inutano/.nvm/versions/node/v14.13.1/bin/yarn -> /Users/inutano/.nvm/versions/node/v14.13.1/lib/node_modules/yarn/bin/yarn.js

+ yarn@1.22.19

added 1 package in 0.598s

$ yarn global add gatsby-cli

yarn global v1.22.19

error gatsby-core-utils@3.20.0: The engine "node" is incompatible with this module. Expected version ">=14.15.0". Got "14.13.1"

error Found incompatible module.

ヘイヘーイ

code:shell

$ nvm install 14.15.0

Downloading and installing node v14.15.0...

Computing checksum with sha256sum

Checksums matched!

Now using node v14.15.0 (npm v6.14.8)

$ node -v

v14.15.0

$ which yarn

yarn not found

$ npm install --global yarn

yarn@1.22.19 preinstall /Users/inutano/.nvm/versions/node/v14.15.0/lib/node_modules/yarn

:; (node ./preinstall.js > /dev/null 2>&1 || true)

/Users/inutano/.nvm/versions/node/v14.15.0/bin/yarnpkg -> /Users/inutano/.nvm/versions/node/v14.15.0/lib/node_modules/yarn/bin/yarn.js

/Users/inutano/.nvm/versions/node/v14.15.0/bin/yarn -> /Users/inutano/.nvm/versions/node/v14.15.0/lib/node_modules/yarn/bin/yarn.js

+ yarn@1.22.19

added 1 package in 0.415s

$ which yarn

/Users/inutano/.nvm/versions/node/v14.15.0/bin/yarn

$ yarn global add gatsby-cli

yarn global v1.22.19

success Installed "gatsby-cli@4.20.0" with binaries:

- gatsby

✨ Done in 1.28s.

Cloning into 'gatsby-blog-starter'...

remote: Enumerating objects: 103, done.

remote: Counting objects: 100% (103/103), done.

remote: Compressing objects: 100% (91/91), done.

remote: Total 103 (delta 2), reused 73 (delta 2), pack-reused 0

Receiving objects: 100% (103/103), 1.59 MiB | 6.21 MiB/s, done.

success Created starter directory layout

info Installing packages...

fsevents@1.2.13 install /Users/inutano/repos/gatsby-blog-starter/node_modules/webpack-dev-server/node_modules/fsevents

node install.js

SOLINK_MODULE(target) Release/.node

CXX(target) Release/obj.target/fse/fsevents.o

SOLINK_MODULE(target) Release/fse.node

sharp@0.27.2 install /Users/inutano/repos/gatsby-blog-starter/node_modules/sharp

(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/inutano/.npm/_libvips/libvips-8.10.5-darwin-x64.tar.br

husky@4.3.8 install /Users/inutano/repos/gatsby-blog-starter/node_modules/husky

node husky install

husky > Setting up git hooks

git rev-parse command failed. Got fatal: not a git repository (or any of the parent directories): .git

husky > Failed to install

node-sass@5.0.0 install /Users/inutano/repos/gatsby-blog-starter/node_modules/node-sass

node scripts/install.js

Download complete░░⸩ ⠋ :

Binary saved to /Users/inutano/repos/gatsby-blog-starter/node_modules/node-sass/vendor/darwin-x64-83/binding.node

Caching binary to /Users/inutano/.npm/node-sass/5.0.0/darwin-x64-83_binding.node

core-js@2.6.12 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/babel-runtime/node_modules/core-js

node -e "try{require('./postinstall')}catch(e){}"

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

core-js@3.9.1 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/core-js

node -e "try{require('./postinstall')}catch(e){}"

core-js-pure@3.9.1 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/core-js-pure

node -e "try{require('./postinstall')}catch(e){}"

gatsby-telemetry@2.1.0 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/gatsby-telemetry

node src/postinstall.js || true

mozjpeg@7.0.0 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/mozjpeg

node lib/install.js

✔ mozjpeg pre-build test passed successfully

pngquant-bin@6.0.0 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/pngquant-bin

node lib/install.js

✔ pngquant pre-build test passed successfully

gatsby-cli@3.1.0 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/gatsby-cli

node scripts/postinstall.js

gatsby@3.1.2 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/gatsby

node scripts/postinstall.js

husky@4.3.8 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/husky

opencollective-postinstall || exit 0

Thank you for using husky!

If you rely on this package, please consider supporting our open collective:

node-sass@5.0.0 postinstall /Users/inutano/repos/gatsby-blog-starter/node_modules/node-sass

node scripts/build.js

Binary found at /Users/inutano/repos/gatsby-blog-starter/node_modules/node-sass/vendor/darwin-x64-83/binding.node

Testing binary

Binary is fine

added 2287 packages from 1194 contributors and audited 2299 packages in 30.573s

266 packages are looking for funding

found 201 vulnerabilities (4 low, 84 moderate, 94 high, 19 critical)

info Initialising git in gatsby-blog-starter

info Create initial git commit in gatsby-blog-starter

info

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

cd gatsby-blog-starter

gatsby develop

通った

安定版のnodeとは……

code:shell

$ gatsby develop

success open and validate gatsby-configs - 0.084s

success load plugins - 2.156s

success onPreInit - 0.025s

success initialize cache - 0.005s

success copy gatsby files - 0.027s

success onPreBootstrap - 0.010s

success createSchemaCustomization - 0.101s

success Checking for changed pages - 0.001s

success source and transform nodes - 0.085s

success building schema - 0.370s

info Total nodes: 81, SitePage nodes: 3 (use --verbose for breakdown)

success createPages - 0.035s

success Checking for changed pages - 0.000s

success createPagesStatefully - 0.033s

success update schema - 0.059s

success write out redirect data - 0.002s

success Build manifest and related icons - 0.084s

success onPostBootstrap - 0.087s

info bootstrap finished - 4.625s

success onPreExtractQueries - 0.001s

success extract queries from components - 1.241s

success write out requires - 0.004s

success run static queries - 0.016s - 6/6 368.83/s

warn code block or inline code language not specified in markdown. applying generic code block

success run page queries - 0.224s - 3/3 13.40/s

warn Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

Why you should do it regularly:

⠀

You can now view gatsby-blog-stater-with-typescript in the browser.

⠀

⠀

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

⠀

⠀

Note that the development build is not optimized.

To create a production build, use gatsby build

⠀

success Building development bundle - 8.792s

ここからコードをガシガシ書き換えていくわけですが

Gatsby/React の基礎をちょっとさらってみる