Eleventy

22 links • Web DevelopmentStatic Site GeneratorsEleventy

Eleventy is my static site generator of choice for my personal sites and projects.

Ignore .gitignore #

By default, Eleventy won't watch files listed in your .gitignore. You can tell it to not do that:

eleventyConfig.setUseGitIgnore(false)

Changing Directory Locations #

I tend to do this so I can have the source of my project inside a directory instead of all of it in the root. In .eleventy.js:

return {
    dir: {
        input: "src/pages",
        output: "public",
    }
}

Copy Assets and Files to the Output #

If you want non-template files copied through to your final build (like css files or images), you can use a passthrough in .eleventy.js:

eleventyConfig.addPassthroughCopy({ "src/pages/_eleventy/assets": "assets" })

Filters #

Filters allow you to extend the template engines to modify content. I'm probably misusing these in some places. Below is an example of a filter to strip /index.html from some paths I had on my personal site.

eleventyConfig.addFilter('stripIndex', function(path) {
    return path.replace('/index.html', '/');
})

Using Local plugins #

.eleventy.js

eleventyConfig.addFilter("myPlugin", require('./path/to/plugin.js'))

plugin.js

module.exports = function() {
    return 'my plugin'
}

Object Debug #

// .eleventy.js
eleventyConfig.addFilter('objectDebug', function(value) {
    return `<pre>${JSON.stringify(value, '', 2)}</pre>`
})

// layout.njk
{{ myObject | objectDebug | safe }}

Highlight Lines in Code Blocks #

Lines are zero-indexed.

```lang/1
const myFunction = () => {
    return 'Hello'
}
```

Outputs:

const myFunction = () => {
    return 'Hello'
}

Ignore Nunjucks in Markdown Files #

templateEngineOverride: njk,md
// index.md
{% aShortCode %}
{{ aVariable }}

Post Archive by Year #

{% set datePrinted = false %}
{% set currentYear = 1000 %}
{% set started = false %}

{%- for post in collections.posts %}
    {% set postYear = post.data.date.getFullYear() %}

    {% if postYear != currentYear %}
        {% if started %}
            </ul>
        {% endif %}
        <p>{{ postYear }}<p>
        <ul>
        {% set started = true %}
    {% endif %}

    <li>
        {{ post.data.title }}
    </li>

    {% set currentYear = postYear %}
{% endfor %}

Automatic Ordering for Eleventy Navigation #

Eleventy Navigation is a great plugin for generating navigation and breadcrumbs. One of the properties is order to indicate the order of the pages. This is great if you have a few pages but if you have hundreds (like this site does) you can get some unexpected results like random ordering, especially if you have some ordered but not others.

To solve this, I create a pageIndex collection by mapping through the ordered collection of pages:

// .eleventy.js
eleventyConfig.addCollection('pageIndex', function(collections) {
    let pageIndex = {}
    let index = 1

    collection.getFilteredByGlob("src/pages/**/*.md")
    .sort() // sort by whatever attribute, I used URL
    .forEach(c => {
        pageIndex[c.data.page.url] = index
        index++
    })
})

// pageIndex output
{
    '/': 1,
    '/a/': 2,
    '/a/subpage/': 3,
    '/s/': 4
}

Then use this collection to get the count in pages.11tydata.js:

module.exports = {
  eleventyComputed: {
    eleventyNavigation: (data) => {
        let order = 0
        const indexCollection = data.collections.pageIndex
        if (indexCollection)
        {
            const pageIndex = indexCollection[data.page.url]
            if (pageIndex) order = pageIndex.order
        }
        return {
            // key, title, etc
            order,
        }
    },