Building a blog with Gatsby from scratch

yarn add react react-dom gatsby

// gatsby-config.js
module.exports = {
  plugins: [],
}

{
    "scripts": {
    "start": "gatsby develop",
    "build": "gatsby build",
  }
}

// src/pages/index.js
import React from 'react'

function App() {
  return (
    <div>
        <h1>Hello World!</h1>
    </div>
  )
}

export default App

--------
title: My First Post
slug: first-post
date: June 14, 2021
--------

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a ex suscipit, tincidunt nisi dapibus, porta augue. Nam quam quam, consectetur in iaculis sit amet, fermentum a tortor. Duis eget ex nisi. Quisque ac nunc in ipsum luctus cursus vitae eget nisl. Quisque et faucibus leo. Suspendisse potenti. Quisque sed arcu nulla.

Vivamus vestibulum aliquet mi. In consectetur euismod risus molestie viverra. Nulla aliquam molestie quam a mattis. Cras nec purus sollicitudin, fringilla odio ut, eleifend ipsum. Morbi imperdiet velit vel ligula euismod accumsan. Vivamus at lorem ac nulla porttitor euismod. Proin molestie, neque ut molestie elementum, nisi sapien tincidunt nisi, at ullamcorper justo mi eu nunc. Aenean in dolor volutpat, pulvinar magna eget, consequat urna.

yarn add @mdx-js/react @mdx-js/mdx gatsby-plugin-mdx gatsby-source-filesystem

// gatsby-config.js
const path = require('path')

module.exports = {
  plugins: [
    // This tells gatsby about the directory
    // And to source files from the directory
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: path.resolve(__dirname, "static", "posts")
      }
    },
    // This plugin will help gatsby handle markdown files that it finds in `static/posts`
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: ['.md'],
      }
    }
  ]
}

query MyQuery {
  allMdx {
    nodes {
      frontmatter {
        slug
        title
        date
      }
    }
  }
}

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "frontmatter": {
            "slug": "first-post",
            "title": "My First Post",
            "date": "June 14, 2021"
          }
        }
      ]
    }
  },
  "extensions": {}
}

import React from 'react'
import { MDXRenderer } from 'gatsby-plugin-mdx'


function PostTemplate(props) {
  // Here pageContext is passed in at build time by gatsby-node.js
  const { frontmatter, body } = props.pageContext

  return (
    <div>
      {/** Header to our post */}
        <div className="header">
            <h1>{frontmatter.title}</h1>
                <p>{new Date(frontmatter.date).toLocaleDateString()}</p>
        </div>

            {/** Post Body */}
            <div className="body">
        <MDXRenderer>
            {body}
        </MDXRenderer>
      </div>
    </div>
  )
}

export default PostTemplate

const path = require('path')

exports.createPages = async ({graphql, actions }) => {
  // This is the query we will use to fetch data from GraphQL
  // This query will look for markdown files that have `/posts/` in
  // Their absolute path. If you keep your posts in another place you will
  // Need to change this
  // Inside each file we need the title, date, slug and the posts body
  const query = await graphql(`
    query Posts {
      allMdx(filter: { fileAbsolutePath: { regex: "/posts/" } }) {
        edges {
          node {
            id
            frontmatter {
              date
              title
              slug
            }
            body
          }
        }
      }
    }
  `)


  // Check for any errors in the query
  if (query.errors) {
    throw query.errors
  }

  // Get the posts and put them into a nice object
  const posts = query.data.allMdx.edges

  // Fetch the post template we created in teh previous step
  const postTemplate = path.resolve(__dirname, "src", "template.js")

  // Iterate over every post we queried, then for every post call
  // actions.createPage() to build a page with the data and template
  posts.forEach(post => {
        const { id, frontmatter, body } = post.node

    // This is the post path. We use a combo of the slug in a string
    // Template prefixed with /post. You can change this to be anything you want
    // So long as the path does not collide with another path
    const path = `/post/${frontmatter.slug}`


    // Now we finally create the page
    // We assign every page the path we just created and build it
    // Using our postTemplate component. We also pass in some context about the post
    // Which will be used by the template via pageProps
    actions.createPage({
      path,
      component: postTemplate,
      context: {
                frontmatter,
        body
      }
    })
  })

}

// src/pages/index.js
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

function App() {

  // This query will get all of your posts
    const posts = useStaticQuery(graphql`
    query {
      allMdx(filter: {fileAbsolutePath: {regex: "/posts/"}}) {
        edges {
          node {
            frontmatter {
              date
              title
              slug
            }
          }
        }
      }
    }
  `)  

  return (
    <div>
        <h1>Hello World!</h1>
        {/** This will render each title out on the page. And lets you click on the link to view the post*/}
        {posts.allMdx.edges.map((edge) => {
        const { date, slug, title } = edge.node.frontmatter;
        const path = `/post/${slug}`;
        return (
          <Link to={path}>
            {title} - {date}
          </Link>
        );
      })}
    </div>
  )
}

export default App