初心者による初心者のためのGatsbyJS覚書1（環境構築編）


##この記事について
この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

##参考
今回は[Webサイト高速化のための 静的サイトジェネレーター活用入門](https://www.amazon.co.jp/%E3%80%90%E7%89%B9%E5%85%B8%E4%BB%98%E3%81%8D-%E3%80%91Web%E3%82%B5%E3%82%A4%E3%83%88%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E6%B4%BB%E7%94%A8%E5%85%A5%E9%96%80-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4839973008)を使って学んでいきます。



MacBook Pro 2020 M1チップモデル
node v12.18.3
Gatsby CLI version: 3.10.0
Gatsby version: 3.10.2
npm 6.14.6

## 下準備

* GitHubアカウントの準備
* Netlifyアカウントの登録
* Contentfulアカウントの登録

## Gitの諸設定

ひとまずGitの存在を確認

```sh
git -v
```

GitHubに登録しているメールアドレスとユーザー名を登録

```sh
git config --global user.name "username"
git config --global user.email "email"
```

##nvmのインストール（バージョンが更新されるので最新をチェック）
[nvmのGitHub](https://github.com/nvm-sh/nvm#install--update-script)

```ｓｈ
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
```

インストールを終えたらターミナルを一旦再起動して

```
command -v nvm
```

で「nvm」が表示されたらOK

注意:bangbang:
後にnpmコマンドでgatsbyをインストールしようとしたときエラーが発生し気が付いたが、MacOSの場合、先にパスを書き込むファイルの作成が必要だったらしい。。。（下記コマンドでエラー解消）

エラー内容

```sh
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
...
...
...続く
```

解決法（npmのデフォルトディレクトリを作成する）

```
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
```

##NodeJSのインストール

まずはローカルでインストールされているか確認

```sh
nvm -ls
```
インストールできるものを確認

```sh
nvm ls-remote
```

最新版をインストール

```sh
nvm install --lts --latest-npm
```
インストール後ローカルのバージョンを確認して

```sh
nvm -ls
```

バージョンを確認できたらOK

```sh
node -v
```

##yarnのインストール

```ｓｈ
curl -o- -L https://yarnpkg.com/install.sh | bash
```
インストールを終えたらターミナルを一旦再起動して

```
yarn -v
```

## Gatsbyのスターターを使って開発用のディレクトリを準備

Gastby CLIをインストール

```sh
npm install -g gatsby-cli
```
動作確認

```sh
gatsby -v
```

わかりやすいフォルダを作ってスターターをダウンロード。（今回はhello worldを使用）

```sh
mkdir gatsby
cd gatsby
gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world
```
開発サーバーを起動してみる

```sh
cd mysite
gatsby develop
```
無事起動できたら[localhost](http://localhost:8000/)にアクセスしてみる
![スクリーンショット 2021-07-31 15.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/218eaba5-5e36-af1c-e752-7e632d290783.png)

静的ファイルを生成してみる

```sh
gatsby build
```
/publicディレクトリ配下に`index.html`が生成され、develop時と同じように
Hello worldと表示されることを確認してください。

##GatsbyのアプリディレクトリをGitで管理できるようにする

注意:bangbang:
publicディレクトリがgitignoreに入っている場合、対象外としておく
※Netlifyでのデプロイの際Gitからpublicディレクトリを参照するため

スターターでついてきたGitリポジトリを削除、新しいローカルリポジトリを作成してコミットしておく

```sh
cd mysite
rm -rf .git
git init
git add -A
git commit -m "first commit"
```
自分のGitHubで新しいリポジトリを作ってリモートへセットしてプッシュ

```sh
git remote add origin "新しいリポジトリURL"
git push origin master
```

## Netlifyでデプロイしてみる

コマンドで`gatsby build`を一度でも実行していれば、
`/public`配下に`index.html`が存在しているはず、なので、
この`/public`を利用してデプロイの情報をセットしていきます。
![スクリーンショット 2021-08-01 12.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281399/cd997d17-7dcd-caf4-15d4-209847de5e5e.png)

もろもろの手順はこちらの[PDF資料](https://github.com/ebisucom/gatsbyjs-book/blob/master/setup.pdf)の3-3に記載があるので割愛。

キャプチャの`Base directory`の部分、PDFには記載がなく、いろいろ試してみたが、空欄で良かったらしい。

デプロイが完成するとURLが表示されるようになるので、そちらにアクセスすると
`gatsby build`で生成した静的ファイルがサーバーで表示されているのが確認できる。


今回はここまで。
これで`gatsby develop`で起動する仮想サーバーと`gastby build`で生成するファイルの表示先のNetlify環境が完成したので今後は本に沿ってGatsbyJSでの開発を進めていきます。