【日記】Gatsbyの勉強⑫

引き続きGatsbyのチュートリアルの続きをやっていきます。

Gatsby.js Tutorials

Gatsby fundamentals（基礎）
0. Set up your development environment
1. Get to know Gatsby building blocks
2. Introduction to using CSS in Gatsby
3. Building nested layouts in Gatsby
Intermediate tutorials（中級編）
4. Querying for data in a blog　←　今ここ
5. Source plugins and rendering queried data
6. Transformer plugins
7. Programmatically create pages from data
8. Preparing a site to go live
Plugin & Theme tutorials（プラグインとテーマについて）
9. Creating a Source Plugin
10. Creating a Remark Transformer Plugin
11. Using a Theme
12. Using Multiple Themes Together
13. Building a Theme
Additional tutorials（付録的な感じ）
14. Using Gatsby Image with Your Site
15. Making a Site with User Authentication
16. Making an E-commerce Gatsby Site with Stripe
17. Building an E-commerce Site with Gatsby, DatoCMS, and Snipcart
18. Using the WordPress Source Plugin
19. Adding Images to a WordPress Site
20. Using Prismic with the GraphQL Source Plugin
21. Writing Documentation with Docz
22. Making a Blog with Netlify CMS
23. Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby

チュートリアル4をやっていきます。
今回はほぼチュートリアルのコードの通り。

（2020/11/08追記）
hogehogeという定義は、gatsby develop実行中に追加した場合動いていましたが、gatsby developを再度実行するとエラーになりました。
「siteMetadata」の中に定義しないとダメっぽい。

module.exports = {
 /* Your site config here */
 hogehoge: {
   title: `Pandas Eating Lots(from hogehoge)`
 },
 siteMetadata: {
   title: `Pandas Eating Lots(from siteMetadata)`
 },
 plugins: [
   `gatsby-plugin-emotion`,
   {
     resolve: `gatsby-plugin-typography`,
     options: {
       pathToConfigModule: `src/utils/typography`
     },
   },
 ],
}

import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"

import { rhythm } from "../utils/typography"

const Layout = ({children}) => {
 const data = useStaticQuery(
   graphql`
     query {
       site {
         hogehoge {
           title
         }
       }
     }
   `
 )
 return (
   <div
     css={css`
       margin: 0 auto;
       max-width: 700px;
       padding: ${rhythm(2)};
       padding-top: ${rhythm(1.5)};
     `}
     >
       <Link to={`/`}>
         <h3
           css={css`
             margin-bottom: ${rhythm(2)};
             display: inline-block;
             font-style: normal;
           `}>
             {data.site.hogehoge.title}
         </h3>
       </Link>
       <Link to={`/about/`}
       css={css`
         float: right;
       `}>
         About
       </Link>
       {children}
   </div>
 )
}

export default Layout

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

export default () => {
 return (
   <Layout>
     <h1>Amazing Pandas Eating Things</h1>
     <div>
       <img
           src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
           alt="Group of pandas eating bamboo"
         />
     </div>
   </Layout>
 )
}

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default ({data}) => {
 return (
   <Layout>
     <h1>{data.site.siteMetadata.title}</h1>
     <p>
       We're the only site running on your computer dedicated to showing the
       best photos and videos of pandas eating lots of food.
     </p>
   </Layout>
 )
}

export const siteQuery = graphql`
 query {
   site {
     siteMetadata {
       title
     }
   }
 }
`

import Typograph  from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typograph = new Typograph(kirkhamTheme)

export default typograph
export const rhythm = typograph.rhythm

今日のまとめ