DEV Community

Cover image for Creating individual markdown blog pages - part 13
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Creating individual markdown blog pages - part 13

In the previous article, we changed our blog post to be loaded from local markdown files.

With that in place, we can start creating individual markdown-powered blog posts!

If you want to follow this article, use the following branch as your starting point.

Creating individual blog pages

In the blog overview, we set the URL to individual pages as /blog/${slug}, where the slug would be the file's name.

We can start by creating a dynamic page in our blog pages directory.
We can call this file [slug].js. This dynamic format in Next.js allows random slugs to be valid files.

This file will need to use both the getStaticPaths and the getStaticProps functions. This is what they do:

  • getStaticPaths: Create all possible slug options for each post
  • getStaticProps: Get the actively requested page with more details for this specific article

So the first one is to generate all the available blog posts as a valid option, and the second is to fetch the details for this blog.

The structure of the file will look like this:

export async function getStaticPaths() {}

export async function getStaticProps({ params: { slug } }) {}

export default function PostPage({ frontmatter, content }) {}
Enter fullscreen mode Exit fullscreen mode

Let's start by creating the static paths function.

import fs from 'fs';

export async function getStaticPaths() {
  const files = fs.readdirSync('./posts');

  const paths = files.map((fileName) => ({
    params: {
      slug: fileName.replace('.md', ''),
    },
  }));
  return {
    paths,
    fallback: false,
  };
}
Enter fullscreen mode Exit fullscreen mode

As with the blog overview page, we need to read all our files from the posts directory.
We then map them with their filenames, which means a path with the slug will be valid for each file.

With the individual request, we need to extract both the frontmatter parts and the page's actual content.

import fs from 'fs';
import matter from 'gray-matter';

export async function getStaticProps({ params: { slug } }) {
  const fileName = fs.readFileSync(`./posts/${slug}.md`, 'utf-8');
  const { data: frontmatter, content } = matter(fileName);
  return {
    props: {
      frontmatter,
      content,
    },
  };
}
Enter fullscreen mode Exit fullscreen mode

Now we can adjust our render function to return the content for the requested file.

export default function PostPage({ frontmatter, content }) {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <div className='prose mx-auto'>
          <h1>{frontmatter.title}</h1>
          <div>{content}</div>
        </div>
      </div>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Let's take a look at how this renders now.

Unstyled markdown blog post page

So it looks like everything is there, but we see two issues.

  • The markdown is not rendering as HTML
  • The page doesn't apply any styling

For the first part, we can leverage a pretty cool NPM package that will convert markdown into HTML.

Start by installing the package.

npm install markdown-it
Enter fullscreen mode Exit fullscreen mode

Now import this package on the [slug].js page and set the content to render.

import md from 'markdown-it';

export default function PostPage({ frontmatter, content }) {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <div className='prose mx-auto'>
          <h1>{frontmatter.title}</h1>
          <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
        </div>
      </div>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

We have to use the dangerouslySetInnerHTML function. However, since we own the content on the server, this is safe enough.

If now refresh, we can see the # is rendering as a heading, but it still all looks the same.

And luckily for us, there is a Tailwind plugin to handle auto styling for us. This means we don't have to go and add classes to each element.

Install the plugin first:

npm install -D @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

Then open the tailwind.config.js file and add the plugin:

plugins: [require('@tailwindcss/typography')];
Enter fullscreen mode Exit fullscreen mode

Restart the server and open the page again!
You should now see a styled website, go ahead and add some markdown to the page to see it work.

Styled markdown page

You can also find the completed code for this article on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (9)

Collapse
 
susmitadey profile image
Susmita Dey • Edited

Image description

Hey I'm getting this error. Kindly help me. I followed your code.

For this I'm unable to see the home page. /blog page is working fine

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hi Susmita,

It means the slug is not available on your post object.
I think we only add it in the next one, but for now you can add it as the props where we return content and frontmatter here you can add slug

Collapse
 
susmitadey profile image
Susmita Dey • Edited

Thanks it got solved.

Can you write an article in this series like how to filter them by category?
For example:

Image description

It would be really very helpful.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Hey Susmita, that's a really good idea!
I added it to the list and will write a article on that πŸ™

Thread Thread
 
susmitadey profile image
Susmita Dey

Thank you. Looking forward to it.

Meanwhile here's my portfolio:- susmita-dey.vercel.app/

(A little more work to be done)

I learned a lot while building this and following your article series.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Nice! Absolutely love the background with the click effects!
So happy to see you follow the series πŸ™

Thread Thread
 
susmitadey profile image
Susmita Dey

Thank You!! It would be more helpful if you review it properly and give a proper feedback as I'll be using it to apply for jobs.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

I think overall you have a good setup.
I see your focus is around getting hired, so I would put your achievements and projects a bit more forward.

Especially what your involvement was and why that helped to succeed the project.

I also see quite a lot of technical/management type of things you've done, perhaps also good to mention those skills on the projects.

The main thing being:
What does a company get when they hire you?
(And let your work speak for you here)

Hope this helps πŸ™

Thread Thread
 
susmitadey profile image
Susmita Dey

Thank You for your guidance.