Headless Eleventy 11ty not generating post files, only index

Question

I'm trying to move away from .md files to a headless CMS.

I'm following this tutorial and for some reason, I see the posts data being created on the index file (blog/index.html) with the lists of articles, but the HTML files for each of the articles are not being generated unless I add a .md file somewhere within the dir.input path.

This is how my .eleventy.js file looks like:

module.exports = function(eleventyConfig) {
    eleventyConfig.setLiquidOptions({
        dynamicPartials: false,
    });

    eleventyConfig.addLayoutAlias('default', 'layouts/default.html');
    eleventyConfig.addLayoutAlias('home', 'layouts/home.html');
    eleventyConfig.addLayoutAlias('post', 'layouts/post.html');
    
    return {
        dir: {
            input: './',
            output: './_site'
        },
        passthroughFileCopy: true
    };
};

And this is how my _data/posts.js file looks like:

// fetch WordPress posts
const
  wordpressAPI = 'http://xxxxxx/wordpress/wp-json/wp/v2/posts',
  fetch = require('node-fetch');


// fetch number of WordPress post pages
async function wpPostPages() {
    try {
        const res = await fetch(`${ wordpressAPI }?_fields=id&page=1`);
        return res.headers.get('x-wp-totalpages') || 0;
    }
    catch(err) {
      return 0;
    }
}

// fetch list of WordPress posts
async function wpPosts(page = 1) {
    try {
      const
        res = await fetch(`${ wordpressAPI }?_fields=id,slug,date,title,excerpt,content&page=${ page }`),
        json = await res.json();
  
      return json
        .filter(p => p.content.rendered && !p.content.protected)
        .map(p => {
          return {
            slug: p.slug,
            date: new Date(p.date),
            dateYMD: dateYMD(p.date),
            dateFriendly: dateFriendly(p.date),
            excerpt: wpStringClean(p.excerpt.rendered),
            content: wpStringClean(p.content.rendered)
          };
        });
    }
    catch (err) {
      return null;
    }
}

//defining wpStringClean and other functions used above.
...

// process WordPress posts
module.exports = async function() {
    const posts = [];
    const wpPages = await wpPostPages();
    if (!wpPages) return posts;
  
    // fetch all pages of posts
    const wpList = [];
    for (let w = 1; w <= wpPages; w++) {
      wpList.push( wpPosts(w) );
    }

    const all = await Promise.all( wpList );
    
    return all.flat();
};

My _includes/layouts/post.html contains this:

---
layout: default
author: Me
pagination:
  data: posts
  alias: post
  size: 1
permalink: "/blog/{{ post.slug | slug }}/index.html"
---
...

What am I missing? Why does 11ty expect an md file in order to create the files for each of the posts?

Answer 1

You might want to try moving your pagination out of a layout template and into your source directory. It looks like you have your pagination key in _includes/layouts, which Eleventy doesn't process as an output file.

Try moving your _includes/layouts/post.html file to your input directory (your project root in this case, ./post.html), and pagination should work properly.