はじめに

このシリーズでは、英語ソースばかりで「Gatsby使ってみたいけど、よくわからない...」という方々のために、公式Docを翻訳（ところどころざっくり要約）していきます。

実際の公式ドキュメントはこちら

（この章では、Gatsby.jsを使って開発ができる環境の構築を済ませ、Hello world!と画面に表示させることがゴールです）

〜〜 以下、翻訳となります 〜〜

0. 開発に必要な環境を構築しよう

Gatsbyを使用したサイトを開発する前に、まずはあなたが次に挙げるようなウェブ開発における主要技術を使い慣れているか確認してください。

• CLI(ターミナル)
  （ある程度プログラミングをしている方には必要ないと思うので、ターミナルの説明は割愛します）
• Node.js
  Node.jsとは、JavaScirptのコードをブラウザの外でも実行できるようにするためのものです。GatsbyもNode.jsを使用して動いています。よって、Gatsbyを使って開発する際には、安定して動く最近のバージョンのNode.jsをインストールする必要があります。npmとNode.jsは基本的にセットでインストールされるので、もしnpmを使ったことがなければ、Node.jsもインストールされていない可能性が高いでしょう。

参考記事： HomebrewでNode.jsとnpmをインストールする方法

• Git
  Gitとは無料でオープンソースのバージョン管理システムです。Gatsbyでは、「starter」というページ作成のためのテンプレートのようなものを活用してSPAのサイトを高速で作ることができるのですが、その「starter」をインストールする際にGitを使用することになるので、Gitはあらかじめインストールしておいてください。
  

参考記事： 最新のGitをインストールする方法

Gatsby CLIを使ってみよう

Gatsby CLIは、あなたが高速でGatsbyのサイトを開発するのをより簡単にしてくれるnpmパッケージです。

以下のコマンドを実行して、インストールしてみましょう。

npm install -g gatsby-cli

インストールが完了したら、以下のコマンドで実行可能なコマンドを確認できます。

gatsby --help

Gatsbyでサイトを作ってみよう

ここまできたら、もうGatsby CLIを使ってGatsbyのサイトを作成する準備は完了です。このツールを使って、前述した「starter」をダウンロードできます。今回使用する「Hello world starter」はGatsbyサイトを作るのに必要最低限のものだけが入っているstarterです。

1 . 　ターミナルを開く
2 . 　starterを利用して、gatsby newでサイトを作成

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

3 . 　作成したディレクトリに移動

cd hello-world

4 . 開発用サーバーを立ち上げる

gatsby develop

これだけで、今回の作業はおしまいです！！

ローカル環境でサイトを見てみよう

それでは以下のURLにアクセスして、作ったサイトを見てみましょう。

おめでとうございます🎉

これで、あなたの最初のGatsbyサイトができました！
gatsby developで立ち上げた開発用サーバーが動いている限り、あなたはいつでもこのhttp://localhost:8000/にアクセスできます。
もしサーバーを止めたければCtrl + cで止められますし、また立ち上げたければもう一度gatsby developを実行してください。

参考文献：Gatsby公式ドキュメント

次の章のテーマは、
「今回gatsby newで作成したgatsbyサイトがどんな構成で成り立っているのか理解する」です。

お楽しみに！！

[第1章：Gatsbyサイトの理解 編] Gatsby公式ドキュメントを翻訳してみた。

[第2章：Gatsbyにおけるスタイリング 編] Gatsby公式ドキュメントを翻訳してみた。

[第3章：Layoutコンポーネントを使ってみよう 編] Gatsby公式ドキュメントを翻訳してみた。