gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[今回：gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# チュートリアル
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-one/
ギャツビービルディングブロックというものを知ることができるようです。
## Using Gatsby starters
[前回](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)、hello-worldサイトをコマンドで作った通り、以下コマンドでgatsbyサイトが作成できます。
```gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]```
リポジトリURLを省略すると以下がベースとなる。
https://github.com/gatsbyjs/gatsby-starter-default
## Open up the code
VS Codeで作成したhello-worldのディレクトリを開きます。
![2020-09-04_00h34_18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/d4a5cb26-9d31-39f7-5a75-3af57a3f84ac.jpeg)
hello-worldサイトを起動していない場合は起動しておきます。
```cd hello-world(gatsbyを作成したディレクトリ)```
```gatsby develop```
## Familiarizing with Gatsby pages
### Make changes to the “Hello World” homepage
１．hello-worldディレクトリのsrc/pagesディレクトリに移動しindex.jsを変更するとサイトの情報が更新されることを確認します。
元データ
![2020-09-04_00h51_40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/1410131c-496f-aed7-74fe-d400da305359.jpeg)
修正
![2020-09-04_00h52_45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/8fd48627-b367-f5be-7312-0ad746345e9d.jpeg)
ホットローディング確認！
２．より分かりやすく変化を実感する
src/pages/index.jsを以下に書き換え

```js:src/pages/index.js
import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}
```
![2020-09-04_00h58_41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/5ece1565-94cf-55cc-3cba-ec579dc1d3d2.jpeg)
わかりやすい変化！！
３．もう少し変化
src/pages/index.jsを以下に書き換え

```js:src/pages/index.js
import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  );
}
```
![2020-09-04_01h02_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/bdcc3559-2f16-9ef3-d240-07a3723fc9ec.jpeg)
４．イメージ追加

```js:src/pages/index.js
import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}
```
![2020-09-04_01h03_50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/077b06ca-bd7f-363c-08b3-ecab69e7993f.jpeg)

次はコンポーネントについてだが今日忙しかったから、超眠い。
今日ここまでです。

ありがとうございました。