Windows 編

nvm-win 導入

node がもう入ってるという人は読み飛ばしていい。
まず、nvm をインストールする。 node のバージョンを複数管理できて便利。
nvm-windows にアクセスして、nvm-setup.zipをダウンロードする。 2021/01/31 時点での最新版は1.1.7

nvm-setup.exeを起動して、ウィザードに従う。 抱き合わせの怪しいソフトは無いので安心。

Finished が出たらコマンドプロンプトか Powershell を開く。
nvm versionと入力して自分がインストールした nvm のバージョンが出たら成功。

PS C:¥Users¥hoge> nvm version           # nvmのバージョン表示
1.1.7

node をインストール

nvm list availableでインストールできる node を吟味しよう。
最新版だと gatsby が対応していない可能性もあるので、LTS にあるバージョンが盤石に思える。
選んだら、nvm install x.y.zでインストールする。
自分の環境では v14.5.0 をインストールした。

PS C:¥Users¥hoge> nvm list available    # インストール可能なnodeのversion表示
PS C:¥Users¥hoge> nvm install x.y.z     # バージョンx.y.zをインストールする

終わったらnvm use x.y.xでバージョンを選択する。 node --versionで`x.y.z と表示されたら成功。

PS C:¥Users¥hoge> nvm use x.y.z         # nodeのバージョン選択
PS C:¥Users¥hoge> node --version        # nodeのバージョンを表示
x.y.z

参考: Node.js のバージョン管理ツール nvm の使い方

gatsby をインストール

npm を用いたインストール

PS C:¥Users¥hoge> npm install -g gatsby-cli     # gatsbyをインストール
PS C:¥Users¥hoge> npm install -g yarn     # gatsbyをインストール

ちょっとここから、本筋とは無関係な npm に関する全般的な備忘録が続く。

npm とは？

ここらへんは自分も曖昧なので詳しい人の解説を見よう。

Node.js のパッケージを管理するための CLI であり、パッケージを作成したり、NPM 上のパッケージをローカルにインストールしたり、自分のパッケージを NPM に公開したりと、Node.js の開発に欠かせないツールである。Node.js をインストールすると自動的に npm もインストールされる。

引用元: 【初心者向け】NPM と package.json を概念的に理解する

pipがpypi.orgで管理されてるのと同様に、npmはNPMで管理されてると考えて良い。

npm のインストール先

グローバルインストール

npmのインストール時、-gオプションを付けるとグローバルインストールとなり、どのディレクトリからも使用可能なコマンドとなる。
グローバルインストールの場合、モジュールはnpmと同じ階層のディレクトリにインストールされる。
nvm-windowsでnodeを導入した方は、C:\Users\[username]\AppData\Roaming\nvm\v14.5.0\node_modulesを参照すれば、gatsby-cliディレクトリが確認できるはず。

ローカルインストール

-gを付けないと、カレントディレクトリのnode_modulesにインストールされる。

gatsby 構築環境を作る

サイトのフォルダを置く場所まで移動しよう。

PS C:¥Users¥hoge> gatsby new [username].github.io https://github.com/gatsbyjs/gatsby-starter-blog       # gatsby謹製スターターキットをローカル環境に作る

[username]を自分の github のアカウント名にしておくと、Github Pages で連携できる。

gatsby-starter-blog 以外にも素敵なスターターがたくさんある。

なお、git が Windows に入ってない場合、このコマンドに失敗する。 入れよう。
自宅 PC に Git for Windows をインストールする手順 という qiita の記事が分かりやすかった。

gatsby をローカル環境で動かす

gatsby developでサーバを起動

PS C:¥Users¥hoge> gatsby develop       # ローカルのサーバ起動

ブラウザでhttps://localhost:8000にアクセスすると、スターターブログが公開されているはず。ひとまずおめでとう！

Github Pages を使って公開する

gh-pagesを導入して Deploy する

PS C:¥Users¥hoge> yarn add --dev gh-pages   # package.jsonのdevDependenciesにgh-pagesをインストール
PS C:¥Users¥hoge> yarn run deploy           # gh-pagesを使って[username].github.ioにdeploy

すると、Windows なら Github のアカウント認証のポップアップが出てくる。 メールアドレスとパスワード、もしくはアクセストークンで認証する。

...
Published
Done in xx.xxs.

と表示されたら完了。

[username].github.io にアクセスすると deploy したサイトが公開されている。 おめでとう！

トラブルシュート: ERROR #11321 PLUGIN

問題

yarn run deployする時に、エラーが吐かれることがある。

"gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

対処法

package-lock.jsonとnode_modelesの中身を全部消して、npm installする。

PS C:¥Users¥hoge> rm node_modules
PS C:¥Users¥hoge> rm package-lock.json
PS C:¥Users¥hoge> npm install