- November 9, 2025
Let’s say you’ve written a number of posts surrounding a topic. While you could have written it all into one big blog post, that [may turn some readers away](https://slate.com/technology/2013/06/how-people-read-online-why…
- November 9, 2025
Let’s say you’ve written a number of posts surrounding a topic. While you could have written it all into one big blog post, that may turn some readers away. Instead, you publish them over a period of time while including the same category in your front matter. I know some people may suggest using tags, or something else, but instead you chose category.
There’s many blog posts such as one by John M. Wargo discussing how to have that list of all the blog posts displayed across multiple pages, also known as paginated, but what if you want them to be shown on one page? I’m going to tell you how I did it, and let you see an example currently on my site.
First, if you just want to see a current example then see my 100th day to offload post, and scrolling down you’ll see a list of all the posts I wrote as part of 100 Days To Offload. If I move this site away from Eleventy, and there isn’t a list of all the blog posts on that post, an archived copy can be found on archive.org.
How did I do that? It requires you to edit your eleventy.js (also known as the configuration file, which could have multiple different names) and I created an nunjucks file (also known as an .njk file).
Configuration file
Let’s do the configuration file first, since that’s the most common file. I created a collection and sorted it to show the most recent at the top. Here’s the code, then I’ll explain it.
eleventyConfig.addCollection("anyCollectionName", (collection) =>
{
return collection.getAll()
.filter((item) =>
item.data.categories && item.data.categories.includes("categoryNameHere")
)
.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
});
});
This example is in ESM, as of the time of writing, you can also have your config file be in CommonJS. There’s two blog posts I want to point that show the difference between ESM and CommonJS, they are the Eleventy documentation on configuration, and Raphael Höser’s post on CommonJD vs ESM. Please ensure you use the right lanuage within your configuration file, because otherwise it won’t work.
That code goes inside the function, I suggest at the bottom to ensure you can find it again, and we’re using the collections API. You can name anyCollectionName to anything you want, just make sure you write it down so that you can call it again later.
The collection is needed because it’s the start of a callback function, that returns the entire collection. Then the return gets the entire collection.
Next, we need to filter each item in the collection. Making sure to filter by category and we only want items that have the category of categoryNameHere, which you can rename to whatever category you have on multiple posts.
Sorting makes sure the most recent post at the top, also known as descending order. But, you need to have dates within the front matter of each blog post to do the sort, if you don’t have that, then do it now before you forget. You can see the Eleventy documentation for content dates for the value ways to do this. The .sort will convert it to a date property if it’s not picked up as one from the front matter. Return checks to see which post is most recent and put it’s within the order.
You may be asking, what happens if I don’t do the .sort, what order will the posts be? If you don’t do the sort, then the posts will appear in a random order.
We aren’t done yet, now we need to take the collection and get it ready to put it somewhere, for that I used a nunjucks file.
Nunjucks file
You may even be wondering, why use a nunjucks file when I could use this directly into the page or post? It’s so that this collection can be placed anywhere on your site, as well as used in multiple places. Yes, you could copy and paste it into multiple places, but this makes it easier to change it as you see fit in one place.
With the configuration file in the root directory of your website (see Wikipedia if you don’t know where the root directory is), it’s common to put this nunjucks file inside your _includes folder, however you can use a different location. For this example, I’m going to keep it inside the _includes.
Here’s the code, then I’ll explain.
<h2 id="allPosts">All posts as an example</h2>
<p>Sorted by date descending (most recent at the top)</p>
<ul id="listofPosts">
</ul>
You may want to include a heading and a short description at the beginning of this, that way anyone who reads it will better understand what the list is of. That’s what the h2 and paragraph is for. You don’t have to include the id in the heading, but I did that so I could customize it if I wanted to. H2 may seem like the perfect heading to use, however please consider accessibility and use a heading that fits within the rest of the page.
Next, is the ul (an unordered list) that has an id (in this example, called listOfPosts) so I could customize around the list of posts with css. If you want to show a number beside each post then I would suggest doing ol instead.
Time to collect each post inside of the collection that we wrote in the configuration file. We want to put each inside of a list, which includes a link (the url of post) and the title. Now, the title comes from the front matter, so make sure you have a title in each.
If you want to include the date then you’ll want the next line, which takes the date from the front matter, puts it into a Date (rather than a string, which is a double quotes of the front matter), and displays it.
What’s everything after the toLocaleDateString? It’s taking the Date, converting to the American English date format, displays the year as being displayed in numeric (2025), the month long shows the full name of the month (December for example), and the day is similar to year being shown numeric (17). If you wish to change that around, just make sure you use an option available.
I know what you’re thinking, Gregory, you’re Canadian, why aren’t you using the Canadian English date format? Because I first built it using American English and worry about breaking it if I change it. Besides, it doesn’t make that much difference, as I’ve written out exactly how I want it to be displayed.
We can’t forget the closing ul, before ending the one blog post. It then goes through each blog post that’s in the collection and does just that.
Don’t forget to save this file, and know the name of the file because we’ll use it next.
Showing it on page
Now that’s we’ve gotten the list of every post, we need to show it somewhere on your website. As I mention near the beginning of creating the nunjucks file, you can place that in multiple different places, and that affects what you type to display it.
If you’ve put the njk inside the _includes folder, the code you’ll want to use is,
include "nameOfNJKFile.njk"
However, this code is missing something at the beginning and end, you’ll notice that the Eleventy documentation has a bracket and percentage sign, and this code doesn’t. That’s because if you write it anywhere on the site Eleventy tries and includes that file, which doesn’t allow me to be able to fully write it. So this is a bit of a workaround.
If you put that files somewhere else, make sure to enter the where. If you’re unsure how to do so, I suggest putting the file inside the _includes folder, or looking at the Eleventy documentation to understand how to do so.
Making sure to replace the name inside the quotes, with the actual file name. You may notice in my example I included double quotes, but the Eleventy site uses single quotes, with Nunjucks you can use either and they work the same, you can use whichever you prefer.
Before you add it to multiple places, let’s ensure it shows up on one file. Time to build and see the site on your computer. The best way to do this is by running the relevant terminal command to do so, if you don’t know it, then see the Eleventy site. If that doesn’t work, then I suggest opening your package.json and looking for the start script. Of course you’ll have to go to the file where you just put the include in your browser, if it doesn’t show at all, try saving all your files, then changing what’s in the quotes to see if you can get it to show. If you get frustated and are unable to get it to show, consider asking the Eleventy community for help.
Now, it won’t look perfect as there customizations you can do using css, but it’s at least a start.
Troubleshooting
It doesn’t show up
When you are looking at it in your browser, make sure you are on the right page (or post) where you included the includes.
If you’ve put the .njk file in a folder inside of _includes, try moving it to just the _includes folder, then edit where you referenced it to be like the example I included earlier. Make sure to save and refresh the page to see what is shown.
Not all posts are showing up
I know how annoying it can be when not all the posts are showing up. I would encourage you to check each post to make sure they have the same category, by editing the front matter (which is the top of the file, where you put the title, before the content) and saving each post. Sometimes you may believe you included the same category, but when you go to edit it, it’s not there. My trick is to add the category to one file, save that file, then add it to the next file.
If you can tell what exact posts aren’t in that list, you can edit those posts to see what is missing.
How can I customize this using CSS?
You’ll want to find and edit your CSS file, which can change based on what theme you are using. If you’re unsure where it could be, try searching for .css file, or reading the documentation on the Eleventy site of ways to add CSS.
Open that, and add the following,
#listofPosts
{
}
You can then add anything you want inside those brackets. I highly suggest putting this at the bottom of your CSS file, however you can put it wherever it makes most sense for you.
Taking forever to show localhost url
If you’re building your website to view locally (usually by doing –serve), and you notice it’s taking a long time before the localhost URL appears in the terminal, then you may have added the display to a template instead of a post or page. While there are circumstances you may want to do so, I encourage you to ensure that displaying all the posts is working, add it to a post or page, then you can add it back to the template when you’re ready to build the site for everyone to see.
To stop the build (when it’s taking forever), most common is to hold control (also written as Ctrl) and c buttons on your keyboard. That’s if you have an american keyboard on a Windows computer.
Disclosure / Acknowledgement
This is one way of doing all of this and it’s mainly done to get all categories from blog posts, but you may be able to use it to get categories from pages, and you’re welcome to tweak this however you want to suit you and your needs.
I did use AI to make the code in the first place, I understand it enough to be able to explain it. I do acknowledge that AI is made by stealing other people’s content and images, those on work on it behind the scenes are underpaid, and AI uses tons of resources.
Additional Links:
Here are some links that may be helpful or that were able to help me write this post.
Eleventy Docmentation - Collections (Using Tags)
Creating and Using Eleventy Collections by Stephanie Eckles
How to Create Beautiful and Elegant HTML Lists Using CSS by Kaspars Dambis
I Finally Understand Eleventy’s Data Cascade by Ben Myers
Add front matter to all files in a directory by Mike Aparicio