Challenges

Creating a Markdown Blog

Render the Blog Post

Now we are going to render the Markdown content. Before we do that, we have to do some housekeeping.

In the previous section, we changed file names inside the data directory. We need to reset those. To do that, apply the following commands:

rm -rf data
git checkout -- data

Now install following NPM module which we use to compile Markdown and render them:

yarn add markdown-to-jsx

Open the pages/post/[slug].js file and add these imports at the top of the file:

import {promises as fsPromises} from 'fs'
import Markdown from 'markdown-to-jsx'

Then replace the getStaticProps function with the following: (It will load the markdown file from the disk)

export async function getStaticProps ({ params }) {
  const [year, month, day, ...rest] = params.slug.split('-')
  const createdAt = (new Date(`${year} ${month} ${day}`)).getTime()
  const title = rest.join(' ')

  const content = await fsPromises.readFile(`data/${params.slug}.md`, 'utf8')

  return {
    props: {
      post: {
        slug: params.slug,
        title,
        content,
        createdAt
      }
    }
  }
}

Then replace how we render post.content with following: (It will compile markdown into a set of React elements)

<Markdown>{post.content}</Markdown>

(Here's the final version of the file after all these changes.)

Now run your app with yarn dev. You will be able to navigate between pages and view the rendered markdown content.


Now it's time for an activity:

Follow these steps:

  • Visit http://localhost:3009 from a new tab.
  • Click the post title "Using GitHub as a CMS"
  • Wait 2 seconds in the post page
  • Reload the page
Q: How do you describe the experiment?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: