Gatsbyをインストールしてサイトを作るまで

## 対象読者
- 手っ取り早く Gatsby を始めたいmacユーザーの方(windows ユーザーは動作未確認)

## 初期設定
 [Gatsbyの公式](https://www.gatsbyjs.org/docs/quick-start/)をなぞるだけ
### プロジェクト作成
公式が出している gatsby の cli をインストール

```
npm install -g gatsby-cli
```

インストールした gatsby-cli でプロジェクトを作る

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

### 動作確認
上記コマンドで作成されたプロジェクトのルートディレクトリに移動

```
cd gatsby-site
```

開発モードで起動

```
gatsby develop
```

他のサーバが起動していなければ http://localhost:8000/ でサーバが起動するので、ブラウザでアクセスして Hello world! が表示されていればここまで成功

変更が反映されることを確認するために、以下のファイルを変更

gatsby-site/src/pages/index.js

```
import React from "react"

export default function Home() {
-  return <div>Hello world!</div>
+  return <div>Hello Gatsby</div>
}
```

ブラウザ上で更新されていれば問題なし。
もしここまでで問題があっても、おそらくgatsby本体の問題というよりは開発環境側の問題だと思われる（もちろん100%そうだとは言い切れないが）

## 開発する

### ページを追加
gatsby-site/src/pages ディレクトリに *.js ファイルを追加すると (develop モードなどで gatsby を動かしていれば)自動的にページが生成される。

例えば about.js を追加し、　http://localhost:8000/about を確認すると新しくページができていることが確認できる。

### コンポーネントの使用
gatsby-site/src 配下にコンポーネントを配置すれば、通常の react と同様にコンポーネントを参照できるようになる。

例えば gatsby-site/src/components ディレクトリを作成してそこに header.js footer.js を設置し、それを index.js から読み込む場合、index.js は以下の様になる

```
import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"

export default function Home() {
  return (
    <div>
      <Header />
      <p>これはインデックスページです</p>
      <Footer />
    </div>
  )
}
```

### CSS の適用

#### CSS ファイルを読み込みたい場合
[公式チュートリアル](https://www.gatsbyjs.org/tutorial/part-two/)をなぞる

gatsby-site/src 配下に styles ディレクトリを追加する。そこに css ファイルを設置する

例
gatsby-site/src/styles/global.css

```
* {
  padding: 0;
  margin: 0;
}
```
CSS ファイルを記述したら、必要なファイルから import 文で読み込んであげる。
ここでは公式に習い、全ページで特定の CSS を読み込ませる例を記載

gatsby-site/gatsby-browser.js を作成し、cssを読み込ませる

gatsby-site/gatsby-browser.js

```
import "./src/styles/global.css"
```

この状態でビルドすると、CSS が適用されていることが確認できる

#### Styled Components の適用
こちらも [公式](https://www.gatsbyjs.org/docs/styled-components/) をなぞる
素のままでは使えないので、ターミナルで必要なものをインストール

```
npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components
```

gatsby-config.jsに以下を記載

```
module.exports = {
-  plugins: [],
+  plugins: [`gatsby-plugin-styled-components`],
}
```

これだけでもう　styled-components が使えるようになる

例
gatsby-site/src/pages/index.js

```
import React from "react"
import styled from "styled-components"
import Header from "../components/header"
import Footer from "../components/footer"

const Container = styled.div`
  margin: 3rem auto;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`

export default function Home() {
  return (
    <Container>
      <Header />
      <p>これはインデックスページです</p>
      <Footer />
    </Container>
  )
}
```

#### 画像の表示
癖がある
必要なモジュールが間違っている可能性があるので指摘していただけると嬉しいです。

適宜必要なモジュールのインストール

```
npm install --save gatsby-source-filesystem gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image
```

gatsby-config.js

```
const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ]
}
```

次にgatsby-site/src/imagesディレクトリを作り、その配下に画像ファイルを配置する

参照側は以下の通りにする

```
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "ここにimages以下の画像パス" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`
```

これだと二つ以上の画像が表示できないので、Aliasing を使ってクエリを書き換えてあげると二枚以上の画像を引っ張ってこれる。([参考](https://qiita.com/tkkrr/items/34f384956fb968a30fe5))

```
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <Img fixed={data.img1.childImageSharp.fixed} />
    <Img fixed={data.img2.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    img1:file(relativePath: { eq: "1枚目の画像パス" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    },
    img2:file(relativePath: { eq: "2枚目の画像パス" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    },
  }
`
```


## （おまけ）FireBase へのホスティング
[こちらのサイト](https://medium.com/@yonemoto/firebase-hosting-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95-3e0bac58d09c)が非常にわかりやすく説明してくれています


以上、gatsby のごく簡単な使い方でした
もし誤字脱字、その他間違っているところなどございましたら指摘していただけると大変ありがたいです。