Creating a Gatsby or NextJS Markdown Blog

Why a Markdown Blog

NextJS Template

The Markdown

title: 'Hello, world!'
author: 'Cassidy'
Humblebrag sartorial man braid ad vice, wolf ramps in cronut proident cold-pressed occupy organic normcore. Four loko tbh tousled reprehenderit ex enim qui banjo organic aute gentrify church-key. Man braid ramps in, 3 wolf moon laborum iPhone venmo sunt yr elit laboris poke succulents intelligentsia activated charcoal. Gentrify messenger bag hot chicken brooklyn. Seitan four loko art party, ut 8-bit live-edge heirloom. Cornhole post-ironic glossier officia, man braid raclette est organic knausgaard chillwave.- Look at me
- I am in a list
- Woo hoo

The Individual Post Template

import Link from 'next/link'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import Layout from '../../components/layout'export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
if (!frontmatter) return <></>
return (
<Layout pageTitle={`${siteTitle} | ${frontmatter.title}`}>
<Link href="/">
<a>Back to post list</a>
<p>By {}</p>
<ReactMarkdown source={markdownBody} />
//This takes the slug and imports the data from the proper markdown file
export async function getStaticProps({ ...ctx }) {
const { page } = ctx.params
const content = await import(`../../markdown/${page}.md`)
const config = await import(`../../siteconfig.json`)
const data = matter(content.default)
return {
props: {
siteTitle: config.title,
markdownBody: data.content,
//This creates a slug for each markdown file in the markdown folder
export async function getStaticPaths() {
const blogSlugs = ((context) => {
const keys = context.keys()
const data =, index) => {
let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
return slug
return data
})(require.context('../../markdown', true, /\.md$/))
const paths = => `/mark/${slug}`) return {
fallback: false,

Page Template

The Main Page


Gatsby Markdown Blog

How this works


Bottom Line



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder


Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.