はじめに
こんにちは。えか太郎と言います。今回は前回の続きとなります。
前回の記事を読んでGatsbyの準備ができてない方はぜひご覧ください（宣伝）。
今回の内容
簡単なサイトをGatsbyで構築します。
公式英語ドキュメントから書きました。英語でしたが動画もあったので、英語がまともに使える方は是非どうぞ。
今回の完成例
本編 実際に構築しよう
簡単なブログサイトを作ります。ちょっとずつ自分にあったものに書き換えたら自分のサイトが構築できるようになると思います。知らんけど
前提条件
はじめに記述したように環境構築が済んでない方は構築してから進んでください。実際にだれでも見れるようにはする方法（公開の仕方）は次回に記事で書きます。
ディレクトリの移動
Gatsbyのサイトを作りたいディレクトリに移動してください。CDコマンドを使えばできます。
Gatsbyでサイトを生成する
前回インストールしたgatsby-cliを使ってGatsbyサイトを生成します。以下のコマンドを入力してください。
gatsby new
詳細設定
このコマンドを実行するとコマンドラインにいくつか質問がされます。
サイトの名称
What would you like to call your site?（訳：なんて名前のサイト作るんや？）
✔ · （ここにお好みのサイト名を入力）
作るサイトの名前を入力してください。
サイトのフォルダー名
What would you like to name the folder where your site will be created?
（訳：サイトのフォルダーの名前は何にするんや？）
✔ Desktop/ （ここお好みの名前を入力）
JavaScriptかTypeScriptの選択
Will you be using JavaScript or TypeScript?
（訳：あんたJavaScriptとTypeScriptのどっち使うんや？）
❯ JavaScript
TypeScript
キーボードの上下方向キーで選択できます。私はJavaScriptを選びました（というかTypeScript書けません）
CMSの使用の選択
Noでおっｋ
✔ Will you be using a CMS?
（訳：CMSは使うんか？）
· No (or I'll add it later)
スタイリングシステム（CSS系）のインストール
一番下のNoを選べばヨシ
✔ Would you like to install a styling system?
（訳：スタイリングシステム入れへんか？）
· No (or I'll add it later)
その他のプラグイン
その他のプラグインを入れるかを聞かれます。矢印キーを使ってDoneにします。
✔ Would you like to install additional features with other plugins?
（訳：他に言う事ないんか？）
· Done
最終確認
本当に設定が間違えていないかどうか確認されます。ｙを入れたら生成が開始されます。
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder my-first-gatsby-site
? Shall we do this? (Y/n) › Yes
私の環境ではCeleronを使っているというだけあって生成には一分以上かかりました。
構築したGatsbyサイトを実行する
これでとりあえずテンプレートの元になるものは自分の指定したディレクトリにできたと思います。次はサイトをローカルで実行します。
実行するコマンド
生成したディレクトリに移動したら以下のコマンドを入力してください。
gatsby develop
ちなみに実行を停止する場合はCtrl+Cです。
もしもError opening directoryが出た場合
以下の記事で解決方法がわかると思います。
実行したサイトを見る
実行したサイトはブラウザからローカルホスト8000にアクセスすれば開くことができます。
これがブラウザで見ることができれば本記事でしたいことは終わりです。
おわりに
次回はここで作ったページを公開する方法について解説します。CSSだとかもっと詳しいデザインの変更についてはもうしばらくお待ちください。
前回の記事（環境構築）
次回の記事（サイトの公開方法について）
現在作成中