Skip to main content

{{ 11tybundle.dev }}

467 posts in 'How to...'

<pagefind-search> web component

A post by Zach Leatherman (zachleat)

Categories: How to...  Search  

Let's update the 11ty Edge Dark Mode Toggle

Using navigator.sendBeacon to toggle dark mode with 11ty Edge functions and Netlify

Categories: Edge Functions  How to...  

Adding Music Previews to My Now Page

How I added a simple audio preview to my recent Spotify tracks.

Categories: How to...  Remote Data  

DoubleShift

Categories: How to...  Remote Data  

Updating my Eleventy plugin tagCloud

A blog about web development, handy tutorials, quick rants, thoughts, and everything in between.

Categories: Filters  How to...  

Grouping posts by year with nunjucks in Eleventy

Group by year in a clear and readable manner

Categories: Collections  Dates  Filters  How to...  Nunjucks/Macros  

Automating my site update with gitlab ci/cd

Where I describe a ci/cd configuration to deploy an 11ty blog to neocities

Categories: Deployment  How to...  

Generating the Firehose page on the 11tybundle site

Here's how the Firehose page of the 11tybundle.dev site is built.

Categories: Collections  How to...  Remote Data  

VSCode Pasting 11ty Images

Creating content locally like a hosted editor

Categories: How to...  Images  Markdown  Plugins  

Excluding Livestreams from the YouTube Data API in JavaScript

The YouTube API doesn't exclude past livestream videos from a playlist on its own. Here's how I...

Categories: How to...  Remote Data  YouTube  

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...

Categories: Filters  How to...  Plugins  

Making a privacy respecting hit counter with Plausible analytics

Adding a hit counter with Plausible is private and quick using their aggregate API

Categories: How to...  Remote Data  

Migrating to Eleventy

renkotsuban's personal site and blog.

Categories: Getting Started  How to...  Migrating to Eleventy  

A new technique for image optimization: SVG short circuiting

A post by Zach Leatherman (zachleat)

Categories: How to...  Images  Plugins  

Hacking together a Tweekly.fm replacement

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Remote Data  

11ty and Observable

Categories: Configuration  How to...  

11ty Quick Tip: Minify inline JavaScript in WebC

For when you need to minify your WebC JavaScript

Categories: Asset Pipelines  How to...  WebC  

How to setup Agit CMS with your 11ty website

The hackable, local, markdown based CMS for the developer that doesn't want content management to be...

Categories: CMS  Front Matter  How to...  

Pagination in a Javacsript template with Eleventy

Here I use a javascript template to generate json data files for selected categories of the...

Categories: How to...  Pagination  

Feedbin is rendering my RSS feed wrong, let's fix it!

Feedbin is removing the wrong elements, so let's make up for it on our own

Categories: Filters  How to...  

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

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

Categories: How to...  Plugins  

How to find backlinks using Eleventy (11ty)

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

Categories: How to...  Plugins  

Cleaning up the 11ty config

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

Categories: Configuration  How to...  

Building a photography website

The setup for sharing my photo gallery.

Categories: How to...  Images  Navigation  

Clean Up Your Config File

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: Configuration  How to...  

TinaCMS + 11ty

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

Categories: Blogging  CMS  Configuration  Deployment  How to...  

CloudCannon as a git based headless CMS for static site generators

Showcasing CloudCannon with 11ty as a headless CMS service

Categories: CMS  How to...  

Migrating Blogger to Eleventy

Shifting sheetsj.com into the future

Categories: Blogging  How to...  Migrating to Eleventy  

Permalink-Driven Breadcrumbs in Eleventy

An approach to add a breadcrumb navigation to your Eleventy site, utilising the permalink structure

Categories: CSS/Sass  How to...  Navigation  

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

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

Categories: Configuration  CSS/Sass  How to...  Images  Social Media  

How to make a PWA out of your Eleventy site

Eleventy sites can be PWAs with two plugins. But there are strings attached.

Categories: How to...  

Making a simple Eleventy blog template

If you’ve worked with TypeScript, React or Next odds are you’ve encountered an update that broke...

Categories: Blogging  Collections  Front Matter  How to...  Layouts  

Excerpts for Eleventy: My Implementation

Excerpts for Eleventy: My Implementation 02 Oct 2023 | 4 minutes read #eleventy Converting my...

Categories: Blogging  Front Matter  How to...  Markdown  

Headless kiosk application (with Kirby CMS)

Use Kirby and 11ty to generate a headless kiosk application hat works offline.

Categories: CMS  How to...  Images  

Delaying asset requests in Eleventy

Simulate slow connections on your Eleventy website using dev server middleware.

Categories: Asset Pipelines  How to...  

Eleventy JSON Output

For a small Eleventy-based project I wanted to output an example.json file – stored in the data...

Categories: Filters  How to...  

Scheduling Automatic Builds with Static Site Generators

Having a static site is great, but there could be times where you need to build your site on a...

Categories: Deployment  How to...  

Using Hugo archetypes with 11ty

Categories: How to...  Markdown  

How to add a custom slugify filter to 11ty

During my recent blog migrations, I discovered the new slugify filter handles apostrophes...

Categories: Filters  How to...  

Building a Blogroll with 11ty

How I created a blogroll with 11ty based off of Ben Myers solution

Categories: Blogging  How to...  

Build a Blogroll with Eleventy

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

Categories: Blogging  Configuration  Data Cascade  How to...  Remote Data  

Eleventy: A Paired Shortcode for Looping Video

Adding GIF-like looping video to my site.

Categories: How to...  

Setting active state on navigation with Eleventy

In creating my portfolio site, I wanted to have dynamic elements that would add/remove classes...

Categories: How to...  Navigation  

Custom language syntax highlighting

Web development blog. The good, bad, and ugly (mostly bad and ugly)

Categories: CSS/Sass  How to...  

Fun With Front Matter: Part 4 - Featured Posts

How to use "featured" posts to highlight important content.

Categories: Front Matter  How to...  

Semi-automated hashtags for syndicated posts

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: Collections  How to...  

CloudCannon + Eleventy

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

Categories: Collections  Configuration  Deployment  How to...  

Now page: grouping episodes of the same tv show

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Remote Data  

Flickerless dark mode in 11ty with Tailwind CSS

Just a couple of days ago, I was about to rebuild my portfolio website from scratch. Then, as a......

Categories: Configuration  CSS/Sass  How to...  

Drying up now page templates and normalizing data in Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  

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

Setting a post to draft in 11ty while writing

Categories: Configuration  How to...  

Fun With Front Matter: Part 3 - Handling Edits

Another example of front matter - signifying edits (both when and why)

Categories: Front Matter  How to...  

Fun With Front Matter: Part 2 - Follow-ups

Using front matter to specify a follow up to your content.

Categories: Front Matter  How to...  

Fun With Frontmatter: Part 1 - Related Posts

