筆者のスペック
- 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:// になっていると表示されないので要注意です。
