【Gatsby】チュートリアル

Gatsby

はじめに

Reactで構成された静的サイトジェネレーターであるGatsbyの導入、設定方法を公式サイトのチュートリアルに従って、まとめます。
対象のOSはMacOSXの場合を想定しています。

公式のチュートリアルはこちら

環境構築

まずはじめに、基本的にGatsbyはCommand Line Interfaceを使用します。
Macの場合はTerminalを使って、環境構築を行います。
ちなみに僕はiTerm2で、シェルはfishを使用しています。

Homebrewをインストールする

Gatsbyを使用するにはNode.jsが必要となります。
Macの環境ではHomebrewを使用することでNode.jsを手軽にインストールできます。

  1. brew -vコマンドで自身のMacにHomebrewがインストールされているかを確認します。インストールされている場合、Homebrewのバージョンが表示されます。
  2. インストールされていない場合、Homebrewのインストールガイドに沿ってインストールします。
  3. Homebrewをインストールしたら、再度brew -vコマンドでバージョンが表示されるかを確認します。

Xcode Command Line Toolsをインストールする

  1. xcode-select --installコマンドでインストールしておきます。
  2. インストールの開始時、ライセンスの同意が求められます。

Node.jsとnpmをインストールする

Gatsbyで必須となるNode.jsをインストールします。
最小サポートバージョンはNode8以上となります。

  1. インストール前に、brew updateでHomebrewを最新バージョンにアップデートしておきます。
  2. brew install nodeコマンドでNode.jsとnpmをインストールします。

インストールが完了したら下記の方法で、正しくインストールされたことを確認します。

  1. node --versionでNode.jsのバージョンが表示されることを確認します。
  2. npm --versionでnpmのバージョンが表示されることを確認します。