npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

src/components/layout.js

const Container = styled.div`
  margin: 0 auto;
  max-width: 960px;
  padding: 0 1.0875rem 1.45rem;
`;

git clone https://github.com/taylorosbourne/gatsby-workshop.git

npm i -g gatsby-cli

gatsby new my-gatsby-site

src
  --components
    --header.js
    --image.js
    --layout.css
    --layout.js
    --seo.js
  --images
    --gatsby-astronaut.png
    --gatsby-icon.png
  --pages
    --404.js
    --index.js
    --page-2.js
.gitignore
.prettierignore
.prettierrc
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
LICENSE
package.json
README.md
yarn.lock

npm install --save gatsby-transformer-remark

gatsby-config.js

plugins: [
  `gatsby-transformer-remark`,
  {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
]

localhost:8000/___graphql

  query ALL_POSTS_QUERY {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          id
          html
          frontmatter {
            path
            title
            date
            author
          }
        }
      }
    }
  }

index.js 

import { graphql } from 'gatsby'

export const ALL_POSTS_QUERY = graphql`
  query ALL_POSTS_QUERY {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          id
          html
          frontmatter {
            path
            title
            date
            author
          }
        }
      }
    }
  }
`;

src/components/postList.js

import React from 'react';
import { Link } from 'gatsby';

const PostList = ({ posts }) => (
  <>
    <br />
    {posts.map(post => {
      const { frontmatter, id } = post.node;
      const { title, path } = frontmatter;
      return (
        <div key={id}>
          <h3>
            <Link to={path}>{title}</Link>
          </h3>
        </div>
      );
    })}
  </>
);

export default PostList;

index.js

import PostList from '../components/postList';

const posts = data.allMarkdownRemark.edges;

<PostList posts={posts} />

src/template/blogPost.js

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

const BlogPostTemplate = ({ data }) => {
  const { html: __html } = data.markdownRemark;
  const { title, date, author, tag } = data.markdownRemark.frontmatter;
  return (
    <Layout>
      <h1>{title}</h1>
      <h4>{date}</h4>
      <p>Tags: {tag}</p>
      <div
        dangerouslySetInnerHTML={{ __html }}
      />
      <p>written by {author}</p>
    </Layout>
  );
};

export const POST_BY_PATH = graphql`
  query POST_BY_PATH($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        path
        title
        author
        date
        tag
      }
    }
  }
`;

export default BlogPostTemplate;

gatsby-node.js

const path = require('path');

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions;

  const res = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)

  res.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: path.resolve('src/templates/blogPost.js'),
    });
  });
};

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

src/components/layout.js

const Container = styled.div`
  margin: 0 auto;
  max-width: 960px;
  padding: 0 1.0875rem 1.45rem;
`;