A series on doing more with your Jamstack site's front matter

Categories: Filters  Front Matter  How to...  

Displaying now playing data with matching emoji using Netlify edge functions and Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: Edge Functions  How to...  

Eleventy Style Guide Generator - Step by Step buide adding to an existing site

Step by Step guide to adding the Eleventy Style Guide Generator to an existing site. Details on how...

Categories: How to...  

Website rewrite and switching to Notion as CMS

This website served me well for almost 5 years with minor improvements, tweaks and hacks. Now, it...

Categories: How to...  Remote Data  

How I built my Now page

YouTube video

Categories: How to...  Remote Data  YouTube  

Pulling WordPress Post Categories & Tags Into Eleventy

Step by step guide to gathering post categories and tags from the WordPress REST API for better...

Categories: How to...  Remote Data  

classnames

The online journal of Ashur Cabrera.

Categories: CSS/Sass  How to...  Plugins  

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...

Categories: Configuration  Getting Started  How to...  

Eleventy Category Images

Describes a solution I implemented in this site to add Category-specific header images to posts. I...

Categories: How to...  Images  

Interactive HTML Code Demos in Eleventy

With eleventy-plugin-code-demo, you can easily add interactive HTML, CSS, and JavaScript code demos...

Categories: How to...  

WebC Declarative Shadow DOM Slot Workarounds

A cheeky hack to make <slot> elements work as expected in 11ty's WebC framework.

Categories: How to...  WebC  

Sorting and Dating 11ty Posts by Name

Organize and automate your 11ty blog's post structure with ISO dates and some quick JavaScript.

Categories: Dates  How to...  

Deploying an 11ty Site to GitHub Pages Using GitHub Actions

The last time I wrote about deploying to GitHub Pages, it was essentially a tutorial on how to use...

Categories: Deployment  How to...  

Blog comments via Mastodon

After half a year of pondering, I finally wrote a bit of code to add comments to my blog via...

Categories: How to...  Social Media  

Now Page: Automatically Syncing My Now Pages

How I automatically sync my now page with omg.lol

Categories: How to...  Remote Data  

Rethinking Categorization

Categories: Collections  How to...  

Building a popular posts widget in Eleventy using Plausible analytics

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Remote Data  

Using PDFs with Algolia and Adobe PDF Extract API

A look at using Adobe's PDF Extract API to integrate with Algolia's Search APIs

Categories: How to...  Search  

Batching YAML Front Matter Updates

This article describes a command-line utility I created to do batch add/update to YAML front matter...

Categories: Front Matter  How to...  

Updated Eleventy Post Stats Plugin

I published an update to my Eleventy Plugin Post Statistics plugin this morning and this article...

Categories: Debugging  How 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...

Categories: Configuration  How to...  

Eleventy Filter Parameters

How to add parameters to an Eleventy filter.

Categories: Filters  How to...  

Now page update: poster art for shows and movies

Combine multiple API calls and eleventy-fetch to enrich Trakt metadata with poster art.

Categories: How to...  Remote Data  

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...

Categories: Configuration  CSS/Sass  How to...  

Fetching webmentions with Netlify and Eleventy Edge

Sadly, I'm not too good at documenting what I'm sometimes building in the little free time that I...

Categories: Deployment  How to...  Social Media  

Displaying listening data from Apple Music using MusicKit.js

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Remote Data  

Adding game cover art to my /now page

How I'm using Eleventy-Fetch and the Steam API to fetch recently played games, the games cover art...

Categories: How to...  Images  Remote Data  

Creating Bootstrap WebC Components in Eleventy

Using WebC to make working with Bootstrap simpler.

Categories: How to...  WebC  

WordPress to Eleventy - Part 2, The How

For years my personal website used WordPress, now it's using Eleventy and this is how I migrated it

Categories: How to...  Migrating to Eleventy  

Eleventy tag filter

Web development blog. The good, bad, and ugly (mostly bad and ugly)

Categories: Filters  How to...  

Bookshop 11ty Guide

Learn how to build a live-editable website using Eleventy and Bookshop on CloudCannon.

Categories: Getting Started  How to...  

File Last Modified Is Available

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: Dates  How to...  

Integrating JSON-LD Into Your Eleventy Pages

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: Configuration  How to...  

From ICS to JSON: surfacing anticipated albums

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Remote Data  

Using Goodreads Data in Eleventy - Update

A followup to my previous article on Goodreads and Eleventy

Categories: How to...  Remote Data  

Fast and Easy CSS Revisioning

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: CSS/Sass  How to...  

Optimizing for performance with Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  Performance  

Using Goodreads Data in Eleventy

An example of using exported Goodreads data in an Eleventy site.

Categories: How to...  Remote Data  

11ty image shortcode best practice

Quick reminder to myself about how to use the 11ty shortcode for images

Categories: How to...  Images  Markdown  

Generating Eleventy Category Pages Inside Eleventy Build

After my announcement of my command-line utility for generating Eleventy Paginated Category pages, I...

Categories: How to...  Pagination  

Interactive demos inside articles

This article touches how I embed interactive code demos into my blog articles.

Categories: How to...  

Eleventy Paginated Category Pages

Something I wanted to do with this site, but wasn't supported by Eleventy, is generate paginated...

Categories: How to...  Pagination  

Adding client side search to a static site

Creating a site-search function that doesn't rely on external services

Categories: How to...  Search  

Eleventy Displaying Posts from Another Site

I wanted to pull the most recent articles from an Eleventy site into another Eleventy site, so I...

Categories: How to...  Remote Data  

My plugin for markdown-it: codewrap

My solution to adding "Copy" to markdown code blocks (and other things)

Categories: How to...  Markdown  

Rebuilding my blog in JavaScript: feeds

Really Not Simple Syndication

Categories: How to...  

Remove trailing slash on 11ty S3 hosted sites using Cloudfront function

How to rewrite the Cloudfront request so trailing slashes are redirected to the non-trailing slash...

Categories: Deployment  How to...  

Generating Post Batches in Eleventy

This article describes a Node command-line utility I created to generate batches of new posts in an...

Categories: How to...  

Automating Eleventy Post Creation

Describes a utility I created to automate creating a new post in an Eleventy site.

Categories: How to...  

Eleventy Site Statistics

I wanted to add a statistics page to this site, so I created an Eleventy plugin to do it. This...

Categories: How to...  

Fetching & caching data from Airtable in my 11ty site

Using the Airtable.js library and Eleventy Fetch

Categories: How to...  Remote Data  

Now page update: favorite articles from Matter

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  

Meta Description and Keywords in Eleventy

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

Categories: Configuration  How to...  

Eleventy Extra Spaces in Category List

I noticed that the category lists on this site had an extra space before and after the comma and set...

Categories: How to...  

Eleventy Enhanced Pagination Navigation Buttons

After adding Previous and Next buttons to paginated pages in this site, I figured out a clean way to...

