ここでは、「Gatsby Starter」のgatsby-starter-hello-worldをインストールしてから最初に作っておきたい最低限のファイルをまとめています。構成はgatsby-starter-blogを参考にしています。

1. インストール時の構成

gatsby-starter-hello-worldをインストールすると下記のようなファイルが入っています。

• gatsby-config.js
• LICENSE
• node_modules
• package-lock.json
• package.json
• README.md
• src > pages > index.js
• static > favicon.ico

gatsby-config.js - インストールしたプラグインの設定。サイトのメタ情報などを記述するファイル。
index.js - Hello World が出力されるファイル。ファイルの中身は下記のようになっています。

//index.js
import React from "react"

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

1. 最初に作っておきたい最低限のファイル

• gatsby-node.js
• src > pages > 404.js
• src > components > header.js
• src > components > footer.js
• src > components > layout.js
• src > components > layout.css

gatsby-node.js - ページやタグなどを動的に作成するように設定するファイル

フォルダの分類としては、pagesフォルダが Wordpress 的に言うと固定ページを入れているフォルダで、componentsフォルダが header とかページの共通する部分などを入れるフォルダになっています。header や footer はlayout.jsにまとめるので header や footer の内容が軽い場合は、gatsby-starter-blogのようにlayout.jsだけでもいいかもしれません。

2. ファイル内容

//header.js
import React from "react"
import { Link } from "gatsby"

export default () => (
  <header>
    <h1>
      <Link to={`/`}>SiteName</Link>
    </h1>
  </header>
)

import { Link } from "gatsby"と<Link to={}> ~ </Link>（セットで使用）
リンクを作成する。<Link to={}> ~ </Link>だけだとエラーになります。

//footer.js
import React from "react"

export default () => (
  <footer>
    <small>&copy; SiteName.com</small>
  </footer>
)

Header と Footer を layout.js にまとめる

下記で header と footer をlayout.jsにまとめています。

//layout.js
import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import "./layout.css"

export default ({ children }) => (
  <div className="wrapper">
    <Header />
    <main>{children}</main>
    <Footer />
  </div>
)

import Header from "../components/header"と<Header />（セットで使用）
ヘッダーを出力。（フッターも同様）

import "./layout.css"
CSS をインポート。layout.js を使用するページは layout.css にスタイルを指定していけば適用される

2 カラムとかにしたい場合

2 カラムレイアウトにしたいときなども、header などと同様にside.jsなどを作成してlayout.jsにまとめると簡単です。

//side.js
import React from "react"

export default () => (
  <aside>
    <h2>side</h2>
  </aside>
)

//layout.js
import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import Side from "../components/side"
import "./layout.css"

export default ({ children }) => (
  <div className="wrapper">
    <Header />
    <main>{children}</main>
    <Side />
    <Footer />
  </div>
)

Footer を最下部にしたいときの CSS

gatsby-starter-blogの構成でも、header や footer が.wrapperの中にあるのでbodyではなく.wrapperにスタイルを指定します。

/*layout.css*/
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}
/*
main {
  flex: 1;
}
*/

Layout の出力

//index.js
import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>Index</h1>
    </Layout>
  )
}

import Layout from "../components/layout"と<Layout> ~ </Layout>（セットで使用）
レイアウトを出力。

//404.js
import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>404 Not Found</h1>
    </Layout>
  )
}