Firehose 1,608
2021
Just Enough JavaScript for Eleventy
Want to try Eleventy, but not very experienced in JavaScript yet? You're in the right place.
By Cassey Lottman (12 posts)
Going serverless with Eleventy
Let's walk through how to configure Eleventy and how to use Eleventy Serverless to handle asynchronous logic in a real-world project.
By David Atanda (2 posts)
How to use Vue to template your Eleventy projects
If you like using Eleventy, but would love to leverage Vue syntax in your templates, here's a guide on how to do that.
By Henry Desroches (2 posts)
How to use Contentful with Eleventy
Here's a pretty 0-60 tutorial on integrating Contentful headless content with Eleventy static site generation! I hope you think it's nice!
By Henry Desroches (2 posts)
Enabling Emoji Shortcodes in Eleventy Markdown Files
Turn on emoji shortcodes in markdown files in Eleventy by adding the markdwon-it-emoji plugin.
By Wes Goulet (1 post)
An In-Depth Tutorial of Webmentions + Eleventy
Join the Indie Web by adding Webmentions to your serverless Eleventy static site with this step-by-step tutorial. No client-side JavaScript needed!
By Sia Karamalegos (13 posts)
Includes and Macros
Comparing techniques for encapsulating HTML components in Nunjucks or Jinja2.
By Evan Sheehan (8 posts)
Dynamically choosing a data file to use in Eleventy templates
What if I need _data/stuff.json sometimes and _data/thing.json other times?
By Cassey Lottman (12 posts)
Configuring Web Fonts in 11ty with Global Data
Use global data in 11ty to create a single configuration for fonts that you can reference in your templates and CSS.
By Aleksandr Hovhannisyan (14 posts)
Creating and Using Eleventy Collections
Collections allow you to group templates and then sort, filter, and perform other manipulations to customize the display of your template content and data.
By Stephanie Eckles (21 posts)
Migrating to Eleventy
Quick brain dump around my experience with Eleventy.js, a static site generator.
By Ryan Mulligan (1 post)
Managing a secrets directory in your eleventy site
Eleventy 1.0 - Global Data via Plugins Example
A followup on my post concerning Eleventy's new addGloblData feature
By Raymond Camden (104 posts)
Eleventy 1.0 - New Option for Global Data
A look at a new way to create global data for Eleventy 1.0 sites.
By Raymond Camden (104 posts)
Converting a simple HTML site to use Eleventy
Updated social sharing (open graph protocol) images for my personal site
Using the large social sharing images added nothing to the information being published so I've decided to stop using them.
By Michael Harley (14 posts)
Eleventy 1.0 - Dynamic Ignores
Eleventy 1.0's new support for dynamic file ignore settings.
By Raymond Camden (104 posts)
Adding PDF Output Support to Eleventy
Using Eleventy transforms and Adobe PDF Services to create dynamic PDFs.
By Raymond Camden (104 posts)
Eleventy Hack/Tip/Possibly Bad Idea - Dynamic Theme Testing
Introduction to Eleventy (11ty) ELEVENTY
This is a simple introduction to Eleventy (11ty), a popular static site generator.
By Keenan Payne (1 post)
Requesting YouTube API endpoint using Node and 11ty
How to request YouTube API endpoint using Nodejs standard API and Eleventy (11ty) in the frontend!. Tagged with node, eleventy, javascript, html.
By Mathieu Huot (2 posts)
Creating a (Manual) Related Posts Feature in Eleventy
How to handle post relations in Eleventy in a manual fashion.
By Raymond Camden (104 posts)
Make Eleventy the next thing you learn
Why looking at the Eleventy Static Site Generator is the logical next step when learning how to make websites
By Thomas Semmler (3 posts)
Supporting Multiple Authors in an Eleventy Blog - Follow-Up
An udate to my earlier Eleventy demo showing how to handle multiple authors
By Raymond Camden (104 posts)
How to Create and Deploy Your First Eleventy Website
Learn how to build a website with Eleventy (11ty), a static site generator that gives you simplicity and flexibility.
By Ayooluwa Isaiah (1 post)
Reply-to links in site feeds
I really love when people include Reply-to links in their RSS feed. Here are a couple options.
By Michael Harley (14 posts)
Using PDFs with the Jamstack - Building a Document Viewer
Using Adobe PDF Services to build a document viewer for your Jamstack site
By Raymond Camden (104 posts)
Adding Algolia search to an Eleventy site with Netlify
After months of struggles I finally found a relatively easy solution.
By Mike Aparicio (4 posts)
How to Separate Content from Website Code
It's much easier to maintain a site over time when the content is separate from the code. Walk through that process using a real example with Eleventy.
By Sean David (1 post)
Reusable code snippets and components in Eleventy
Some cunning ways to use Nunjucks and 11ty shortcodes for reusable blocks
By Laurence Hughes (4 posts)
Using Liquid Blocks in Eleventy Layouts
A look at using multiple blocks and having them render in Liquid templates
By Raymond Camden (104 posts)
How I Set Up a Project With Eleventy
Introduction This is a quick overview on my typical setup for an 11ty project. I really... Tagged with jamstack, eleventy.
By Nathan Blaylock (1 post)
More Work on Algolia and My Blog
An update to my fight to get search working right on my blog
By Raymond Camden (104 posts)
Using parameters in your eleventy includes with nunjucks macros
Includes are great. But for actual reusability of code, parameters are always needed. Luckily, nunjucks makes this possible with macros!
By Thomas Semmler (3 posts)
A Running Log - Garmin Connect and Eleventy
Use Eleventy to log Garmin Connect activities on a website and automate the process with Zapier and Netlify.
By Josh Crain (1 post)
Automate Netlify Redirects in 11ty
Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of 11ty templating magic!
By Aleksandr Hovhannisyan (14 posts)
Filter Titles for RSS and Social Shares
Replace characters that are often stripped out of post titles by RSS readers and social network link embeds
By Stephanie Eckles (21 posts)
Modular code with Nunjucks and Eleventy
These days, web development and design are all about modularization and components. Template languages have a lot to offer and Eleventy itself has a few tricks up its sleeve.
By Jérôme Coupé (10 posts)
Reusable code snippets and components in Eleventy
Some cunning ways to use Nunjucks and 11ty shortcodes for reusable blocks
By Fuzzy Logic (3 posts)
An Adobe PDF Embed Plugin for Eleventy
Eleventy users can now add a PDF Embed plugin to their sites
By Raymond Camden (104 posts)
When to Use Pagination in Eleventy
Contrasting pagination and looping, with examples and a reference image.
By Shiv J.M. (13 posts)
Page Level URL Fetching with Eleventy
Using Nunjucks shortcodes in Markdown files in Eleventy
Structuring Eleventy projects
One of the great things about Eleventy is its flexibility and its lack of assumptions about how your projects should be organized. However, in order to preserve my own sanity, I needed to come up with a default files and folders architecture that made sense to me.
By Jérôme Coupé (10 posts)
Generate Page Content From a Global Data File Using Eleventy
There are many great features to choose from when building websites with Eleventy. One feature in particular that I find very useful is the ability to iterate over a global data file and generate page content using a templating language of your choice.
By Tanner Dolby (2 posts)
Blog post filter with Netlify Functions
I built my first ever serverless feature to add tag filtering to my blog listing. Here's how I integrated that to my Ghost & Eleventy setup with Netlify Functions.
By Juha-Matti Santala (22 posts)
Building a notification thingamajig with Eleventy data
Getting your bearings in an existing Eleventy project
Making an 11ty collection from a remote XML file
RSS is XML with a specification, however not all RSS feeds follow the spec. In this post, we process the feed as an XML document meaning we can access the extra attributes and values
By Mike Street (13 posts)
Eleventy and template extends
A quirk detail about how Elevent handles extending a Nunjucks layout using template blocks.
By Ramon Lapenta (1 post)
Setting a conditional variable in Javascript
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Improving my automated open graph image process w/ Eleventy
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Integrating Eleventy with GitHub Flat Data
Improving upon my image processing with Eleventy
I recently relaunched my website and I believe I have improved upon my image processing setup using eleventy-img. Here is what I did.
By Michael Harley (14 posts)
Manage Design Tokens in Eleventy
Eleventy offers the ability to transform data, which is handy for creating and transforming design tokens
By Fuzzy Logic (3 posts)
Create an 11ty collection from any RSS feed
Using 11ty global data files, we create an 11ty collection from an RSS feed. As an example, we show the latest YouTube videos on our website
By Mike Street (13 posts)
Creating an Additive Capture Shortcode in Eleventy
Creating a capture shortcode that appends insteads of replacing
By Raymond Camden (104 posts)
Creating a dynamic color converter with 11ty Serverless
11ty started out as a static site generator, but is quickly getting into the dynamic game. Use the templates and structure you love, but use them on the server, as well!
By Bryan Robinson (15 posts)
Creating an 11ty collection from a JSON API
Using 11ty Global data files, you can make collections from JSON APIs, allowing you to make whole websites from one endpoint
By Mike Street (13 posts)
Turn static HTML/CSS into a blog with CMS using the JAMStack
Dynamic Short URLs with Eleventy
Minimal SASS & eleventy Setup
A post about setting up SASS with eleventy without additional tools
By Thomas Semmler (3 posts)
Webmentions + Eleventy Talk
Slides and resources from my talks at JamStack Toronto and Magnolia JS.
By Sia Karamalegos (13 posts)
Using Lunr with Eleventy via Netlify Serverless Functions - Part Two
A followup to my post demonstrating using Lunr via serverless functions
By Raymond Camden (104 posts)
11ty: The Good, the Bad, and the... Possum?
An in-depth review of 11ty, an extensible static site generator written in Node that supports a variety of template languages.
By Aleksandr Hovhannisyan (14 posts)
Using Lunr with Eleventy via Netlify Serverless Functions
A look at using Lunr on the server side with an Eleventy web site
By Raymond Camden (104 posts)
Building Ale House Rock with 11ty
I rebuilt my beer review website using a JSON API and 11ty. This is a rundown of how I tackled it
By Mike Street (13 posts)
Moving from Hexo to Eleventy
Migrating my blog to a new static site generator and redesigning my theme.
By Darek Kay (5 posts)
Itsiest, Bitsiest Eleventy Tutorial
Want to get started with Eleventy but feel overwhelmed? Try out this pared-down tutorial
By Sia Karamalegos (13 posts)
11ty Simplicity
By crossingtheruby (4 posts)
Why 11ty?
By crossingtheruby (4 posts)
Sanity with 11ty: Paginating Data
By crossingtheruby (4 posts)
Accessing 11ty filters within data files to keep your code DRY
11ty filters can exist as JS functions inside the declared filters directory - these can be accessed by other files not processed by 11ty
By Mike Street (13 posts)
Sanity with 11ty
By crossingtheruby (4 posts)
Building a Choose Your Own Adventure site with Eleventy
How I built a "Choose Your Own Adventure" style site with Eleventy
By Raymond Camden (104 posts)
Case Study: One year with Eleventy after leaving GatsbyJS
One year after I switched from GatsbyJS to Eleventy, In this post I recapped the process and wrote down how it is today working with Eleventy.
By Marc Radziwill (1 post)
Automatically generate open graph images in Eleventy
Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats
By Bernard Nijenhuis (8 posts)
Using PurgeCSS with Bootstrap and Eleventy
Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap? In this tutorial,... Tagged with eleventy, 11ty, bootstrap, purgecss.
By Brewhouse Digital (3 posts)
Adding an Email Subscription to Your Jamstack Site
Using MailChimp to provide a list service for new posts on your blog
By Raymond Camden (104 posts)
Listing posts in Eleventy when you publish offsite
Co-mingling internal and external posts takes a little extra work. Here’s what I did
By Eric Bailey (2 posts)
How to: add Twitter and Instagram Embeds on an Eleventy website using Sanity
Cover image credits: Photo by Luismi Sánchez on Unsplash At Orbit, we recently rebuilt our website f... Tagged with 11ty, eleventy, sanity, jamstack.
By Nicolas Goutay (1 post)
Asset Pipelines in Eleventy
While some SSGs have a standardized way of handling assets, Eleventy does not. That's a good thing! Here are a few possible approaches you can take.
By Max Böck (8 posts)
Using 11ty JavaScript Data files to mix Markdown and CMS content into one collection
In this article, we'll mix Markdown files with external data sources to create a unified 11ty Collection.
By Bryan Robinson (15 posts)
Creating pages from data with Eleventy
Eleventy has the ability to generated multiple pages from a structured data source, either static JSON or JSON dynamically generated by JavaScript code.
By Florian Eckerstorfer (9 posts)
Let's Learn Eleventy (11ty) - How to make a JavaScript bundle
In the fifth part of the Let't Learn Eleventy series, we'll learn how handle JavaScript
By Rares Portan (5 posts)
Eleventy 1.0
In the changelog, I’m documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work. This time it’s about the update to Eleventy 1.0 and some things that changed while updating.
By Martin Schneider (7 posts)
Archives & Permalinks
Get your Eleventy Site into the real world using a hosting provider like Netlify or Git pages
There are plenty of ways to get your 11ty site live depending on preferences and skill set, this blog walks through a few of the popular ones including Gitlab pages, Vercel, Netlify and Cloudflare pages
By Mike Street (13 posts)
Migrating This Blog From Jekyll to Eleventy
Jekyll has been powering this site for many years now. It replaced my WordPress setup, and I haven't looked back. Over the last few months, I have become fed up with Jekyll. It's slowing me down. Time to replace it with something new and shiny!
By Xavier (1 post)
Building a Database Driven Eleventy Site
Using a database (MySQL) to drive content for an Eleventy site
By Raymond Camden (104 posts)
Build an 11ty calendar to list all your posts
List all of your posts (or other collection items) in a calendar/diary format to give a timeline of your past
By Mike Street (13 posts)
Creating a feed in Eleventy
Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats
By Bernard Nijenhuis (8 posts)
Building a Simple Image Gallery with Eleventy
Using the Image plugin with Eleventy to build a simple gallery
By Raymond Camden (104 posts)
Faster YouTube embeds in Eleventy
Use lite-youtube-embed in Eleventy for faster and more privacy-minded video
By Sia Karamalegos (13 posts)
Using Cloudflare workers to publish your scheduled 11ty posts
Learn how to schedule blog posts and other items to go live with your static site generator without having to rebuild the whole site. Get all the benefits of a dynamic CSS with static files
By Mike Street (13 posts)
How to add Netlify CMS to an existing Eleventy project
I started coding again recently and I've been working on some personal projects in Eleventy. I alrea... Tagged with netlifycms, eleventy, jamstack, beginners.
By Hanna Taylor (1 post)
Syndicating blog posts from an 11ty site to Dev.to using RSS
How I syndicate the blog posts from my website to Dev.to by providing an RSS feed for my journal page.
By Declan Byrd (2 posts)
Using SASS With Eleventy
Eleventy (11ty) is a super customisable static site generator that at its core transforms template language into HTML. However, template languages li…
By John Kemp-Cruz (1 post)
Migrating from Hugo to Eleventy
Quick Tips for Eleventy and Vercel
11ty Date Shortcodes and Filters
Use this shortcode and filter as a starting point for your date transformation needs.
By Stephanie Eckles (21 posts)
Adding a favicon in Eleventy
Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats
By Bernard Nijenhuis (8 posts)
A Deep Dive Into Eleventy Static Site Generator
Learn what makes Eleventy unique, and about some essential concepts to help you successfully get started.
By Stephanie Eckles (21 posts)
Filters for 11ty Content
Includes filters for creating an excerpt and other content enhancements.
By Stephanie Eckles (21 posts)
Moving a blog from Jekyll to Eleventy
This post walks through how to set up a blog with the Eleventy static site generator and deploy it using Netlify. We'll cover topics such as migrating from Jekyll, configuring and extending Eleventy, adding syntax highlighting, an RSS feed, a sitemap, SEO meta tags, privacy-friendly analytics, w
By Nicolas Hery (1 post)
Using the Eleventy image plugin to generate images
In the changelog I'm documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work.
By Martin Schneider (7 posts)
Tailwind-to-head with Eleventy
This follow-up to an earlier article about Hugo Pipes shows how to get internal CSS in an Eleventy site — and with no build tools required.
By Bryce Wray (26 posts)
Collection archive in Eleventy
Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats
By Bernard Nijenhuis (8 posts)
Using PDFs with the Jamstack - Now with Thumbnails
Combing Adobe PDF APIs with Eleventy to create PDF Thumbnails
By Raymond Camden (104 posts)
Adding Webmentions to my site
While I was rebuilding my website in Eleventy, I saw Amber Wilson's article about adding Webmentions to her site shared on Twitter. I'd heard of Webmentions but I'd never really looked into them and while I was reading Amber's post, I thought that it's a really cool idea and adde
By Luke Bonaccorsi (3 posts)
Dates in Eleventy
Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats
By Bernard Nijenhuis (8 posts)
Adding Simple Pagination to an 11ty Collection
11ty can handle pagination really well, but finding the right subset of the many pagination features can be a little difficult to figure out. Here's how I added simple previous and next links and post totals to the list pages on this blog.
By Brian Perry (1 post)
Using PDFs with the Jamstack
Using the Adobe PDF Embed API to view PDFs on your Jasmstack site
By Raymond Camden (104 posts)
Creating a Fast and Beautiful Portfolio Website using HTML, CSS, Eleventy and Netlify
Eleven years ago, in 2010, my personal website was minimal by every means. Relaunching in 2021 using... Tagged with webdev, webperf, eleventy, netlify.
By Ingo Steinke (1 post)
11ty and Rollup - a take on current build pipelines
I love rollup and I love 11ty (eleventy), but mixing the two seems to be a little hard - at least when looking at the starter projects presented on 11ty's website. Here's my take on it.
By Raphael Höser (4 posts)
Integrating Navigation Search with Lunr and Eleventy
I Finally Understand Eleventy's Data Cascade
Where does Eleventy get all of its data? Which data overrules other data? I’ve documented my whole mental model of Eleventy’s data cascade.
By Ben Myers (6 posts)
Encapsulated Eleventy/Nunjucks components with macros
Site Metadata
A useful technique to manage site metadata (title, description, url, etc) for ease of retrieval throughout templates and content.
By Stephanie Eckles (21 posts)
Using Template Content as Data for 11ty
Create a collection of content using any Eleventy templating language and learn to control the output to enable using that content as data.
By Stephanie Eckles (21 posts)
Now with added Eleventy!
Ever since I gave Eleventy a go when I was building the LeedsJS website, I've been a huge fan and advocate, even convincing some people to give it a try out of my sheer enthusiasm for it. I absolutely love the simplicity and flexibility of it, as well as things like data files. I have a whole po
By Luke Bonaccorsi (3 posts)
Create an Eleventy podcast feed
Want to add an iTunes and Google friendly podcast feed to your Eleventy site? Here's how.
By Marc Littlemore (4 posts)
Webmention Analytics
I built a tool to analyze incoming webmentions. This new side project generates monthly reports to see how and where my content is mentioned.
By Max Böck (8 posts)
Eleventy in eleven minutes
Image by 11ty.dev I would like to share my opinionated path how I got started using. Table... Tagged with eleventy, thingsivelearned, blazingfast, staticsitegenerator.
By Lea Rosema (4 posts)
Group posts by year in Eleventy
Going Beyond Static Sites With Eleventy
Eleventy includes features that allow exceeding the traditional limits of static. Learn how to leverage these features and think beyond static when using Eleventy.
By Stephanie Eckles (21 posts)
Grouping blog posts by year in Eleventy
Create an archive page grouped by year (or anything you want!) using 11ty's built in pagination and a modified collection.
By James Doc (3 posts)
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.
By Graham F. Scott (5 posts)
Let's Learn Eleventy (11ty) - Images
In the fourth part of the Let't Learn Eleventy series, we'll learn how use images with eleventy-img plugin
By Rares Portan (5 posts)
Using Pre-Built Lunr Indexes with Eleventy
Add YouTube playlists to your Eleventy site
Want to add a YouTube playlist to your Eleventy website? Read on to find out how.
By Marc Littlemore (4 posts)
Add HTML classes to 11ty markdown content
11ty comes with some useful plugins for markdown manipulation, one of these is... Tagged with 11ty, eleventy.
By Giulia Chiola (1 post)
Webmentions: Joining the IndieWeb
Webmentions are now live on the site, powered by webmention.io! I've been meaning to do this for ages. I'm very excited to finally getting around to joining the IndieWeb.
By Evan Sheehan (8 posts)
Accessing Eleventy Data on the Client Side
Moving from Gatsby to Eleventy
Thoughts and learnings of Graham Martin, a UI Developer in London, UK
By Graham Martin (1 post)
3 Ways to Render Server-Side Components with Eleventy
While Eleventy doesn't appear to be built for today's component-driven landscape, here are three approaches we can take to get closer.
By Sean Davis (6 posts)
Automated social sharing images with Eleventy and Puppeteer
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Setup social sharing previews, SEO, and favicons on Eleventy
This is part four of how I used 11ty to setup my personal site. This is how I setup open graph protocol, search and favicons.
By Michael Harley (14 posts)
Accessible amojis with 11ty
I’m Kitty Giraudel, a transfeminine web engineer based in Berlin, focused on accessibility and inclusivity.
By Kitty Giraudel (4 posts)