Complete Gatsby Part 6

src/pages/blog/index.js

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { graphql } from 'gatsby'
-import { MDXRenderer } from 'gatsby-plugin-mdx'
-import Layout from '../components/layout'
+import { Link, graphql } from 'gatsby'
+import Layout from '../../components/layout'
 
 const BlogPage = ({data}) => {
     return (
@@ -9,11 +8,12 @@ const BlogPage = ({data}) => {
             {
                 data.allMdx.nodes.map((node) => (
                     <article key={node.id}>
-                        <h2>{node.frontmatter.title}</h2>
-                        <p>Posted: {node.frontmatter.date}</p>
-                        <MDXRenderer>
-                            {node.body}
-                        </MDXRenderer>
+                      <h2>
+                        <Link to={`/blog/${node.slug}`}>
+                          {node.frontmatter.title}
+                        </Link>
+                      </h2>
+                      <p>Posted: {node.frontmatter.date}</p>
                     </article>
                 ))
             }
@@ -30,7 +30,7 @@ query blogMDXQuery {
           title
         }
         id
-        body
+        slug
       }
     }
   }

src/pages/blog/{mdx.slug}.js

@@ -0,0 +1,29 @@
+import Layout from '../../components/layout'
+import { graphql } from 'gatsby'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
+import * as React from 'react'
+
+const BlogPost = ({data}) => {
+    return (
+        <Layout pageTitle="Super Cool Blog Posts">
+            <p>{data.mdx.frontmatter.date}</p>
+            <MDXRenderer>
+                {data.mdx.body}
+            </MDXRenderer>
+        </Layout>
+    )
+}
+
+export const query = graphql`
+    query ($id: String) {
+        mdx(id: {eq: $id}) {
+            frontmatter {
+                title
+                date(formatString: "MMMM D, YYYY")
+            }
+            body
+        }
+    }
+`
+
+export default BlogPost