Nextra Blog Setup

I've been planning to create my own blog and aim to develop it myself. During my research process, I came across Nextra, a framework built on top of NextJS that makes it easy to create content based on Markdown. This is the best approach for me, as I plan to have a single project for both my personal website and blog, while still using Markdown for the blog.

The initial setup for the framework is quite straightforward and well-documented, so you can just follow the official documentation (opens in a new tab) to do so. However, there are some things that are not clearly documented, especially for the blog theme, which I think are quite critical to make the blog ready to be published. I will list them down and write down my findings from my own troubleshooting.

Index page for the blog post

A blog needs a page that lists all the posts that have been written thus far. I'm certain this should be generated automatically, based on the Markdown files in the folder, yet there is no mention of this in the documentation.

I found the following index.md (opens in a new tab) file in the sample repository, which you can use as a reference.

• Copy it to the root directory of your blog pages. In my case, I put all my blogs in /blog route so the index file should be placed in /blog/index.md
• The body shouldn't be empty. In the sample they wrote a header but I replaced it with a link to the root path because I needed a way to return to the personal homepage.
• title will set the header text on the page
• I'm not sure what the purpose of the date is so I just left it as it is.

And, as you can see here, the index page is now working.

The structure of the blog post markdown

I was sure there had to be some structure that we needed to follow for the library or theme to generate the components of the posts. And from this sample post in the Nextra GitHub repository (opens in a new tab), I found what that structure was:

---
title:
date:
description:
tag: # For multiple tags, just separate them with comma
author:
---

I think each part is already self-explanatory, so there is no need to elaborate further.

Listing posts by tags

In the demo page, there is a tag section in the post where we can click on a tag and the page will index posts associated with it. However, this part is not mentioned in the documentation as of writing this blog post.

I found the [tag].mdx (opens in a new tab) file from the same repository that we can use for this purpose by storing them inside the /pages/tags/ directory.

• Not going to pretend I know what the meaning of this file so just copy pasted it as it is

It appears that the /tags/[tag].mdx route is hard-coded into the theme, so it cannot be moved elsewhere. I would like it to be a child route of /blog, but I will need to look further into the theme code to make this happen.

Closing

With all these three things taken care of, my blog is ready to be published and, hopefully, I will be able to write on it consistently (which, hopefully, will motivate me to keep learning as well).

I'm looking forward to writing more, and please give me any feedback on my post; I'd love to get better at this.