Gatsby ❤

The main reason for starting this documentation site is so I can go back and review what I have done in the past. As humans we are pretty good at remembering things but it is really hard to remember every bit of information and I find it good to document it for myself to make it easier to understand.

In my first post I am going to run through how to set up basic Gastby site. This is my preferred method and hope you like it too :)

Assumptions & Tips:

• Your environment is set up already, not going to go into details. Tip: Install Gatsby globally.
• Gatsbyjs.org's documentation is really good, check it out:

1. Install Gatsby with a starter

You can see all the starters in their starters library, for this example I am going to use the Hello World Starter, which is the bare minimum. Setting it up this way I also understand what I am using and what I am using it for.

Create directory and run following command:

gatsby new . https://github.com/gatsbyjs/gatsby-starter-hello-world

2. GraphiQL is great but GraphQL Playground is better

I prefer to use GraphQL Playground by Prisma. Main reason is because I can save my queries in different tabs and go back to older query if needed. More info & download here

3. CSS Modules for styling

CSS Modules are just cleaner way to manage styling on my site. This is my go to method for styling. See the Gatsby Docs on how to use this.

4. Site metadata

Set up site metadata and reference with query. Your config should look something like this

gatsby-config.js
================

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.org`,
    description: `Blazing fast modern site generator for React`,
  },
}

More on the config API can be see on Gatsby Docs

5. Query

{
  site {
    siteMetadata {
      title
      siteUrl
      description
    }
  }
}

Render data:

StaticQuery

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const getData = graphql`
  {
    site {
      siteMetadata {
        title
        siteUrl
        description
        person {
          name
        }
      }
    }
  }
`

const ComponentName = () => {
  const data = useStaticQuery(getData);
  // TEST
  console.log(data);
  return (
      <div>
        <p>{data.site.siteMetaData.title}</p>
        <p>{data.site.siteMetaData.description}</p>
        <p>Hi my name is {data.site.siteMetaData.person.name}</p>
      </div>
  )
}

export default ComponentName

After destructuring

const getData = graphql`
  {
    site: {
      siteMetaData: {
        title,
        person: {
          name
        }
      }
    }
  }
`

const ComponentName = () => {
  const data = useStaticQuery(getData);
  return (
      <div>
        <p>{title}</p>
        <p>Hi my name is {name}</p>
      </div>
  )
}

Add alias to destructured code

{
  site {
    info: siteMetadata { // << info alias added
      title
      siteUrl
      description
    }
  }
}

const getData = graphql`{ site: { info: { // << update reference after adding alias to query title, person: { name } } } }`

const ComponentName = () => {
const data = useStaticQuery(getData);
return (
<div>
<p>{title}</p>
<p>Hi my name is {name}</p>
</div>
)
}

6. SEO

Add head element to all pages with React Helmet

npm install --save gatsby-plugin-react-helmet react-helmet

Add string to config:

`gatsby-plugin-react-helmet`

SEO for social networks

Add the following to siteMetaData & copy image to static folder in the root folder

gatsby-config.js
================
module.exports = {
  siteMetadata: {
    ...
    twitterUsername:"@stevegriesel",
    image:'/yourimage.jpg',
    siteUrl:'https://www.yourdomain.com'
    ...
    },
}

Create SEO component

Finished component can be found here

import React from 'react'
import {Helmet} from 'react'
import {useStaticQuery, graphql} from 'gatsby'

const SEO = ({title,description}) => {
    return (
        <Helmet title={title}>
            <meta name="description" content={description} />
        </Helmet>
    )
}

export default SEO

Add SEO component to page you want to enable SEO on

...
import SEO from '../components/SEO'

<SEO title="home" description="this is a description" />
...

Query siteMetaData in SEO component

...
const getData = graphql`
{
    site {
      siteMetadata {
        siteTitle: title
        siteDesc: description
        author
        siteUrl
        twitterUsername
        image
      }
    }
  }

`
`
...

Consume data queried

SEO.js
======
const SEO = ({title,description}) => {
  const {site} = useStaticQuery(getData); // << destructure and reference query

  const {site, title, siteUrl, image, twitterUsername} = site.siteMetadata;

    ...
}

Add this dynamically to head

On my template page I am querying these dynamic values and can use it in the post-template.js file.

post-template.js
======
...
import SEO from '../components/SEO';

const PostTemplate = ({ data }) => {
  const { title, date, author, image } = data.mdx.frontmatter;
  ...

  return (
    <Layout>
      <SEO title={title} />
      ...
    </Layout>
  )
}

export const query = graphql`
query ... {
    ... {
      ... {
        title
       ...
      }
      body
    }
  }
`
export default PostTemplate;

7. Images

Install Source filesystem

A Gatsby source plugin for sourcing data into your Gatsby application from your local filesystem.

npm install --save gatsby-source-filesystem

Install gatsby-image

npm install --save gatsby-image

Followed by transformer sharp

npm install --save gatsby-transformer-sharp gatsby-plugin-sharp

Add following strings to plugins

`gatsby-transformer-sharp`, `gatsby-plugin-sharp`