筆者のスペック

HTML/CSS/jQueryを使った静的サイトしか作ったことない
ぶっちゃけJavaScriptのこと何もわかっていない
Reactで静的サイトを作ってみたいけど、無勉強でいきなり始めるのはさすがに無理なので、Reactのフレームワークを使ってみることにした

「Gatsby.jsとは？何がすごいの？」というのはこちらの解説が素晴らしいです。

インストール手順

Gitが入っているか確認

$ git --version

入っていればgit version 2.20.1 (Apple Git-117) のように表示される。

WindowsでGitが入っていない方は下記を参考にインストール
https://www.sejuku.net/blog/73444

Node.js が入っているか確認

$ node -v

ここで　v16.14.2 など、Node.jsのバージョンが表示されれば既にインストールされているので、そのまま次に進んでOK！

バージョンが表示されない場合は、Node.jsがインストールされていないので、下記サイトからダウンロード↓

v16.14.2(推奨版)をダウンロードしてください

nのインストール

$ npm install -g n

Node.jsをダウングレード / アップグレードしたり、使用可能なバージョンを表示したりする時にあると便利なのでインストールしておく。

【重要】 Node.jsのバージョンを推奨版と同じものにする

次項でGatsby.jsをインストール、サイト作成をしていくのですが、
サイト作成時、Node.jsのバージョンが古すぎる or 新しすぎると次のようなエラーが出ます。

バージョンが古すぎる場合

 ERROR 

Gatsby requires Node.js 14.15.0 or higher (you have v14.0.0).
Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js

バージョンが新しすぎる場合

 ERROR 

Command failed with exit code 1: npm install

前項でv16.14.2(推奨版)をダウンロードしていれば、このような問題は起きないかと思いますが、
後々エラーになってしまうと時間がかかってしまうので、とりあえず以下叩いておくことをお勧めします。

$ sudo n stable
Password:
~
~
~
cp: /usr/local/include/node/cppgc/common.h: Permission denied
installed : v16.14.2 (with npm 6.14.8)

これでNode.jsのバージョンが推奨のバージョンに変わります。

パスワードを入力後、だら〜っといろいろ流れますが、最後にNode.jsのバージョンが表示されればOKです。

このとき、nをインストールしていないと「nなんてコマンドはないが？」と言われます…。

Gatsby.jsをインストール

$ npm install --global gatsby-cli

Gatsby.jsでサイトを作成

$ gatsby my-gatsby-project demo https://github.com/LekoArts/gatsby-starter-portfolio-cara.git

このコマンドを叩くと、今いる階層にmy-gatsby-projectというGatsby.js専用フォルダが作成されます。
名前はなんでも大丈夫です(後から変えられます)

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

  cd my-gatsby-project
  gatsby develop

上のような表示が出れば成功です！！

指示通りmy-gatsby-projectでgatsby developを実行してみます。

$ cd my-gatsby-project
$ gatsby develop

数十秒後、次のような表示が出たらビルド成功です。

success Building development bundle - 11.257s
success Writing page-data.json files to public directory - 0.066s - 3/8 120.75/s

http://localhost:8000 にアクセスしてみてください。

こんなページが表示されているかと思います。

お疲れ様でした！

localhostが表示されない場合
http:// ではなく https:// になっていると表示されないので要注意です。

【Gatsby.js】超初心者がインストールからlocalhost:8000に表示させるまで