Categories: How to...  Navigation  

Pseudorandom numbers in Eleventy

Create deterministic series of random numbers for generative arts

Categories: How to...  

How To Craft a Stylish Static Website with Eleventy (11ty)

Learn how to use Eleventy to craft a stunning and functional static portfolio website without...

Categories: Getting Started  How to...  

Building and Automating My Now Page

How I built and automated my now page with Eleventy and APIs.

Categories: How to...  Remote Data  

Extending 11ty’s page variable

I’ve had my eye on Astro, so I thought I’d take it for a spin by re-building this here website. I...

Categories: How to...  WebC  

Wrapping Emoji in your 11ty build

Wrap emoji with accessible and semantic HTML, without breaking your pages

Categories: How to...  

SVG Icon Sprites in Eleventy

Use SVG icons in Eleventy and only ship the code you need.

Categories: How to...  

Builder.io's Partytown with 11ty

Exploring builder.io's partytown and integrating it with 11ty! It is nothing but a library which...

Categories: How to...  

Awesome Algolia Updates (and some fixes here...)

News about Algolia's free tier changes and some fixes here.

Categories: How to...  

Blogging with Eleventy

Adding a blog to this website (which you are now reading)

Categories: Blogging  How to...  

.env files in Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and...

Categories: How to...  

Spellchecking my blog posts with cSpell

A little magic to help catch typos in your blog posts.

Categories: Blogging  How to...  

Automating Algolia Index Updates

I added support for Algolia search to an Eleventy site, and this post describes a utility I created...

Categories: How to...  Search  

Smart Incremental Rebuilds With eleventyImport

Ensure templates that display content from collections, like a blog index, rebuild when associated...

Categories: How to...  

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....

Categories: Configuration  How to...  

Should I upgrade to Eleventy 2.0?

Eleventy 2.0 was released at the beginning of February. It has some major new features. Is it...

Categories: How to...  

Using the Codeberg CI

Using Codeberg CI to build 11ty based static sites to push to Codeberg Pages

Categories: Deployment  How to...  

Hiding drafts and future posts in Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice...

Categories: Configuration  How to...  

Bringing my omg.lol Now page into Eleventy

Bringing my omg.lol Now page into Eleventy - Lewis Dale

Categories: How to...  

Running Eleventy Serverless On AWS Lambda@Edge

Eleventy is great. It’s a static site generator written in JavaScript, for “Fast Builds and even...

Categories: How to...  Serverless  

Supporting PDF Embeds in an Eleventy WebC Component

Adding support for the Adobe PDF Embed with an Eleventy WebC Component

Categories: How to...  

Slotted content in Eleventy

Fill slots in an HTML layout with chunks of Markdown content.

Categories: How to...  

Upgrading to Eleventy 2.0.0

A step-by-step for an incredibly easy process, again.

Categories: How to...  

Filtering tags within Eleventy.js collections

JavaScript software development tips, strategies for salary negotiation, and other helpful advice...

Categories: Collections  Filters  How to...  

Farewell Netlify Large Media, Welcome eleventy-img

Not too complex once I had finished making my mistakes.

Categories: How to...  Images  

Building a Mastodon Bot Listing Page in Eleventy

How I built a page to show off my Mastodon bots.

Categories: How to...  Social Media  

Adding a Table of Contents to dynamic content in 11ty

Code that introduces automated anchor links to headlines in Eleventy dynamic-loaded content....

Categories: How to...  

Using shiki with 11ty

Shiki is a really nice syntax highlighter that I already wrote about. This is just a short post to...

Categories: How to...  

Updating webmentions on a static site

When I started using Webmention on this site (more than 5 years ago!), I was building the site on my...

Categories: How to...  Webmentions  

Code for copying code: the Eleventy edition

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

Categories: How to...  Plugins  

A Step-by-Step Guide to Sorting Eleventy Global Data Files by Date

Step-by-step guide to date-based global data sorting in Eleventy, including automated by file last...

Categories: How to...  

Adding tag list with post count to Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice...

Categories: Collections  How to...  

Improving Syntax Highlighting

Adding syntax highlighting to a blog is hard, doing it in a good way is hard. I recently switched my...

Categories: How to...  

11ty, nunjucks, tag counts

Using nunjucks to get the count of the posts for a tag.

Categories: How to...  Nunjucks/Macros  

Adding posts by tag to Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice...

Categories: How to...  

Adding a basic search to a static site

A simple solution to having a search feature on a static website

Categories: How to...  Search  

Adding webmentions to your static blog

The portfolio and blog of Jan Monschke

Categories: How to...  Webmentions  

Adding dynamic read time to Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice...

Categories: How to...  

Building A Membership Site With 11ty

Do you want to offer exclusive content, but also have full control over the platform you use? With...

Categories: Edge Functions  How to...  

Automating Advent Calendar with Github Actions and Eleventy

Last year, I build an advent calendar using Eleventy and Github Actions. In this blog post, I tell...

Categories: Dates  How to...  

Adding Tina CMS to 11ty

Looking for a NetlifyCMS alternative to commit changes to the same repo, I stumbled upon TinaCMS

Categories: CMS  How to...  

Plop in Automation

How I use npm to automate the inner workings of my website and within other projects

Categories: How to...  

Creating link tags with a data file and Nunjucks, using Eleventy

Kevin is a designer who crafts digital products and experiences.

Categories: How to...  Nunjucks/Macros  

Hello 2023

Maybe I'm writing again.

Categories: How to...  Images  

Better Looking Dates in Eleventy: Jan 01 2023 --> Jan 1st 2023

By default, the default readableDate in Eleventy will output dates like: Dec 03 2022. Let's do...

Categories: Dates  How to...  

Fixing long start-up times of the Eleventy dev server

Running Browsersync without internet connection.

Categories: Debugging  How to...  

Drafts and timestamp-based publishing in Eleventy

Exercise more control over when, and if, your posts appear.

Categories: Dates  How to...  

Using Fontsource With 11ty

For quite some time, I was searching for a way to self host google fonts because the google fonts...

Categories: How to...  

Adding Download Support in an Eleventy Site

An example of adding download resources to an Eleventy site

Categories: How to...  

Eleventy asset pipeline: precompiled assets without Gulp

Precompiled Sass and JS files that become part of the source folder.

Categories: Asset Pipelines  How to...  

A Bare-Bones Eleventy Template for Glitch

A quick template for using Eleventy on Glitch

Categories: How to...  

Support External Articles in an Eleventy Blog

Adding a method to list external articles in an Eleventy blog

Categories: How to...  

Some Options for Timing Pages in Eleventy

Some experiments timing slow pages with Eleventy

Categories: Debugging  How to...  Performance  

Adding a Stripe cart to a static Eleventy website with LiveState: Part 1

We solve digital problems through custom software development and design for the web—apps, mobile,...

Categories: How to...  

Quick LiquidJS + Eleventy Example - All Posts

Some quick things I learned about Liquid when building an "All Posts" page.

Categories: Dates  How to...  

Eleventy, Markdown, and Tailwind CSS

English software developer based in Seattle.

Categories: CSS/Sass  How to...  Markdown  

Building an Eleventy Starter Template Series

Sparkbox’s web experts share their advice and insights from discovery to launch and everything in...

Categories: Getting Started  How to...  

Integrating Cloudinary into Eleventy

A look at integrating Cloudinary image processing with Eleventy

Categories: How to...  Images  

Word count and reading time in Eleventy

Want to give your readers an idea of what’s ahead? Here’s some code to make that no biggie.

Categories: How to...  

Get good Git info from Eleventy, too

While per-page Git data is built into Hugo, a little code can bring it to Eleventy, as well.

Categories: How to...  

A truly fetching utility for Eleventy

While trying to make things work equally well in multiple repos, I discover the value of...

Categories: How to...  Remote Data  

Processing images linked from frontmatter with eleventy-img to use in meta tags

Engineering Management, SQL, and a dash of front-end from NYC.

Categories: Front Matter  How to...  Images  

Static embeds in Eleventy

In what could and perhaps should be the end of this saga, here’s code to provide static tweets and...

Categories: How to...  Social Media  

Eleventy within Eleventy to compile when you compile: precompiling reused assets

Pre-compile some reused assets to avoid repeating the same operation.

Categories: Asset Pipelines  How to...  

Adding Social Share Links in Eleventy

A quick example of adding social sharing links to your Eleventy site

Categories: How to...  Social Media  

11ty Second 11ty: Creating Template Filters

This week, we’re going to dive into 11ty filters. We’ll use 1 built-in filter, and make 2 custom...

Categories: Filters  How to...  

Support Draft Blog Posts in Eleventy

A look at various ways of supporting draft posts with Eleventy

Categories: Collections  Configuration  How to...  

11ty Second 11ty: Global Data files (JS and JSON)

In these two videos, we take 110 seconds each to discuss how to use 11ty's Global Data files to pull...

Categories: Global Data  How to...  

WordPress & Eleventy part two: Eleventy

Some considerations for using WordPress as a headless content management system for Eleventy.

Categories: CMS  How to...  

WordPress & Eleventy part one: WordPress

Some considerations for setting up WordPress to use with Eleventy.

Categories: CMS  How to...  

Add Netlify CMS to an existing 11ty site

Learn to add Netlify CMS to an existing 11ty site to make editing your posts easier

Categories: CMS  How to...  Netlify  

Generating Zips in an Eleventy Site

An example of providing zipped resources in an Eleventy site.

Categories: How to...  

Adding Custom Anchors to Headings in Markdown - Eleventy

Anchors are nothing but id attributes applied to an element to link to it using href attribute...

Categories: How to...  Markdown  

I18n of URLs

Zach Leatherman asked what style of internationalization you&#39;d prefer (explicit or implicit) and...

Categories: How to...  Internationalization  

Eleventy - Shortcode for Embedding Codepen

Don't know what eleventy is? Before you read further, check out this amazing series of articles ...

Categories: How to...  

Reading Comic Books in the Jamstack

Adding support for digital comic books to your Jamstack site

Categories: Global Data  How to...  Images  

Related Content by Day of Year in Eleventy

A demonstration of how to get content published on the same day in the past.

Categories: Dates  How to...  

Logging in Eleventy

How to use the debug package to output custom log messages alongside of Eleventy’s logs in your...

Categories: Debugging  How to...  

Building a Quiz with Eleventy and Eleventy Serverless

How I built an Eleventy site driven by dynamic quiz data.

Categories: How to...  Serverless  

Generate a sitemap for your Eleventy website

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

Categories: Configuration  How to...  

Add Build Info to an 11ty Site

Expose information about your 11ty site at build time to all templates using global data. Among...

Categories: Deployment  How to...  

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...

Categories: How to...  Images  Plugins  

Refactoring MikeAparicio.com

Escaping a hoarder house of technical debt.

Categories: How to...  

Automate syndication of your content with Eleventy, dev.to, and GitHub Actions

This started off as a test post for my talk I gave this past week at the Eleventy Meetup. ...

Categories: How to...  

Taming Eleventy Tags: Or How I Learned To Tolerate Double Pagination

Pagination in Eleventy is bit strange. Out of the box, Eleventy comes with support for something the...

Categories: How to...  Pagination  

Building a design system with Eleventy

How to use this flexible static site generator to create the home for digital design in your company

Categories: How to...  

Building a Serverless E-commerce Store with Stripe, Netlify, & 11ty

A lot of e-commerce solutions exist, but many of them charge a monthly fee. How could we build a...

Categories: How to...  

A Set of Useful 11ty Filters

One of my favorite things about 11ty is its flexibility and how easily you can customize your chosen...

Categories: Filters  How to...  

Favicons in root with Eleventy

A simple way to get any and all favicon variations in root for an Eleventy site.

Categories: How to...  

Adding Cooklang Support to my Eleventy Blog

How I added cooklang to my blog and the 11ty extension I created in the process

Categories: How to...  

Design Mode in 11ty

Sometimes, I prefer to compose text right in my browser and copy it over to my source files. In...

Categories: How to...  

From Notion to Eleventy part 2: Building Markdown from JSON

The ramblings of Ryan Boone, a web developer and designer from Texas with a passion for open,...

Categories: How to...  Remote Data  

Clawing Back Content for a Better Web: Twitter Archive with 11ty

Full-stack development and design. Based in Central Ohio and accepting projects from all over the...

Categories: How to...  

Post to Eleventy from iOS with Drafts, Shortcuts and Working Copy

A workflow to write and publish posts from iOS to an Eleventy blog using Drafts, Shortcuts, and...

Categories: How to...  

Eleventy Related Posts Using TF-IDF

Automating related posts in Eleventy with term frequency-inverse document frequency and...

Categories: How to...  

Responsive Images in Markdown with Eleventy Image

I love markdown's simplicity and convenience, but sometimes you need a little more than the default...

Categories: How to...  Images  Markdown  

Use Your Saffron Recipes in the Jamstack

How to use your Saffron recipes in a jamstack site.

Categories: How to...  

Thoughts on the Jamstack and Content Metrics

Tips for getting an understanding of your site's content

Categories: How to...  

Including RSS Content in your Eleventy Site - Part 2

A follow up to my post on using RSS data with Eleventy sites

Categories: How to...  Remote Data  

Some tricks for 11ty that I learned along the way

in this post I'll explain how to create a collection from a folder, how to use slugify in tags page,...

Categories: How to...  

Eleventy Progressive Web App

Catching the Eleventy Lighthouse obsession bug!

Categories: How to...  Performance  

Generating Apple Touch Icons with Eleventy

Creating the various sizes of Apple Touch Icons is one of the more tedious tasks in web development,...

