Gatsby.jsの環境構築から「Hello World」まで

1. Gatsby について

Gatsby は、ウェブサイトや Web アプリを作成するための React ベースのオープンソースフレームワークで、静的サイトジェネレータ(SSG : Static Site Generator)のひとつ。静的サイトジェネレータとは、 Web ページを高速に動作するようにした技術のひとつで、セキュリティリスクが低く管理コストなども低いメリットがある。

2. 環境構築

Gatsby.js を使用するために下記をインストールします。(ここでは Mac で環境構築をしています)

  • Node.js - サーバーサイドの JavaScript 実行環境(必須)
  • npm - Node.js のパッケージ管理ツール。Node.js と npm はセット。
  • nvm(Node Version Manager) - Node.js のバージョン管理ツール。
  • Git - プログラム・ソースコードのバージョン管理システム。

パスを書き込むファイルがない場合

パスを書き込むファイルが必要になるので、先に作成しておきます。

bash の環境の場合

touch ~/.bash_profile

zsh の環境の場合

touch ~/.zshrc

touch - ファイルの最終更新日を変更。ファイルがない場合はファイルを作成。

3. nvm のインストール

Github - GitHub - nvm-sh/nvm: Node Version Manager

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

または

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

nvm の設定

ディレクトリを作成

mkdir ~/.nvm

.bash_profile / .zshrc の編集

ターミナルで.zshrcまたは.bash_profileを編集してくれと指示が出るので指示された部分を.zshrcまたは.bash_profileに追記します。編集は、ファイルを探してから直接編集するかvim ~/.zshrcで編集が可能です。変更が完了したら一度ターミナルを再起動させます。

//指示された部分
export NVM_DIR= ...

ターミナルの再起動後、下記を記述して nvm と表示されればインストール完了です。

command -v nvm

4. Node.js のインストール

nvm で Node.js をインストールします。

nvm install --lts --latest-npm

--lts - LTS(Long Term Support)長期的にサポートされている安定バージョン

version --latest-npm - 指定したバージョンの最新版をダウンロード

インストール後、下記を記述してバージョンが表示されればインストール完了です。

node -v

5. Gatsby CLI のインストール

Gatsby CLI をインストールします。

npm install -g gatsby-cli

下記を記述してバージョンが表示されればインストール完了です。

gatsby -v

6. Gatsby のテーマをインストール

Starter Library | Gatsbyから好きなテーマを選択できます。テーマページからインストールコマンドもコピーできます。ここでは「gatsby-starter-hello-world」というテーマをインストールしています。gatsby-starter-hello-worldの部分はファルダ名になるので任意の名前に変更できます。

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

インストールしたフォルダに移動

cd gatsby-starter-hello-world

開発サーバーの起動

gatsby develop

URL が表示されるので、その URL をブラウザで開いて「Hello World」と表示されれば完了です。

[Ctrl + C]で開発サーバーは終了できます。

Set Up Your Development Environment | Gatsby