Gatsby
インストール
最新のGatsbyをインストールする。
yarn global add gatsby@next gatsby-cli@next
# バージョンを確認
gatsby -v
HelloWorld
gatsby new <project name> https://github.com/gatsbyjs/gatsby-starter-hello-world
cd <project name>
yarn
gatsby develop
localhost:8000でアクセスできる。
マークダウン用の設定
plugインをインストールする。
yarn add gatsby-source-filesystem gatsby-transformer-remark
gatsby-config.jsを以下のように作成する。
module.exports = {
siteMetadata: {
title: 'My Blog',
description: 'This is my cool blog.'
},
plugins: [
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`
}
}
]
}
ページを作成する
各ページはpagesディレクトリの下に好きな名前でフォルダを作り、その中のindex.mdに書く。
pages
├── index.js
├── hoge
│ └── index.md
└── piyo
└── index.md
ディレクトリ構成はこんな感じになる。
GraphQL
http://localhost:8000/___graphql
でGraphQLの画面に行く。
タイトルの一覧を取得する例:
{
allMarkdownRemark {
edges {
node {
frontmatter {
title
}
}
}
}
}
共通のヘッダをGraphQLを使って作成する
src/components/Header.jsを以下のように作成する。
import React from "react"
import { StaticQuery, graphql } from "gatsby"
const Header = () => {
return (
<StaticQuery
query={graphql`
query {
site {
siteMetadata {
title
description
}
}
}
`}
render={data => <TitleAndDescription data={data} />}
/>
)
}
const TitleAndDescription = ({ data }) => {
const title = data.site.siteMetadata.title
const description = data.site.siteMetadata.description
return (
<div>
<h2>{title}</h2>
<p>{description}</p>
</div>
)
}
export default Header
src/pages/index.jsから作ったHeaderコンポーネントをimportする。
import React from "react"
import { graphql } from "gatsby"
import Header from "../components/Header"
const Layout = () => {
return (
<div>
<Header />
<p>Hello Gatsby!!!</p>
</div>
)
}
export default Layout
このように共通化できる。
ディレクトリツリーはこう。
src
├── components
│ └── Header.js
└── pages
└── index.js
ページの一覧をGraphQLを使って取得する
import React from "react"
import Header from "../components/Header"
const Layout = ({ data }) => {
const { edges } = data.allMarkdownRemark
return (
<div>
<Header />
<p>Hello Gatsby!!!</p>
<div>
{edges.map(edge => {
const { frontmatter } = edge.node
return <div key={frontmatter.path}>{frontmatter.title}</div>
})}
</div>
</div>
)
}
export const query = graphql`
query HomepageQuery {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
frontmatter {
title
path
date
}
}
}
}
}
`
export default Layout
gatsby-node.jsを使用してMarkdownからHTMLを生成する
ここを参照。
Gatsby | Adding Markdown Pages