Categories: How to...  Images  

Validating my Eleventy Blog's HTML

This site serves as a bit of a showcase, reference, and general brain dump, so content may vary!

Categories: How to...  

Using Sanity CMS to host an image gallery for an existing 11ty site

Sometimes it's too late for a starter project

Categories: CMS  How to...  

Ignore Eleventy Files With Environment Variables

Using environment variables and the Eleventy config option to ignore files, we can exclude files or...

Categories: How to...  

Per-file commit logs with Eleventy

Using computed data and simple-git to generate file-specific changelogs.

Categories: How to...  

Eleventy + Vue 3

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

Categories: Configuration  How to...  Plugins  

Passing Object Arguments to Liquid Shortcodes in 11ty

Currently, 11ty doesn't allow you to pass object arguments to shortcodes in Liquid. As a temporary...

Categories: How to...  

How I built Around the Web

How I added a new format to my website, automated publication to a newsletter, and added categories.

Categories: How to...  

Show off your Lighthouse scores as static HTML in Eleventy with the PageSpeed Insights API

The Eleventy community is often focused on performance in a way that you don't tend to see with...

Categories: How to...  Performance  

Eleventy (11ty) setup for multilingual component-based flexible pages

How to setup Eleventy (11ty) static site generator to create landing pages or one page websites with...

Categories: How to...  Internationalization  

Including RSS Content in your Eleventy Site

A quick example of using RSS content for an Eleventy page.

Categories: How to...  Remote Data  

Custom Markdown Components in 11ty

Ever wanted to nest Markdown in HTML? In 11ty, you can easily do this with paired shortcodes and a...

Categories: How to...  

Serverless blog with 11ty, GraphCMS and Firebase

The idea behind this experiment was to ignore modern practices: no Vercel and the complete React......

Categories: Blogging  How to...  Serverless  

From Notion to Eleventy part 1: The Notion API

The ramblings of Ryan Boone, a web developer and designer from Texas with a passion for open,...

Categories: How to...  Remote Data  

Automating some of the publishing steps for my Eleventy blog

Heres how I automated some of the tedious steps of publishing new posts on my Eleventy blog.

Categories: Blogging  Front Matter  How to...  

Notes Section: From Notion To Eleventy

How to write notes on Notion and publish with Eleventy

Categories: How to...  Remote Data  

New store for albertoballesteros.com: Eleventy and Snipcart

Snipcart is an e-commerce solution that allows us to add a shopping cart to a web page. This article...

Categories: How to...  

Adding QR Codes to Your Jamstack Site

A look at adding QR codes to your Jamstack site.

Categories: How to...  Pagination  

Advanced 11ty: Using Objects in your UI

