はじめに

こんにちは。えか太郎と言います。今回は前回の続きとなります。

前回の記事を読んでGatsbyの準備ができてない方はぜひご覧ください（宣伝）。

今回の内容

簡単なサイトをGatsbyで構築します。
公式英語ドキュメントから書きました。英語でしたが動画もあったので、英語がまともに使える方は是非どうぞ。

今回の完成例

簡単なブログサイトを作ります。ちょっとずつ自分にあったものに書き換えたら自分のサイトが構築できるようになると思います。知らんけど

はじめに記述したように環境構築が済んでない方は構築してから進んでください。実際にだれでも見れるようにはする方法（公開の仕方）は次回に記事で書きます。

Gatsbyのサイトを作りたいディレクトリに移動してください。CDコマンドを使えばできます。

前回インストールした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/ （ここお好みの名前を入力）

Will you be using JavaScript or TypeScript?
（訳：あんたJavaScriptとTypeScriptのどっち使うんや？）
❯ JavaScript
  TypeScript

キーボードの上下方向キーで選択できます。私はJavaScriptを選びました（というかTypeScript書けません）

Noでおっｋ

✔ Will you be using a CMS?
（訳：CMSは使うんか？）
· No (or I'll add it later)

一番下の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 develop

ちなみに実行を停止する場合はCtrl+Cです。

以下の記事で解決方法がわかると思います。

実行したサイトはブラウザからローカルホスト8000にアクセスすれば開くことができます。

これがブラウザで見ることができれば本記事でしたいことは終わりです。

次回はここで作ったページを公開する方法について解説します。CSSだとかもっと詳しいデザインの変更についてはもうしばらくお待ちください。

現在作成中