Eleventy project logo

Fixed Category Page Generation

Print Friendly and PDF

Posted: June 14, 2023 | Categories: Eleventy

In Generating Eleventy Category Pages Inside Eleventy Build I described how I was trying to migrate my Eleventy Paginated Category Pages command line tool to run inside of the Eleventy build process.

The module is Eleventy Generate Category Pages and I published it to npm today.

To use it in you Eleventy projects follow the instructions in the project repository, but basically:

Install the module in your Eleventy project using:

npm install eleventy-generate-category-pages

Create a before event handler in your project's eleventy.config.js file using the defaults:

eleventyConfig.on('eleventy.before', async ({ dir, runMode, outputMode }) => {
generateCategoryPages({}, true, false);

or, specifying specific settings for your project:

eleventyConfig.on('eleventy.before', async ({ dir, runMode, outputMode }) => {
dataFileName: 'categories.json',
dataFolder: 'src/_data',
outputFolder: 'src/categories',
postsFolder: 'src/posts',
templateFileName: '11ty-cat-page.liquid'
}, true, false);

Finally, Create a template file for the generated paginated Category pages, you can find an example template in this site or in the module's readme file.


After publishing this post, I realized that I created an infinite loop when running Eleventy with the --watch or --serve flags. Eleventy would generate the category pages then build the site, but whenever I made a change to the site, it would generate the category pages again which, of course, caused the site to generate itself again. Sigh, creating an infinite loop is never fun.

Anyway, I updated my code to force it to only run once in this situation using the following code:

var firstRun = true;
eleventyConfig.on('eleventy.before', async ({ dir, runMode, outputMode }) => {
if (firstRun) {
firstRun = false;
generateCategoryPages({}, true, false);

This works quite well!

Next Post: All Things Open 2023 Speakers

Previous Post: Hiatus

If this content helps you in some way, please consider buying me a coffee.

Header image: Eleventy Project Home Page.