GatsbyJS ページを追加する

cp src/pages/index.tsx src/pages/about.tsx

import * as React from "react"
import {graphql, PageProps} from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

const About: React.FC<PageProps<GatsbyTypes.AboutQuery>> = ({data, location}) => {
  const siteTitle = data.site?.siteMetadata?.title || `Title`

  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="about"/>
      <Bio/>
      <article className="post-list-item" itemScope itemType="http://schema.org/Article">
        <header>
          <h1>About Me</h1>
        </header>
        <section>
          <p>コンテンツ</p>
        </section>
      </article>
    </Layout>
  )
}

export default About

export const pageQuery = graphql`
  query About {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`

export const pageQuery = graphql`
  query About {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`

const About: React.FC<PageProps<GatsbyTypes.AboutQuery>> = ({data, location}) => {
...
...
...
}
export default About

return (
  <Layout location={location} title={siteTitle}>
    <Seo title="about"/>
    <Bio/>
    <article className="post-list-item" itemScope itemType="http://schema.org/Article">
      <header>
        <h1>About Me</h1>
      </header>
      <section>
        <p>コンテンツ</p>
      </section>
    </article>
  </Layout>
)

return (
  <div className="global-wrapper" data-is-root-path={isRootPath}>
    <header className="global-header">{header}</header>
    <!-- Start -->
    <nav>
      <Link to="/about/">AboutMe</Link>
    </nav>
    <!-- end -->
    <main>{children}</main>
    <footer>
      © {new Date().getFullYear()}, Built with
      {` `}
      <a href="https://www.gatsbyjs.com">Gatsby</a>
    </footer>
  </div>
)