Make individual page for each blog post

gatsby-config.js

@@ -56,8 +56,5 @@ module.exports = {
       },
     },
     `gatsby-plugin-sass`,
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
   ],
 }

gatsby-node.js

@@ -1,7 +1,55 @@
-/**
+const path = require(`path`)
- * Implement Gatsby's Node APIs in this file.
+const { createFilePath } = require(`gatsby-source-filesystem`)
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
 
-// You can delete this file if you're not using it
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({ node, getNode, basePath: `pages` })
+    createNodeField({
+      node,
+      name: `slug`,
+      value: slug,
+    })
+  }
+}
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+    const { createPage } = actions
+
+    const result = await graphql(
+      `
+        {
+          allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) {
+            edges {
+              node {
+                fields {
+                  slug
+                }
+              }
+            }
+          }
+        }
+      `
+    )
+
+    // Handle errors
+    if (result.errors) {
+      reporter.panicOnBuild(`Error while running GraphQL query.`)
+      return
+    }
+
+    // Create pages for each markdown file.
+    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
+    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+      console.log(node);  
+      createPage({
+        path: `/posts${node.fields.slug}`,
+        component: blogPostTemplate,
+        // In your blog post template's graphql query, you can use pagePath
+        // as a GraphQL variable to query for data from the markdown file.
+        context: {
+          slug: node.fields.slug,
+        },
+      })
+    })
+  }

src/components/post-link.js

@@ -7,13 +7,13 @@ const PostLink = ({ post }) => {
   const postDate = new Date(post.frontmatter.date)
   const options = { year: 'numeric', month: 'long', day: 'numeric' };
   const postDateString = postDate.toLocaleDateString('en', options);
-  const postUrl = "/posts/" + post.fileAbsolutePath.split('/').pop().split(".")[0]
+  const postUrl = "/posts" + post.fields.slug
 
   return (
     <Link to={postUrl}>
       <div className={styles.postListItem} role="listitem">
         <div className={styles.postHeader} >
-          <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
+          <span className={styles.postTitle}>{post.frontmatter.title}</span>
           <span className={styles.postDate}>{postDateString}</span>
         </div>
         <div className={styles.postExcerpt}>

src/pages/blog.js

@@ -17,12 +17,14 @@ const IndexPage = () => {
         edges {
           node {
             id
-            fileAbsolutePath
             excerpt
             frontmatter {
               date
               title
             }
+            fields {
+              slug
+            }
           }
         }
       }

src/styles/blog-post.module.scss

@@ -0,0 +1,5 @@
+@import "./variables.scss";
+
+.blogPostWrapper {
+    text-align: left;
+}

src/styles/post-link.module.scss

@@ -26,18 +26,27 @@
   padding: 20px;
   background-color: $black;
   margin-bottom: 20px;
-
-  p {
-    text-decoration: none;
-    color: $white;
-  }
 }
 
 .postExcerpt {
   text-align: initial;
+  text-decoration: none;
+  color: $white;
 }
 
 .headerContainer {
   display: flex;
   justify-content: space-between;
+}
+
+.noDecoration {
+  text-decoration: none;
+}
+
+a,
+a:link,
+a:visited,
+a:hover,
+a:active{
+  text-decoration: none;
 }

src/templates/blog-post.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql } from "gatsby"
+import Layout from "../components/layout"
+import styles from "../styles/blog-post.module.scss"
+
+export default function BlogPost({ data }) {
+  const post = data.markdownRemark
+  return (
+    <Layout>
+      <div className={styles.blogPostWrapper}>
+        <h1>{post.frontmatter.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: post.html }} />
+      </div>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        title
+      }
+    }
+  }
+`