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

この記事について

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

参考

今回はWebサイト高速化のための 静的サイトジェネレーター活用入門を使って学んでいきます。

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の存在を確認

git -v

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

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

nvmのインストール（バージョンが更新されるので最新をチェック）

nvmのGitHub

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

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

command -v nvm

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

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

エラー内容

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のインストール

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

nvm -ls

インストールできるものを確認

nvm ls-remote

最新版をインストール

nvm install --lts --latest-npm

インストール後ローカルのバージョンを確認して

nvm -ls

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

node -v

yarnのインストール

curl -o- -L https://yarnpkg.com/install.sh | bash

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

yarn -v

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

Gastby CLIをインストール

npm install -g gatsby-cli

動作確認

gatsby -v

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

mkdir gatsby
cd gatsby
gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

開発サーバーを起動してみる

cd mysite
gatsby develop

無事起動できたらlocalhostにアクセスしてみる

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

gatsby build

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

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

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

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

cd mysite
rm -rf .git
git init
git add -A
git commit -m "first commit"

自分のGitHubで新しいリポジトリを作ってリモートへセットしてプッシュ

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

Netlifyでデプロイしてみる

コマンドでgatsby buildを一度でも実行していれば、
/public配下にindex.htmlが存在しているはず、なので、
この/publicを利用してデプロイの情報をセットしていきます。

もろもろの手順はこちらのPDF資料の3-3に記載があるので割愛。

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

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

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