事前準備
Gatsbyを導入する前に「Node.js」と「Git」をインストールする必要があります。
※ すでに導入している方はスキップしてください。
Node.jsの導入
Macの場合
HomebrewとXcodeのインストールが必要となります。(すでにインストールしている場合は4のみ実行してください)
- ターミナルを開きます
- こちらにしたがって、Homebrewをインストールします
-
xcode-select --install
をターミナルで実行し、XCodeをインストールします -
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の場合
- こちらのページよりインストーラーをダウンロードします
- ダウンロードしたら、インストーラーを開き次へを押していきインストールを完了します。(設定は変更しなくてOKです)
- ユーザー名とメールアドレスを入力します
$ 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/