May 4, 2020

List all Posts using 11ty

Unlike Jekyll, Eleventy doesn't create a collection of all posts. But you can do it yourself very easily.

On the front page of a blog, we often list the title of every post on the site. Jekyll will automatically list all pages within the _post directory under one collection. Eleventy, however, creates collections based on the tags. In other words, the only way to tell Eleventy that your page is a blog post is by adding an extra tag. You may not want to add the same tag for every post, especially if you already categorize your posts.

One ~~workaround~~ fully documented feature is to create a custom collection. In .eleventy.js, use the addCollection method to define a new collection. You can call it posts, if you want to (you can also call it ice_cream). Use glob syntax to get only the pages inside your post folder. You can now find all your blog posts with the collections.posts variable.

Here's the code for your .eleventy.js file.

module.exports = function(eleventyConfig) {
    eleventyConfig.addCollection("posts", function(collection) {
        return collection.getFilteredByGlob("posts/**/*.md");
    });
    //...
}

let isSiteAwesome = false

function contactAlec(message) {
  return alert(message)
}

if (!isSiteAwesome) {
  return contactAlec("Let's work together!")
}

Do you want something new and fresh?

Don't get Bored with a project you don't love. I can refresh, or just rebuild you a new website that will knock your socks off.

Contact