Automatically generating pages for each tag used in Astro with MDX
With the launch of Astro 2.0, the Content Collections API became available.
This makes it very easy to query your Markdown/MDX in a type safe matter (and much more, make sure to read the blogpost I linked above).
Setting it up was really easy for my blog, I just had to move my blogs from
/content/blog and add a
/content folder is a reserved folder to be used for Content Collections.
/content/config.ts file you define the schema(s) for the collections you want to create.
At the moment I just have 1 collections, namely my blog.
So I created my schema as follows:
As you can see,
tags are a required property for all of my blogs, luckily I added tags to every blogpost from the start.
In my MDX the tags are defined like this at the top of the file:
Now I have the blog collection defined in my config, I can start working with the data in my
I want to create a separate page for every unique tag which is used in my blogs.
To make this possible, I simply added a file
/pages/blog/tags/[...slug].astro (this is a dynamic route).
In this file, I want to fetch all the blogs from my collection, find the unique tags, and generate a URL for each one of them.
getStaticPaths() function will return the URLs I want to have prerendered during build time (hence the
export const prerender = true; line).
I used a
.reduce() function to calculate the amount of blogs I have available per tag, so I can display this at the top of my tag pages.
The API provided by Content Collections is the
getCollection() function, this allows me to fetch all the blogs in my
blogs collection. As you can see it’s also possible to pass a filter function to this function, which I used to only fetch the blogs which contain the tag for which the current page is generated on line 22.
The actual rendering is simple, I can now use the
allBlogPostsWithTag variable and render the blog posts.
slug matches the tag this page is generated for, I can just use this slug in my title/description/..
The result of this tag page will look like this:
I must say I really enjoy working with Astro for writing Markdown/MDX, especially when they make it this easy!
Source code can be found on Github.
An example of a tag page can be found here.