In this tutorial, we will be writing an async / await call and then returning its response (an......

Categories: How to...  

Minifying JS in Eleventy on production

This tutorial is written for the 11ty framework and we will be hosting the app on Netlify. Other......

Categories: How to...  Netlify  

A Google Static Maps Eleventy Plugin

A simple Eleventy plugin to support Google Static Maps

Categories: How to...  Remote Data  

Easily Create Gravatar Images With Eleventy

If you're moving your Wordpress site to Eleventy, you will want to convert your Gravatar images too....

Categories: How to...  Images  

My complete blogging workflow

Here is my complete blogging workflow from how I manage ideas all the way to publishing and sharing.

Categories: Blogging  Front Matter  How to...  Images  

Using a Google Photos Album in your Eleventy Site with Pipedream

Integrating a Google Photos Album in your Eleventy site with Pipedream

Categories: How to...  Images  Remote Data  

Using Storybook with Nunjucks components in Eleventy

The online journal of Ashur Cabrera.

Categories: How to...  Nunjucks/Macros  

Add Pagination to Your Eleventy Static Generated Website in Minutes

Learn how to add pagination to your Eleventy website for faster load times and better user...

Categories: How to...  Pagination  

A Guide to Building a Blog in Eleventy

A guide that walks folks through the process of building a blog with Eleventy

Categories: Blogging  Getting Started  How to...  

Using the Netlify CMS locally

I have recently been building a few websites using Eleventy. This is a static site generator, built...

Categories: CMS  How to...  

Using the Netlify CMS locally

I have recently been building a few websites using Eleventy. This is a static site generator, built...

Categories: CMS  How to...  Netlify  

Formatting Frontmatter in Eleventy

I like how Odyssey Dao highlights some parts of its titles. If I were writing standard html, I...

Categories: Front Matter  How to...  

A better static site blogging workflow with Alfred + Eleventy in 2022

Eleventy (11ty) Tutorial

Categories: Blogging  How to...  

Setting a timestamp for posts and RSS feeds in eleventy

Eleventy (11ty) Tutorial

Categories: Dates  How to...  

Just Enough JavaScript for Eleventy

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

Categories: Configuration  How to...  

Running Netlify Dev and Eleventy Two or More Times At Once

A tip for folks using Netlify Dev and Eleventy

Categories: How to...  

How to use Contentful with Eleventy

Here's a pretty 0-60 tutorial on integrating Contentful headless content with Eleventy static site...

Categories: CMS  How to...  

Time is on your side

The HTML time element is both useful and easy to use.

Categories: Dates  How to...  

Configuring Web Fonts in 11ty with Global Data

Rather than using static font-face declarations for web fonts, you can take advantage of global data...

Categories: Global Data  How to...  

Implementing a search bar on my static website

A personal blog where I write about my side projects

Categories: How to...  Search  

Managing a secrets directory in your eleventy site

A personal blog where I write about my side projects

Categories: Configuration  How to...  

Converting a simple HTML site to use Eleventy

For when you're ready for a little templating fun

Categories: How to...  Migrating to 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...

Categories: How to...  Social Media  

Adding PDF Output Support to Eleventy

Using Eleventy transforms and Adobe PDF Services to create dynamic PDFs.

Categories: How to...  

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

How to test a new theme in an Eleventy site

Categories: Configuration  How to...  

Inspecting an existing 11ty project

Great talk by Cassey Lottman

Categories: Configuration  Debugging  How to...  

Building server-rendered search for static sites with 11ty Serverless, Netlify, and Algolia

Learn how to code progressive enhancement on the Jamstock with 11ty Serverless, Netlify, and...

Categories: How to...  Search  Serverless  

Requesting YouTube API endpoint using Node and 11ty

How to request YouTube API endpoint using Nodejs standard API and Eleventy (11ty) in the frontend!....

Categories: How to...  YouTube  

Creating a (Manual) Related Posts Feature in Eleventy

How to handle post relations in Eleventy in a manual fashion.

Categories: Front Matter  How to...  

Supporting Multiple Authors in an Eleventy Blog - Follow-Up

An udate to my earlier Eleventy demo showing how to handle multiple authors

Categories: Front Matter  How to...  

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...

Categories: Deployment  How to...  

Every fire needs a sparkline

A post by Zach Leatherman (zachleat)

Categories: How to...  

Reply-to links in site feeds

I really love when people include Reply-to links in their RSS feed. Here are a couple options.

Categories: How to...  

Using PDFs with the Jamstack - Building a Document Viewer

Using Adobe PDF Services to build a document viewer for your Jamstack site

Categories: Global Data  How to...  

Adding Algolia search to an Eleventy site with Netlify

After months of struggles I finally found a relatively easy solution.

Categories: How to...  Search  

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...

Categories: How to...  

Using Liquid Blocks in Eleventy Layouts

A look at using multiple blocks and having them render in Liquid templates

Categories: How to...  Layouts  

Automatically Generated Social Media Images with HTML, CSS, Eleventy & Puppeteer

Prettier previews, built with many moving parts.

Categories: How to...  Images  

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...

Categories: Getting Started  How to...  

More Work on Algolia and My Blog

An update to my fight to get search working right on my blog

Categories: How to...  Search  

Using parameters in your eleventy includes with nunjucks macros

Includes are great. But for actual reusability of code, parameters are always needed. Luckily,...

Categories: How to...  

A Running Log - Garmin Connect and Eleventy

Use Eleventy to log Garmin Connect activities on a website and automate the process with Zapier and...

Categories: Data Cascade  How to...  Remote Data  

Automate Netlify Redirects in 11ty

Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of...

Categories: How to...  

Filter Titles for RSS and Social Shares

Replace characters that are often stripped out of post titles by RSS readers and social network link...

Categories: Filters  How to...  Social Media  

Reusable code snippets and components in Eleventy

Some cunning ways to use Nunjucks and 11ty shortcodes for reusable blocks

Categories: How to...  

An Adobe PDF Embed Plugin for Eleventy

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

Categories: Configuration  Global Data  How to...  Plugins  

Page Level URL Fetching with Eleventy

Making a network request on a page with Eleventy

Categories: Front Matter  Global Data  How to...  Remote Data  

Structuring Eleventy projects

One of the great things about Eleventy is its flexibility and its lack of assumptions about how your...

Categories: How to...  

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...

Categories: Filters  How to...  Remote Data  Serverless  

Building a notification thingamajig with Eleventy data

The online journal of Ashur Cabrera.

Categories: Data Cascade  How to...  

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...

Categories: Collections  How to...  Remote Data  

Adding figures with captions to images in markdown with eleventy

Eleventy (11ty) Tutorial

Categories: How to...  Images  

Eleventy plus Vite = elite

Re-bundling, but without the pain of webpack.

Categories: How to...  Plugins  

Applying frontmatter defaults to a whole folder of posts in eleventy

Eleventy (11ty) Tutorial

Categories: Front Matter  How to...  

Formatting dates nicely in 11ty with Luxon

Eleventy (11ty) Tutorial

Categories: Dates  How to...  

Build your own shop with the Shopify Storefront API, Eleventy, and serverless functions

Learn how you can create your own online shopping experience using the improved Shopify Storefront...

Categories: How to...  Serverless  

Setting a conditional variable in Javascript

Power Platform Developer and all around cool guy

Categories: How to...  Images  

Improving my automated open graph image process w/ Eleventy

Power Platform Developer and all around cool guy

Categories: How to...  Images  Social Media  

How I Create an Article Series in Eleventy

Front matter, templates, collections, and JavaScript.

Categories: How to...  

Improving upon my image processing with Eleventy

I recently relaunched my website and I believe I have improved upon my image processing setup using...

Categories: How to...  Images  

Manage Design Tokens in Eleventy

Eleventy offers the ability to transform data, which is handy for creating and transforming design...

Categories: How to...  

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...

Categories: Collections  How to...  Remote Data  

Creating an Additive Capture Shortcode in Eleventy

Creating a capture shortcode that appends insteads of replacing

Categories: How to...  

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...

Categories: Collections  Global Data  How to...  

Dynamic Short URLs with Eleventy

Creating URL aliases dynamically with Eleventy

Categories: Collections  Front Matter  How to...  

Using Lunr with Eleventy via Netlify Serverless Functions - Part Two

A followup to my post demonstrating using Lunr via serverless functions

Categories: How to...  Search  

Using Lunr with Eleventy via Netlify Serverless Functions

A look at using Lunr on the server side with an Eleventy web site

Categories: How to...  Search  

Going Beyond Static Sites With Eleventy

YouTube video

Categories: How to...  Why Eleventy?  

Compile Sass with eleventy

Categories: CSS/Sass  How to...  

A Remarkable Discovery

I switched from markdown-it to remark and I’m much happier for it.

Categories: How to...  Markdown  

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...

Categories: Filters  How to...  

Sanity with 11ty

Categories: CMS  How to...  

Building a Choose Your Own Adventure site with Eleventy

How I built a "Choose Your Own Adventure" style site with Eleventy

Categories: Front Matter  How to...  

Using PurgeCSS with Bootstrap and Eleventy

Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap? In this...

Categories: CSS/Sass  How to...  

Adding an Email Subscription to Your Jamstack Site

Using MailChimp to provide a list service for new posts on your blog

Categories: Front Matter  How to...  

Listing posts in Eleventy when you publish offsite

Co-mingling internal and external posts takes a little extra work. Here’s what I did

Categories: How to...  

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...

Categories: CMS  How to...  

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

Categories: Asset Pipelines  How to...  

Eleventy 1.0

In the changelog, I’m documenting modifications to this site that might be of interest, but are not...

Categories: How to...  Images  Social Media  

Archives & Permalinks

How I got the archive page permalinks right.

Categories: How to...  

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...

Categories: Deployment  How to...  

Using Eleventy’s official image plugin

The what, why, and how of Eleventy Image.

Categories: How to...  Images  

Medium-Style Share Highlights in Eleventy

I built an Eleventy plugin to do Medium-style text highlights that can be shared. It uses a...

Categories: How to...  

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...

Categories: Collections  How to...  

Creating a feed in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1...

Categories: How to...  

npx eleventy !== npx @11ty/eleventy

Use the former at your own risk.

Categories: Configuration  How to...  

Building a Simple Image Gallery with Eleventy

Using the Image plugin with Eleventy to build a simple gallery

Categories: Configuration  How to...  Images  Plugins  

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...

Categories: Deployment  How to...  

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...

Categories: CMS  How to...  Netlify  

Using SASS With Eleventy

Eleventy (11ty) is a super customisable static site generator that at its core transforms template...

Categories: CSS/Sass  How to...  

Quick Tips for Eleventy and Vercel

A quick tip for folks using Eleventy and Vercel together.

Categories: Debugging  Deployment  How to...  

11ty Date Shortcodes and Filters

Use this shortcode and filter as a starting point for your date transformation needs.

Categories: Dates  Filters  How to...  

Adding a favicon in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1...

Categories: How to...  

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...

Categories: How to...  Images  

Tailwind-to-head with Eleventy

This follow-up to an earlier article about Hugo Pipes shows how to get internal CSS in an Eleventy...

Categories: CSS/Sass  How to...  

Collection archive in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1...

Categories: Collections  How to...  

Fix DST Dates in Eleventy

Categories: Dates  How to...  

Using PDFs with the Jamstack - Now with Thumbnails

Combing Adobe PDF APIs with Eleventy to create PDF Thumbnails

Categories: How to...  Pagination  Remote Data  

Adding Simple Pagination to an 11ty Collection

11ty can handle pagination really well, but finding the right subset of the many pagination features...

Categories: Collections  How to...  Pagination  

Accessible anchor links with Markdown-it and Eleventy

I like to be able to link directly to a section in a long content. I wish every site provided anchor...

Categories: Accessibility  How to...  Markdown  

Using PDFs with the Jamstack

Using the Adobe PDF Embed API to view PDFs on your Jasmstack site

Categories: Global Data  How to...  Pagination  

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...

Categories: How to...  

Integrating Navigation Search with Lunr and Eleventy

How to use navigation search forms and Lunr

Categories: How to...  Navigation  Search  

Stream Schedule with Eleventy

Categories: How to...  

Create an Eleventy podcast feed

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

Categories: Blogging  Configuration  Filters  How to...  

11ty Search

Categories: How to...  Search  

Group posts by year in Eleventy

Using a custom 11ty collection to group post by any attribute.

Categories: Collections  Dates  How to...  

Eleventy plugin for generating social images (using SVG)

How I created an eleventy plugin to automatically generate social-images for your website and blog...

Categories: How to...  Plugins  

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...

Categories: Blogging  Dates  How to...  Pagination  

Eleventy plugin for efficient CodePen embeds

Embed CodePen.io Pens into your 11ty website by using a ShortCode. It directly embeds an iFrame for...

Categories: How to...  Plugins  

Configure markdown footnotes in eleventy

Eleventy (11ty) Tutorial

Categories: Configuration  How to...  Markdown  

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...

Categories: How to...  Images  

Using Pre-Built Lunr Indexes with Eleventy

Switching to Pre-Built Lunr indexes with Eleventy sites

Categories: Configuration  How to...  Search  

Add YouTube playlists to your Eleventy site

Want to add a YouTube playlist to your Eleventy website? Read on to find out how.

Categories: How to...  YouTube  

Integrate Pocket in Eleventy

Categories: How to...  

Accessing Eleventy Data on the Client Side

Accessing Eleventy data files in your JavaScript code

Categories: Front Matter  Global Data  How to...  Remote Data  

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...

Categories: How to...  

Automated social sharing images with Eleventy and Puppeteer

Power Platform Developer and all around cool guy

Categories: How to...  Images  

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...

Categories: How to...  Images  Social Media  

Accessible amojis with 11ty

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

Categories: Accessibility  How to...  

Give your Eleventy Site Superpowers with Environment Variables

Eleventy is increasing in popularity because it allows us to create nice, simple websites, but also...

Categories: Configuration  How to...  

RSS, a love letter and walkthrough for my Eleventy site

Power Platform Developer and all around cool guy

Categories: How to...  Layouts  Plugins  

Maximally optimizing image loading for the web

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth...

Categories: How to...  Images  

Dynamic heading levels in Eleventy

While looking around a repository at something else I discovered this clever approach.

Categories: How to...  

Configuring responsive and optimized images with Eleventy

Power Platform Developer and all around cool guy

Categories: How to...  Images  Plugins  

Add structured data annotations to Eleventy blog

Add structured data (JSON-LD) to enable rich snippets in Google search results.

Categories: Blogging  Data Cascade  How to...  

Using Airtable with Eleventy

A long-winded look at getting Airtable data into Eleventy.

Categories: Global Data  How to...  Remote Data  

Generating Social Sharing Images In Eleventy

Standing on the shoulders of giants makes it possible to generate social sharing images with very...

Categories: How to...  Images  Social Media  

Understanding Filters, Shortcodes and Data in 11ty

Sometimes it’s a little confusing what the difference between shortcodes, data and filters really...

Categories: Data Cascade  Filters  How to...  

Adding Google Calendar to Your Jamstack - with Pipedream

An updated demonstration of integration calendar data into your Jamstack site - with Pipedream

Categories: How to...  Remote Data  

Footnotes in 11ty

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

Categories: How to...  

Composing data in Eleventy

The ramblings of Ryan Boone, a web developer and designer from Texas with a passion for open,...

Categories: Data Cascade  Front Matter  How to...  

Using a folder other than posts/ with Eleventy

I don’t want to wrestle with overwrought Webpack configuration, write GraphQL queries for basic...

Categories: Configuration  How to...  

https://www.hendricks.rocks/articles/compile-sass-with-eleventy/

Instead of using Gulp or Grunt, Eleventy can also compile Sass files directly. The players: the new...

Categories: CSS/Sass  How to...  

Asset Pipelines in Eleventy

This is a clever trick (probably too clever) for setting up Eleventy to manage asset pipelines like...

Categories: Asset Pipelines  CSS/Sass  How to...  

Using PostCSS for cache-busting in Eleventy

Optimizing how browsers handle your site’s CSS, and why you should care about that.

Categories: CSS/Sass  How to...  

Adding a Warning for Old Posts to Your Jamstack Site

How to add a message to older content on your static site.

Categories: Filters  How to...  

Selecting Random Posts in Eleventy

A look at adding links to random pages in Eleventy

Categories: Configuration  Filters  How to...  

Responsive Images with Eleventy & Sharp

A blog on web development, etc.

Categories: How to...  Images  

Creating a Sitemap file with Eleventy

This is a quick tip showing how I created a sitemap.xml file using Eleventy that will automatically...

Categories: How to...  

Let's Learn Eleventy (11ty) - Slots, includes and shortcodes

This is the third part of the Let't Learn Eleventy series. We'll learn how to use slots, includes...

Categories: How to...  

Tips for debugging in 11ty

Some quick debugging tips that I came up with whilst building my personal blog.

Categories: Debugging  How to...  

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: Configuration  How to...  

Tracking Posts by Week in Eleventy

A quick hack to get the number of posts written per week in Eleventy

Categories: Dates  How to...  

Manually splitting CSS files in Eleventy

Don&apos;t want to use a bundler? Eleventy makes it easy to manually split your CSS.

Categories: CSS/Sass  How to...  

Add Netlify Redirects and Headers to an Eleventy Project

What seems like a simple task can be a little tricky to get right with Eleventy. Learn how to add a...

Categories: How to...  Netlify  

Automated Open Graph images with 11ty and Cloudinary

I wanted to find a way to dynamically generate a unique Opengraph images for each blog post...

Categories: How to...  Images  Social Media  

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....

Categories: Configuration  How to...  

Generate CSV Files from Data with 11ty

Eleventy is one heck of a powerful, incredibly flexible static site generator. This short guide will...

Categories: How to...  

Hooking Up FaunaDB to Eleventy

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

Categories: How to...  Pagination  Remote Data  

Eleventy: RSS Feeds and Front Matter Data

Getting front matter data into my Nunjucks RSS feed templates.

Categories: Front Matter  How to...  

Supporting Multiple Authors in an Eleventy Blog

How to handle multiple authors in Eleventy, with custom author profile pages.

Categories: Filters  Front Matter  How to...  Pagination  

A Community-Driven Site with Eleventy: Building the Site

In the last article, we learned what goes into planning for a community-driven site. We saw just how...

Categories: How to...  

A Community-Driven Site with Eleventy: Preparing for Contributions

I've recently found myself reaching for Eleventy (aka 11ty) above all other tools when I want to...

Categories: How to...  

Add a Static Directory to an Eleventy Project

Copy static files from a directory into the root of the build directory with Eleventy.

Categories: How to...  

Migrating from Node and Express to the Jamstack - Part 3

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

Categories: How to...  Migrating to Eleventy  Remote Data  Serverless  

Hiding Future Content with Eleventy

How to use custom filters and collections to hide Eleventy content for the future.

Categories: Collections  Filters  Front Matter  How to...  

How to show your template code in 11ty blog posts

If you write a technical blog and use 11ty as your static site generator of choice you might run...

Categories: Blogging  How to...  

Adding Algolia Search to Eleventy and Netlify

How I added Algolia Search to an Eleventy Site

Categories: How to...  Search  

Adding Algolia Search to Eleventy and Netlify - Part Two

An update to my post on using Algolia with Eleventy

Categories: How to...  Search  

Building and maintaining components from utility classes in Eleventy

Use a collection of utilities to form components without additional CSS.

Categories: CSS/Sass  How to...  

Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more

A few weeks ago, Zach Leatherman announced that he was going to change the Built with 11ty section...

Categories: CSS/Sass  How to...  

Testing my Eleventy-website with Cypress and Netlify

Last time I wrote "this page is a repository consisting of some thrown-together and...

Categories: Deployment  How to...  Netlify  

Integrating Google Analytics with Eleventy

How to use Google Analytics with Eleventy

Categories: How to...  Remote Data  

Eleventy: Loop through a collection from within a layout?

I have a home page which is made up of sections. Each section is currently pulled into my...

Categories: Collections  How to...  

Integrating Netlify Analytics and Eleventy

How to use Netlify's Analytics API in Eleventy

Categories: How to...  Remote Data  

Logging with Eleventy and Nunjucks

Adding a simple filter to save you a lot of grief.

Categories: Debugging  How to...  

Using Nunjucks 'If Expressions' in 11ty to create a simple active navigation state

In this tutorial, we'll set up a simple navigation, identify what page navigation item we need to...

Categories: How to...  

Building a Static API with Eleventy

Implement a Static API using the simple and fast static site generator, Eleventy.

Categories: How to...  

Ignore _site Build Directory in Eleventy

How to ignore the build output when adding it to gitignore causes problems.

Categories: How to...  

How to Include PrismJS CSS Only When Required In Eleventy

How I set up Eleventy to avoid including unnecessary CSS.

Categories: CSS/Sass  How to...  

Webmentions in three SSGs: Part 1

The intro to a five-part series about incorporating webmentions into three different...

Categories: How to...  Webmentions  

Embed Everything

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

Categories: How to...  Plugins  

Eleventy Résumé Builder

A free template to generate semantic, accessible & resilient résumés for the web and print.

Categories: How to...  

The full .11ty.js monty

Going all-JavaScript with my Eleventy site.

Categories: How to...  

web.dev engineering blog #1: How we build the site and use Web Components

In this first post from the web.dev engineering team, learn about how we build the site—including...

Categories: How to...  

Quick Tip on Using Vue with Eleventy

Avoid issues with Vue code being confused for Liquid

Categories: How to...  

Creating a similar post component with Eleventy

How I added a similar post component to my blog with Eleventy and Liquid.

Categories: How to...  

Creating an Editable Site with Google Sheets and Eleventy

Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building...

Categories: How to...  Remote Data  

The Emergency Website Kit

In cases of emergency, many organizations need a quick way to publish critical information. But...

Categories: How to...  Why Eleventy?  

How my site is built with Eleventy + Ghost

This website is run with Eleventy, using Markdown and Ghost CMS for blog posts. I've iterated in a...

Categories: CMS  How to...  

Twitter Cards with Nunjucks and 11ty

Using cards makes sharing your content on Twitter look much nicer.

Categories: How to...  Nunjucks/Macros  Social Media  

Add pagination for dynamic data in Eleventy

Creating pagination from dynamic data and add a useful navigation bar. Tagged with eleventy,...

Categories: How to...  Pagination  

Adding Another Template Language to Eleventy

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

Categories: Configuration  How to...  

Adding Text Linting to Eleventy

An example of using Eleventy's Linter feature

Categories: How to...  Plugins  

Checking (and Upgrading) Template Engines in Eleventy

How to check the version of embedded template engines in Eleventy

Categories: Configuration  Filters  How to...  

Adding a Last Edited Field to Eleventy

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

Categories: Collections  Configuration  Dates  How to...  

Eleventail - A helper for Taiwindcss

Phil Hawksworth's home on the web. Read his blog, ask questions, and find coverage of his recent...

Categories: CSS/Sass  How to...  

Code comfort: Eleventy and webpack

Some words about my Eleventy/webpack configuration.

Categories: Configuration  How to...  

Fractal and Eleventy: Getting static sites closer to the design system

Hello. I am Ken Hawkins. Builder of websites, project planner, newspaper nerd, information...

Categories: How to...  

Integrating Eleventy with gulp, upstream JS

Hello. I am Ken Hawkins. Builder of websites, project planner, newspaper nerd, information...

Categories: How to...  

Language switcher for multilingual JAMstack sites

Following my blogpost on multilingual websites with Eleventy, I had several questions about how to...

Categories: How to...  Internationalization  

Tips for rolling your own lazy loading

You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a...

Categories: How to...  Images  

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....

Categories: How to...  Plugins  

Create an Eleventy (11ty) theme based on a free HTML template

In this video series, we'll take a look at what it takes to start with a free HTML template found on...

Categories: How to...  YouTube  

Multilingual sites with Eleventy

Eleventy might not have multilingual and localisation capabilities out of the box, but you can build...

Categories: How to...  Images  

Deploying an 11ty Site to GitHub Pages

I am building a new personal site. The idea behind it is pretty simple: it’s a blog that will have a...

Categories: Deployment  How to...  

Adding search to a Jamstack site

Using progressive enhancement, JavaScript and a static site generator to create site search...

Categories: How to...  Search