Gatsby.jsでサイトを作るとき最初に作っておきたいファイル
ここでは、「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>© 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>
)
}