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

対象読者

• 手っ取り早く Gatsby を始めたいmacユーザーの方(windows ユーザーは動作未確認)

初期設定

Gatsbyの公式をなぞるだけ

プロジェクト作成

公式が出している 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 ファイルを読み込みたい場合

公式チュートリアルをなぞる

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 の適用

こちらも 公式 をなぞる
素のままでは使えないので、ターミナルで必要なものをインストール

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 を使ってクエリを書き換えてあげると二枚以上の画像を引っ張ってこれる。(参考)

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 へのホスティング

こちらのサイトが非常にわかりやすく説明してくれています

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