この記事について
この記事は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のインストール（バージョンが更新されるので最新をチェック）
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での開発を進めていきます。