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

便利なプラグイン

ref:
https://qiita.com/Takumon/items/da8347f81a9f021b637f