Skip to main content

Official 11ty docs


Configuration — Eleventy

106 posts in 'Configuration'

Notifications for New Eleventy Posts in GitLab - Part 1

An implementation for identifying new posts in an Eleventy site built on GitLab pages and sending post-specific notifications (part 1 of 2).

Categories: CollectionsConfigurationHow to...

Automatic image pre-processing in Eleventy, Part 2

A post about the new automatic template image scaling support in Eleventy Image 4.0.0.

Categories: ConfigurationHow to...Images

How I Eleventy

Documenting a refactor that introduced a folder structure and configuration changes, which summarises how I Eleventy.

Categories: ConfigurationHow to...LayoutsMarkdownPermalinksShortcodes

Adding inline SVGs to Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice for navigating software as a career.

Categories: How to...ImagesConfiguration

Eleventy: pathPrefix and GitHub Pages

Quick step-by-step recipe on how to deploy Eleventy site inside a subdirectory.

Categories: ConfigurationDebuggingDeployment

Eleventy - Group posts by year

Let's create a blog with posts grouped by year in descending order. This is actually tricky to pull off!

Categories: BloggingCollectionsConfigurationDatesHow to...

Updating 11ty to enjoy ESM

I updated the version of 11ty I use for this blog to the current alpha, to switch from CJS to ESM.

Categories: ConfigurationHow to...

Eleventy: custom markup alongside item contents

Short and quick tutorial on how to embed custom HTML content between post paragraphs on an Eleventy site.

Categories: ConfigurationFiltersHow to...

Eleventy - Differentiate between dev and production builds with unique favicons

It is easy to mix up the dev and production versions of a website in the browser. Let's make them look unique by using different favicons.

Categories: ConfigurationData CascadeDeploymentImages

Keeping your Algolia search index up to date

Keeping your search index up to date as your content changes is critically important to ensure your search results return valid information. Here's how it's done.

Categories: ConfigurationHow to...Search

How to connect Eleventy and Storyblok

This is a step-by-step tutorial on how to query data from Storyblok to use it in an Eleventy project.

Categories: CMSConfigurationGlobal DataHow to...

Lessons Learned Moving Eleventy form CommonJS to ESM

A post by Zach Leatherman (zachleat)

Categories: ConfigurationHow to...Plugins

Different favicon for development build

How to make tabs in the browser always show which build you’re working on.

Categories: ConfigurationHow to...Nunjucks/Macros

Top 11 free Eleventy themes for 2024

A curated list of the top 11 Eleventy themes on GitHub in 2024.

Categories: ConfigurationGetting StartedLayouts

Eleventy - Get autocompletion and doc info in your eleventy config in VS Code

In VS Code, you don't get autocompletion in your eleventy config. You don't get info about functions when you hover over them. Here is how you add it.

Categories: ConfigurationHow to...

Eleventy - Create a global production flag

A production flag enables you to run activites in production only e.g. minifying assets. There isn't a built-in flag in eleventy. How can we add one?

Categories: ConfigurationGlobal DataHow to...Layouts

Mastering Eleventy Folder Structures: From Default Setups to Real-World Best Practices

Explore the essentials of Eleventy's folder structure in this guide, perfect for optimizing your project's efficiency and scalability. Learn from basic setups to advanced custom structures, ensuring your 11ty site is perfectly organized for peak performance.

Categories: ConfigurationGetting StartedPerformance

Getting up to Speed with Eleventy: Config and Collections

Continuing his Eleventy tutorial, David Eastman shows how to configure the system, make use of templates, what collections are, and more.

Categories: CollectionsConfigurationLayouts

Cloudflare _redirects

Keeping old paths alive on the new site

Categories: ConfigurationDeploymentHow to...

Adding Decap CMS to 11ty

One person is typing.

Categories: BloggingCMSConfigurationHow to...Plugins

A Simple Guide to Redirects on Neocities with Eleventy

We need more tutorials for using Eleventy outside of Netlify. Lets take a look at setting up redirects on Neocities with Eleventy.

Categories: ConfigurationDeploymentFront MatterHow to...Pagination

Hiding Future Posts in Eleventy

Describes how to hide posts with a future publishing date in an Eleventy site.

Categories: BloggingConfigurationGlobal DataHow to...Plugins

I design and build websites, web applications, and data visualizations. I’ve been known to play fiddle from time to time and board games.

Categories: ConfigurationHow to...ImagesLayoutsImage Galleries

Minifying and compressing text files to reduce load

I am continuing to catch up with the technical basics for a modern‐day website. This time I add minification and compression to my 11ty build and the Caddy configuration.

Categories: ConfigurationHow to...Performance

Building robots.txt from a simple API endpoint

The online journal of Ashur Cabrera.

Categories: ConfigurationHow to...Remote Data

Automatic pre-processing of post images in Eleventy

A brief description of how I set up automatic image scaling in Eleventy.

Categories: ConfigurationHow to...ImagesPlugins

Generating and Caching Open Graph Images with Eleventy

How I'm caching my open graph images with eleventy-plugin-og-image instead of generating them on every build

Categories: ConfigurationHow to...ImagesLayoutsSocial Media

Generating OG Images in Eleventy

Creating OG images for your Eleventy page is really easy with eleventy-plugin-og-image. I show you how!

Categories: ConfigurationPluginsSocial Media

Generating a static blog with Eleventy

From 0 to minimal blog using 11ty. I tell you the steps I took to create the minimal technical basis for this website's content.

Categories: BloggingCollectionsConfigurationInternationalizationLayouts

How to keep links between Markdown files working both locally and on your Eleventy site.

Categories: ConfigurationMarkdown

Let’s create a microblog with visual editing using Bookshop and Eleventy

Visual editing is table stakes for a modern content management workflow.

Categories: BloggingCMSCSS/SassConfigurationHow to...

Default layouts in 11ty

Default layouts in 11ty

Categories: ConfigurationHow to...Layouts

Eleventy Excellent demo branches

Frontend developer and designer living in Madrid. I enjoy working with semantic HTML, vanilla Javascript and modern CSS.

Categories: BloggingConfigurationPagination

Cleaning up the 11ty config

The eleventy config file can get cluttered quickly so I cleaned mine up

Categories: ConfigurationHow to...

Clean Up Your Config File

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: ConfigurationHow to...

TinaCMS + 11ty

Taking a deep dive into setting up a CMS for my static site with TinaCMS

Categories: BloggingCMSConfigurationDeploymentHow to...

Making a lighthouse-fast website with a static site generator like 11ty

Creating an SSG flow to generate a highly optimized static website.

Categories: ConfigurationHow to...ImagesCSS/SassSocial Media

Build a Blogroll with Eleventy

A step-by-step guide to adding a blogroll, complete with each blog's latest posts, to your Eleventy site.

Categories: Data CascadeRemote DataHow to...ConfigurationBlogging

CloudCannon + Eleventy

Getting CloudCannon setup with your Eleventy project is easier than you think

Categories: DeploymentHow to...CollectionsConfiguration

Flickerless dark mode in 11ty with Tailwind CSS

Just a couple of days ago, I was about to rebuild my portfolio website from scratch. As a typical web... Tagged with webdev, javascript, tutorial, html.

Categories: CSS/SassConfigurationHow to...

11ty draft posts - Set up a draft system in 11ty

Setting a post to draft in 11ty while writing

Categories: ConfigurationHow to...Drafts

Build your own 11ty starter

If you want to build a website quickly then 11ty is a great tool. Here is how I set up my starter pack to get me up and running in a few minutes.

Categories: How to...ConfigurationGetting Started

Use TailwindCSS with Eleventy Static Site Generator

A guide to using Tailwindcss and Eleventy with auto reloading feature. You will also learn to add DaisyUI in conjunction with TailwindCSS.

Categories: CSS/SassConfigurationHow to...

How I set up lastmod date in my 11ty xml sitemap

Google now want an accurate lastmod date in the xml sitemap. Here is how I set it up in my 11ty site.

Categories: How to...Configuration

Introducing: 11ty with reasonable defaults

TL;DR Initialize your 11ty projects with reasonable defaults: npm install -g yo npm... Tagged with showdev, webdev, productivity.

Categories: Configuration

Generating CSS with PostCSS and eleventy.before

I'm trying to keep the setup of my personal projects as simple as possible. Today, we're looking at how CSS is generated.

Categories: CSS/SassConfigurationHow to...

Integrating JSON-LD Into Your Eleventy Pages

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: ConfigurationHow to...

Meta Description and Keywords in Eleventy

This article describes how I added HTML Keywords to an Eleventy site.

Categories: ConfigurationHow to...

Automated workflows for websites

In this article, I'm writing about automated workflows I added to this blog.

Categories: ConfigurationHow to...

New Blog Same as the Old Blog

Details about my site rebuild.

Categories: BloggingConfiguration

Displaying Build Details in an Eleventy Site

I leveraged some old code to add the ability to capture build details and save them with a project. In this post, I describe the utility I created that allows you to easily display build information in an Eleventy site.

Categories: ConfigurationHow to...

Hiding drafts and future posts in Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice for navigating software as a career.

Categories: How to...ConfigurationDrafts

Font Subsetting with Eleventy.js

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: Asset PipelinesConfigurationHow to...Plugins

Combining 11ty Static Site Generator with ASP.NET Core

Combining 11ty Static Site Generator with ASP.NET Core for maximum awesomeness.

Categories: Asset PipelinesConfiguration

Setup GitLab Review Apps with Eleventy

A technique to setup GitLab Review Apps for an Eleventy site.

Categories: ConfigurationDeploymentHow to...

Using Rmarkdown with Eleventy

My work, notes, musings and more. Some serious, some not.

Categories: ConfigurationFront MatterHow to...Markdown


The posts below were published before the release of Eleventy v2.0.0 (Feb 8, 2023). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

How to programmatically add tags to posts in 11ty

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: BloggingCollectionsConfigurationHow to...Plugins

Blog and general digital garden of the full stack programmer Simon Dann.

Categories: BloggingConfigurationHow to...Markdown

External Asset Pipeline with Eleventy

I like to use NPM scripts for my asset pipeline instead of using Eleventy to generate assets and orchestrate everything. The latest release of Eleventy Dev Server makes that approach both easy to implement and quite performant.

Categories: Asset PipelinesConfiguration

Using Eleventy filters in Directory Computed Data

Eleventy Computed Data makes it easy to reuse your filters outside of your templates.

Categories: ConfigurationData CascadeFilters

Organizing the Eleventy config file

Eleventy lets you create a file called eleventy.js to configure the SSG to your own project’s needs. This article is all about organizing your config file!

Categories: Configuration

Why I built my own Vue plugin for Eleventy

Why and how I built my own Vue plugin for Eleventy.

Categories: ConfigurationPlugins

Support Draft Blog Posts in Eleventy

A look at various ways of supporting draft posts with Eleventy

Categories: How to...ConfigurationCollectionsDrafts

You should add a generator tag to your Eleventy site

Hear me out on this one, I've got a short but sensible list as to why.

Categories: Configuration

Inlining SVGs in Eleventy

Medium post

Categories: ConfigurationHow to...Images

Generate a sitemap for your Eleventy website

How to create a sitemap for your static website built with Eleventy. Tagged with eleventy, sitemap, xml, staticsite.

Categories: How to...Configuration

Eleventy + Vue 3

Tips and tricks for using Vue 3 Single File Components as templates for Eleventy.

Categories: ConfigurationHow to...Plugins

11ty aliases the right way

A short little tutorial on how to make redirects in 11ty that aren't awful.

Categories: CollectionsConfigurationHow to...Pagination

Generate Social Image Covers With Eleventy And Node-Canvas

This static blog is generated with Eleventy and all its social images are automatically generated with node-canvas. In this tutorial we’ll set up a basic version of this script so you can use it on your blog as well.

Categories: ConfigurationHow to...Social Media


The posts below were published before the release of Eleventy v1.0.0 (Jan 9, 2022). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

11ty tips I wish I knew from the start

David East's personal site full of blog posts and stuff.

Categories: ConfigurationData CascadeGetting StartedNavigation

Just Enough JavaScript for Eleventy

Want to try Eleventy, but not very experienced in JavaScript yet? You're in the right place.

Categories: ConfigurationHow to...

Managing a secrets directory in your eleventy site

A personal blog where I write about my side projects

Categories: ConfigurationHow to...

Eleventy 1.0 - Dynamic Ignores

Eleventy 1.0's new support for dynamic file ignore settings.

Categories: Configuration

Eleventy Hack/Tip/Possibly Bad Idea - Dynamic Theme Testing

How to test a new theme in an Eleventy site

Categories: How to...Configuration

Inspecting an existing 11ty project

Great talk by Cassey Lottman

Categories: How to...ConfigurationDebugging

An Adobe PDF Embed Plugin for Eleventy

Eleventy users can now add a PDF Embed plugin to their sites

Categories: How to...Global DataConfigurationPlugins

Getting your bearings in an existing Eleventy project

Questions to ask to start making changes quickly

Categories: Configuration

npx eleventy !== npx @11ty/eleventy

Use the former at your own risk.

Categories: How to...Configuration

Using the Image plugin with Eleventy to build a simple gallery

Categories: ImagesHow to...PluginsConfigurationImage Galleries

Create an Eleventy podcast feed

Want to add an iTunes and Google friendly podcast feed to your Eleventy site? Here's how.

Categories: FiltersBloggingHow to...Configuration

Using Pre-Built Lunr Indexes with Eleventy

Switching to Pre-Built Lunr indexes with Eleventy sites

Categories: SearchHow to...Configuration

Give your Eleventy Site Superpowers with Environment Variables

Eleventy is increasing in popularity because it allows us to create nice, simple websites, but also — because it’s so developer-friendly. We can build

Categories: ConfigurationHow to...

Building my personal site with Eleventy

Power Platform Developer and all around cool guy

Categories: Getting StartedBloggingWhy Eleventy?ConfigurationLayouts

Inlining scripts and styles in 11ty

I’m Kitty Giraudel, a non-binary trans frontend developer based in Berlin, focused on accessibility and inclusivity.

Categories: CSS/SassConfiguration

Using a folder other than posts/ with Eleventy

I don’t want to wrestle with overwrought Webpack configuration, write GraphQL queries for basic navigation, or scream at types for failing to transpile or whatever. I want to write

Categories: ConfigurationHow to...

Selecting Random Posts in Eleventy

A look at adding links to random pages in Eleventy

Categories: How to...FiltersConfiguration

Setting up Homebrew, NPM and Eleventy on a fresh mac

Walking through setting up Homebrew on your Mac, so you can install NPM and Eleventy.

Categories: ConfigurationHow to...

Add a generator meta tag to your Eleventy website

A generator meta tag is used to give some credit to the tools you use to build a plain HTML website. Let's give Eleventy some credit. Tagged with eleventy, jamstack, staticsite, javascript.

Categories: How to...Configuration

Five Critical Things To Do Before Working With 11ty

Five pieces of knowledge I wish I knew before working with 11ty, the JavaScript-based static site generator. Get a jump start using this fantastic tool.

Categories: ConfigurationData CascadeFiltersGetting Started

Building a website with a static site generator, part 3: Domain, Analytics and Forms

Once your website is up and running, it's time to get a professional looking domain, think about analytics and collect data with forms.

Categories: Getting StartedBloggingConfiguration

Adding Another Template Language to Eleventy

Father, husband, developer relations and web standards expert, and cat demo builder.

Categories: ConfigurationHow to...

Checking (and Upgrading) Template Engines in Eleventy

How to check the version of embedded template engines in Eleventy

Categories: How to...ConfigurationFilters

Adding a Last Edited Field to Eleventy

How to add a "Last Edited" value to Eleventy pages.

Categories: How to...CollectionsConfigurationDates

Code comfort: Eleventy and webpack

Some words about my Eleventy/webpack configuration.

Categories: How to...Configuration

Adding Search to your Eleventy Static Site with Lunr

Using Lunr to add client-site search to your static site

Categories: SearchCollectionsConfiguration

Get the blog by email (or RSS)

Powered by Buttondown