Chapter 04

Gatsbyの導入

tomokiya
tomokiya
2020.09.16に更新
このチャプターの目次
  1. 事前準備
    1. Node.jsの導入
    2. Gitの導入
  2. Gatsbyの導入
    1. CLIのインストール
    2. Gatsbyのプロジェクト作成

事前準備

Gatsbyを導入する前に「Node.js」と「Git」をインストールする必要があります。
※ すでに導入している方はスキップしてください。

Node.jsの導入

Macの場合

HomebrewとXcodeのインストールが必要となります。(すでにインストールしている場合は4のみ実行してください)

  1. ターミナルを開きます
  2. こちらにしたがって、Homebrewをインストールします
  3. xcode-select --installをターミナルで実行し、XCodeをインストールします
  4. brew install nodeをターミナルで実行し、Node.jsをインストールします

Windowsの場合

こちらのページよりNode.jsをインストールします
※ LTS版をインストールすることを推奨します。

Gitの導入

Macの場合

Gitのインストール
$ brew install git

名前とメールアドレスの設定
$ git config --global user.name "Taro Yamada"
$ git config --global user.email "taro@gmail.com"

Windowsの場合

  1. こちらのページよりインストーラーをダウンロードします
  2. ダウンロードしたら、インストーラーを開き次へを押していきインストールを完了します。(設定は変更しなくてOKです)
  3. ユーザー名とメールアドレスを入力します
$ git config --global user.name "Taro Yamada"
$ git config --global user.email "taro@gmail.com"

Gatsbyの導入

CLIのインストール

GatsbyのコマンドをあつかうためのCLIツールをインストールします。

$ npm install -g gatsby-cli

CLIをインストールしたことでgatsby --helpのようにgatsbyコマンドが使えるようになります。
今後gatsbyコマンドを使ってプロジェクトを作成したり、開発時のビルドなどを行っていきます。

Gatsbyのプロジェクト作成

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

$ cd hello-world

$ gatsby develop

まず、gatsby newコマンドにて、スターターライブラリからGatsbyの新規プロジェクトを作成します。
スターターライブラリとはすでにGatsbyで作られているプロジェクトのことです。スターターライブラリをもとに作成することで、コード量を減らすことができます。
ここでは、必要最小限のコードだけが用意されているスターターライブラリを用いています。

gatsby developコマンドにて、開発用のビルドを行いサーバーを立ち上げます。
実行後に下記が出力された後にlocalhost:8000へアクセスしてみましょう。
「Hello World」という文字が表示されます。ひとまず、GatsbyでのWebサイトの立ち上げができました。

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/

uploadedImage.png