Gatsby CLIをインストール

nodeを使えるようにしたから、npmを使ってGatsby cliをインストール。

npm install -g gatsby-cli

これでGatsbyが使えるようになっているので、下のコマンドでバージョンで確認。

gatsby -v

Gatsbyプロジェクトの作成

GatsbyJSには、色々なテンプレートが用意されているが、とりあえずローカルにHello worldのみ出力したいから、sample-siteという名前のプロジェクトフォルダを用意して、シンプルでまっさらな「スターター」を入れる。

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

sample-siteのフォルダに移動

cd sample-site

次に、Gatsbyの開発サーバーを起動。

gatsby develop

上のコマンドで開発サーバーが起動するので、ローカルのテスト環境でサイトの表示を確認できるようになる。これで一応出来上がり。

http://localhost:8000/を叩いて、ローカルに立ち上がっていたら成功。

なお、サーバーを停止する場合はターミナルにcontrol + Cで停止される。

Gatsbyコマンドのオプション

gatsbyコマンドよく使いそうだから一覧にしておく。

プロジェクトを消す時のcleanは使用頻度高そう。

• gatsby build: ビルドのみ実施。publicフォルダにファイルが生成される。
• gatsby clean: ビルドしたデータを削除する。
• gatsby develop: 開発用サーバを起動する(process.env.NODE_ENV = development)。ビルドはしない。稼働中はファイルを変更するたびにホットリロードされてサイトに変更が即時反映される。
• gatsby serve: ビルドしたサイトのサーバを起動する(process.env.NODE_ENV = production)。デプロイ前の確認用。

さいごに

今回はスターターを使ったけど、他にも色々あるから使ってみたい。