Docusaurus doesn't ship with "blog archive" functionality. By which I mean, something that allows you to look at an overview of your historic blog posts. It turns out it is fairly straightforward to implement your own. This post does just that.
I recently went through the exercise of migrating my blog from Blogger to Docusaurus. I found that Docusaurus was a tremendous platform upon which to build a blog, but it was missing a feature from Blogger that I valued highly; the blog archive:
The blog archive is a way by which you can browse through your historic blog posts. A place where you can see all that you've written and when. I find this very helpful. I didn't really want to make the jump without having something like that around.
Let's create our own blog archive in the land of the Docusaurus.
We'll create a new page under the
pages directory called
blog-archive.js and we'll add a link to it in our
This page will be powered by webpack's
require.context allows us to use webpack to obtain all of the blog modules:
The code snippet above looks in the
blog directory for files / modules ending with the suffix
".md". Each one of these represents a blog post. The function returns a
context object, which contains all of the data about these modules.
By reducing over that data we can construct an array of objects called
metadata property in the screenshot below:
This gives us a flavour of the data available in the modules and shows how we pull out the bits that we need;
Now we have our data in the form of
allPosts, let's display it. We'd like to break it up into posts by year, which we can do by reducing and looking at the
date property which is an ISO-8601 style date string taking a format that begins
Now we're ready to blast it onto the screen. We'll create two components:
Year- which is a list of the posts for a given year and
BlogArchive- which is the overall page and maps over
We're finished! We have a delightful looking blog archive plumbed into our blog:
It is possible that a blog archive may become natively available in Docusaurus in future. If you're interested in this, you can track this issue.