Challenges

Creating a Markdown Blog

Load the Post List

In our starter app, there's a directory called data. It contains two markdown files. That's the place we keep blog posts. The filename of those blog posts has a format like this:

year-month-day-[post-title].md

Now we will render the post list in the Index page using these files.

To do that, open the pages/index.js, then import the Node.js fs promise API like this:

import {promises as fsPromises} from 'fs'

After that, replace the getStaticProps function with the following content:

export async function getStaticProps () {
  const markdownFiles = await fsPromises.readdir('data')

  const postList = markdownFiles.map(filename => {
    const slug = filename.replace(/.md$/, '')
    const [year, month, date, ...rest] = slug.split('-')
    const createdAt = (new Date(`${year} ${month} ${date}`)).getTime()
    const title = rest.join(' ')

    return {
      slug,
      createdAt,
      title
    }
  })

  return {
    props: {
      postList
    }
  }
}

Now load our app(http://localhost:3009) into a new tab. Then you will able to see it shows the two posts.


Here's a simple task for you.

While you keep running the app,

  • change the file name of 2020-July-01-Hello-World.md into 2020-July-01-Hello-Next.md.
  • check the app, wait for five seconds, and reload it.
Q: How do you describe the experiment?
authenticating...

Now let's build the app and run it:

yarn build
yarn start

Then follow these steps:

  • load the app again inside a new tab.
  • Change the file name of 2020-July-02-Using-Github-as-a-CMS.md into 2020-July-02-Deploy-into-Vercel.md
  • Then visit the app, wait five seconds, and reload it.
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: