Skip to main content

Official 11ty docs

Plugins

Plugins — Eleventy

101 posts in 'Plugins'

Integrating Jupyter Notebook Cells in Eleventy Posts

Blog about programming, scientific machine learning and the related techniques and methods.

Nov 13, 2024

Categories: How to...ImagesPluginsShortcodes

Open Graph Metadata and Images in Eleventy Made Easy

Blog posts are meant to be shared. When sharing links, you'll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy?

Oct 26, 2024

Categories: CSS/SassFront MatterGlobal DataHow to...ImagesPlugins

Building a Blog with Eleventy (blind, any%)

I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy.

Oct 19, 2024

Categories: BloggingCSS/SassCollectionsConfigurationData CascadeFiltersGetting StartedGlobal DataLayoutsMarkdownNavigationPaginationPluginsShortcodes

How I teach Eleventy from scratch

I love how in Eleventy, you can build a site step-by-step and at each small step, have a functional website. In this post, I describe a workshop structure I’ve used lately to teach a few of my friends how to build a static site with Eleventy.

Oct 6, 2024

Categories: BloggingConfigurationFiltersGetting StartedHow to...Plugins

Tips for Running 11ty on Cloudflare Pages

Decap CMS & Eleventy Auto Cache Buster

Sep 7, 2024

Categories: CMSDeploymentPlugins

Eleventy Images Just Got Better

Eleventy 3.0 adds a new API to optimize images anywhere on your site, without shortcodes.

Sep 3, 2024

Categories: ConfigurationImagesMarkdownPlugins

eleventy-vite-plugin and the Output Directory

I tweaked the Eleventy output directory to get around the Vite plugin’s simple string comparison.

Aug 23, 2024

Categories: DebuggingPlugins

Simple Eleventy 3 Excerpts

Sometimes it makes sense to write a unique excerpt. But sometimes the beginning of the page content works well enough, which is why many…

Aug 9, 2024

Categories: FiltersGlobal DataHow to...MarkdownPlugins

Upgraded to Eleventy 3.0 (Beta)

My experience upgrading this blog to the latest Eleventy blog.

Aug 5, 2024

Categories: How to...PluginsUpgrading

July Project Updates

An update on two projects I’ve been working on—one new and one old—based on some development oversights I’ve made in the past that I’d like to prevent going forward.

Jul 20, 2024

Categories: DatesPluginsWebmentions

Aboard the Eleventy 3.0 Train

My developer portfolio and blog website has been officially upgraded to Eleventy 3.0.

Jul 19, 2024

Categories: CSS/SassHow to...PluginsUpgrading

Adding Github-Style Markdown Alerts to Eleventy

How I added support for callouts/alerts to this site

Jun 21, 2024

Categories: How to...MarkdownPlugins

Displaying Line Numbers in 11ty Code Blocks

Add line numbers to 11ty code blocks with Prism and Markdown-it, bypassing the plugin's DOM-dependency by adjusting the renderer during the build process.

Jun 10, 2024

Categories: How to...MarkdownPlugins

Readable HTML and CSS

Instead of minifying HTML and CSS, I make it easy to read.

Jun 9, 2024

Categories: CSS/SassConfigurationHow to...Plugins

Get image pixel colours in Eleventy/Node

How to get colour information from images at build time when using Eleventy (or Node more generally).

Jun 7, 2024

Categories: CSS/SassHow to...ImagesPlugins

Updating to Eleventy v3

I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.

Jun 1, 2024

Categories: CollectionsHow to...ImagesPluginsUpgrading

Virtual Templates in Eleventy

In Eleventy 3.0, virtual templates enable plugin authors to publish and share dynamic templates.

Jun 1, 2024

Categories: ConfigurationFront MatterGlobal DataHow to...Plugins

Eleventy Reading Time Plugin

Maximilian Boll - Frontend Web-Developer in Mainz/Germany - makkusu.dev

May 13, 2024

Categories: How to...Plugins

notion2eleventy

notion2eleventy is a plugin for the Static Site Generator Eleventy (short: 11ty). It loads content from Notion into your 11ty directory. A status-based workflow ensures that only content that has changed is downloaded. The plugin is available as a Node module at npmjs.com.

May 10, 2024

Categories: How to...PluginsRemote Data

Eleventy Image problem with Netlify's build

I used wrong slashes in my source code, so Netlify's build step failed while using Eleventy Image.

May 4, 2024

Categories: DebuggingImagesPlugins

2024 redesign

Some notes about this 2024 redesign.

Apr 4, 2024

Categories: Asset PipelinesHow to...Plugins

How I shaved 1.5 minutes off my Eleventy build time

I had a revelation earlier today that solved a long-standing performance issue I’ve been having with the initial build of my Eleventy website, and here’s how it saved me a bunch of time!

Mar 24, 2024

Categories: Asset PipelinesHow to...PerformancePlugins

Create an Interactive TOC from Markdown-Generated Content

Create an interactive TOC for Markdown in Static Site Generators using the Intersection Observer API.

Mar 24, 2024

Categories: CSS/SassHow to...MarkdownPlugins

Creating a Reading List with Eleventy and Omnivore

This website includes my personal reading list now. It was built using Eleventy and Omnivore, an approach described in this article.

Mar 20, 2024

Categories: DeploymentHow to...PluginsRemote Data

@fec/eleventy-plugin-asset-pipeline: Better Cache Busting with Eleventy

I have created an Eleventy plugin to easily implement cache busting and asset handling.

Feb 18, 2024

Categories: Asset PipelinesHow to...Plugins

Eleventy now support automatic transforms from local paths to output URLs right out of the box.

Feb 14, 2024

Categories: FiltersHow to...Plugins

Setting up image transforms in Eleventy

Eleventy added a transform option to process images in Eleventy v3.0.0-alpha.5 and Image v4.0.1 so, naturally, I had to set it up on my site. If you don't want to read this post, you can check out the full diff for the changes.

Feb 14, 2024

Categories: How to...ImagesPlugins

Eleventy 🤝 Immich

A quick image gallery using Eleventy and backed by Immich

Feb 12, 2024

Categories: CollectionsHow to...ImagesPlugins

Super fast responsive image loading in Eleventy

Automatically optimise and serve images by type and size in Eleventy.

Jan 17, 2024

Categories: How to...ImagesPerformancePlugins

addRemoteData

An Eleventy plugin for fetching remote data and exposing the response as a global data variable.

Jan 16, 2024

Categories: PluginsRemote Data

Fetching Package Dependents from GitHub

Using linkedom to grab all repositories that are depending on my post graph plugin

Jan 16, 2024

Categories: Global DataHow to...Plugins

Added Monthly Posts Heatmap To The Site

I added a Posts per Month heatmap to the site's Statistics page today.

Jan 15, 2024

Categories: Plugins

Pokédex Plugin for Eleventy

Plugin to add a Pokédex to your Eleventy website

Jan 14, 2024

Categories: Plugins

Hiding Future Posts in Eleventy

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

Jan 10, 2024

Categories: BloggingConfigurationGlobal DataHow to...Plugins

Adding Site Search to Eleventy with pagefind-search

Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.

Jan 7, 2024

Categories: CSS/SassHow to...PluginsSearch

My 11ty Plugins

A list of plugins that I have written for the eleventy static site generator.

Jan 5, 2024

Categories: BloggingPlugins

Automatic pre-processing of post images in Eleventy

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

Dec 29, 2023

Categories: ConfigurationHow to...ImagesPlugins

Eleventy File List Plugin

Describes an Eleventy plugin I created that enables a site to display a list of downloadable files.

Dec 27, 2023

Categories: How to...Plugins

December Updates to Eleventy Plugin Stats

I made some enhancements to my Eleventy Post Statistics plugin this month and this post describes the changes.

Dec 23, 2023

Categories: Plugins

Generating OG Images in Eleventy

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

Dec 23, 2023

Categories: ConfigurationPluginsSocial Media

Addition of Post Graphs to Stats page

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

Dec 20, 2023

Categories: BloggingPlugins

Eleventy Post Graph Plugin

Generate Github-style post distribution graph for your blog posts in Eleventy

Dec 19, 2023

Categories: DatesHow to...Plugins

Syntax highlighting code in Eleventy posts

A quick tutorial about how to enable syntax highlighting of code blocks in Eleventy posts

Dec 16, 2023

Categories: CSS/SassHow to...Plugins

VSCode Pasting 11ty Images

Creating content locally like a hosted editor

Nov 21, 2023

Categories: How to...ImagesMarkdownPlugins

Using 11ty to bring back tag clouds

Tag clouds are a good way of seeing what kind of posts are floating around in your blog, lets bring them back

Nov 16, 2023

Categories: FiltersHow to...Plugins

Automatically optimize your images with Eleventy Image and CloudCannon

Websites are becoming increasingly visual and we're adding more and more image content to our sites — but these images need to be optimized.

Nov 14, 2023

Categories: ImagesPerformancePlugins

Better word counts and reading time in Eleventy (11ty)

A short tutorial on how to count words and determine the reading time using Eleventy.

Oct 29, 2023

Categories: How to...Plugins

A short tutorial on how to find backlinks (pages that link to the current page) using Eleventy

Oct 29, 2023

Categories: How to...Plugins

What I learned making top-level.dev

A single purpose site that gives you all of the top level domains in one handy list.

Oct 18, 2023

Categories: PaginationPlugins

webc.nvim

New Neovim Plugin - Basic support for WebC files

Aug 23, 2023

Categories: PluginsWebC

classnames

An Eleventy plugin that joins truthy, deduplicated values into a single, compact string for use in an HTML element's class attribute.

Aug 5, 2023

Categories: PluginsHow to...CSS/Sass

Added Content Stats to Eleventy Plugin Post Statistics

This post describes some new enhancements to my Eleventy Plugin Post Statistics plugin.

Jul 15, 2023

Categories: Plugins

A small Eleventy plugin I built at the end of February 2023.

Mar 17, 2023

Categories: Plugins

Font Subsetting with Eleventy.js

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

Mar 3, 2023

Categories: Asset PipelinesConfigurationHow to...Plugins

CAUTION

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.

Code for copying code: the Eleventy edition

Here’s a workaround for including “copy” buttons in code blocks built by Prism-based syntax highlighting in Eleventy.

Feb 4, 2023

Categories: PluginsHow to...

How to programmatically add tags to posts in 11ty

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

Jan 30, 2023

Categories: BloggingCollectionsConfigurationHow to...Plugins

Why I built my own Vue plugin for Eleventy

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

Oct 22, 2022

Categories: ConfigurationPlugins

First Experience Building with Eleventy's WebC Plugin

My first attempt working with Eleventy's new Web Component plugin

Oct 16, 2022

Categories: WebCPlugins

Manage your SVG files with Eleventy's render plugin

Using renderFile to keep things tidy.

Oct 2, 2022

Categories: PluginsImages

11ty second 11ty: The Render Plugin Part 1

The Render plugin is comprised of two shortcodes for use in your Nunjucks, Liquid or JS templates. It’s a plugin that is bundled with the main 11ty NPM package and ready to use as soon as you nom install 11ty.

Jun 20, 2022

Categories: PluginsYouTube

Optimizing Images with the 11ty Image Plugin

While imagery can enrich your content, it can also slow down your site if it's not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.

Jun 10, 2022

Categories: ImagesPlugins

Let's Learn Eleventy (11 Part Series)

For the past couple of weeks I have been exploring Static Site Generators (SSG) in an effort to see... Tagged with ssg, eleventy.

Jun 8, 2022

Categories: Getting StartedPlugins

Using the Eleventy Image plugin without a central image folder

Eleventy’s official image pre-processing plugin assumes you have a single folder with all your images in it. I needed something different, and this is how I did it.

May 29, 2022

Categories: PluginsImagesHow to...

Nicer Image URLs with eleventy-plugin-remark and remark-images

Website and blog of Florian Eckerstorfer, a web developer living and working in Vienna, Europe. He likes long walks, music and books.

Apr 30, 2022

Categories: Plugins

The new Eleventy Vite Plugin

YouTube video

Mar 21, 2022

Categories: PluginsYouTube

Eleventy + Vue 3

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

Mar 20, 2022

Categories: ConfigurationHow to...Plugins

A 11ty Reading Time Plugin Quest

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

Mar 16, 2022

Categories: How to...Plugins

Eleventy + Lit

Simple. Fast. Web Components.

Feb 7, 2022

Categories: Plugins

CAUTION

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.

Mix and match template syntax in Eleventy using the render plugin

A post by Zach Leatherman (zachleat)

Nov 15, 2021

Categories: Plugins

Eleventy 1.0 - Global Data via Plugins Example

A followup on my post concerning Eleventy's new addGloblData feature

Nov 7, 2021

Categories: Global DataPlugins

An Adobe PDF Embed Plugin for Eleventy

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

Aug 2, 2021

Categories: How to...Global DataConfigurationPlugins

Eleventy plus Vite = elite

Re-bundling, but without the pain of webpack.

Jul 24, 2021

Categories: How to...Plugins

Building a Database Driven Eleventy Site

Using a database (MySQL) to drive content for an Eleventy site

Apr 15, 2021

Categories: PluginsPaginationGlobal Data

Using the Image plugin with Eleventy to build a simple gallery

Apr 7, 2021

Categories: ImagesHow to...PluginsConfigurationImage Galleries

My year of Eleventy plugins

Exactly one year ago today, I published my first Eleventy plugin. Here are some of the things I’ve learned since then.

Jan 25, 2021

Categories: Plugins

RSS, a love letter and walkthrough for my Eleventy site

Power Platform Developer and all around cool guy

Dec 31, 2020

Categories: How to...PluginsLayoutsRSS

Configuring responsive and optimized images with Eleventy

Power Platform Developer and all around cool guy

Dec 21, 2020

Categories: ImagesHow to...Plugins

@fec/eleventy-plugin-remark v2.0.0 released

I released @fec/eleventy-plugin-remark v2.0.0

Oct 4, 2020

Categories: Plugins

Embed Everything

I recently released a plugin for quickly embedding media in Eleventy sites. I think it has potential!

Apr 28, 2020

Categories: How to...Plugins

Adding Text Linting to Eleventy

An example of using Eleventy's Linter feature

Feb 10, 2020

Categories: How to...Plugins

Creating an 11ty Plugin - SVG Embed Tool

In the sites I’ve built with Eleventy (11ty) recently, I’ve found myself reusing a couple filters. This has involved me copying and pasting the code a lot. The solution? Create an 11ty Plugin.

Jun 21, 2019

Categories: PluginsHow to...

Get the blog by email (or RSS)

Powered by Buttondown