Skip to main content

{{ 11tybundle.dev }}

828 Blog Posts

The Firehose has it's own RSS feed!

2023

Eleventy WebC in a nutshell

Categories: Configuration  Layouts  Plugins  WebC  

<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  

Static Feedback #11: All About Eleventy

A post by Zach Leatherman (zachleat)

Categories: Why Eleventy?  YouTube  

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  

The tension and future of JAMstack

A post by Zach Leatherman (zachleat)

Categories: Why Eleventy?  

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  

Automatically optimize your images with Eleventy Image and CloudCannon

Websites are becoming increasingly visual and we're adding more and more image content to our sites...

Categories: Images  Performance  Plugins  

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  

Using Wordpress as a headless CMS for Eleventy

How I avoided having to re-learn PHP and love Eleventy.

Categories: CMS  Global Data  Navigation  Pagination  Remote Data  Search  

From Jason 2.0 is an 11ty-powered digital garden with multiple plots

A digital garden for a physical meat bag.

Categories: Blogging  

Measure your website's performance with Speedlify

Zach Leatherman told me, I could add Lighthouse scores to my site's footer. And so I did.

Categories: Performance  

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

Eleventy Date-only Filter

I noticed recently that the site's stats page displayed the first and last post dates with time...

Categories: Dates  Filters  

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

Scratch that...use the Google Sheets API

Just generating a json file from Google Sheets was not good enough. I had to use the API.

Categories: Data Cascade  Global Data  Netlify  Remote Data  

Eleventy Excellent demo branches

Frontend developer based in Madrid. I enjoy working with Jamstack, vanilla Javascript and modern...

Categories: Blogging  Configuration  Pagination  

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

I've switched to Eleventy: my thoughts

In this article, I will talk about why I switched, how I did it, and my thoughts about Eleventy as a...

Categories: Migrating to Eleventy  Why Eleventy?  

Building a photography website

The setup for sharing my photo gallery.

Categories: How to...  Images  Navigation  

SEVEN MILLION NPM DOWNLOADS!

Seven Million npm Downloads! — Eleventy

Categories: Deployment  

Clean Up Your Config File

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: Configuration  How to...  

Migrating from Hugo to Eleventy (11ty)

This post describes my journey of migrating my blog from Hugo to Eleventy (11ty)

Categories: Migrating to Eleventy  

What I learned making top-level.dev

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

Categories: Pagination  Plugins  

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  

Eleventy and Storyblok - My perfect combination

In this article, I share why I choose this combination, hoping you also fall in love with them.

Categories: CMS  Why Eleventy?  

Under the hood

LostInBrittany's tech blog, reborn... again...

Categories: WebC  Why Eleventy?  

Eleventy

Categories: Why Eleventy?  

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  

What's that?

A short introduction why I started a blog and what you can expect here

Categories: Why Eleventy?  

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  

Eleventy components woes

So far so good, in part one we managed to do a very basic setup of a blog website sticking to...

Categories: WebC  

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

Technical Architecture

How to make your site generate more leads, increase revenue, and save on engineering. These are the...

Categories: Why Eleventy?  

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

Migrating blog to a static site generator - 11ty versus Astro

Benefits, downsides and the whole journey of migrating to an SSG.

Categories: Migrating to Eleventy  Why Eleventy?  

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

Migrer de Ghost à 11ty (Migrating from Ghost to 11ty)

Journal personnel de GoOz, avec des mots petits et grands.

Categories: Migrating to Eleventy  

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  

Migrating from WordPress to 11ty: Enhancing Website Performance and Control

Discover the benefits of using 11ty for static website generation, including improved performance,...

Categories: Migrating to Eleventy  

Refactoring My Static Site in 2023

When I last redesigned tylersticka.com, I was tired of my content management system. I already...

Categories: Why Eleventy?  

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  

Eleventy Style Guide Generator with WebC Component Support

The simplicity and speed of Eleventy with the organization of a self documenting design system....

Categories: WebC  

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

A Future of Themes with CSS Container Style Queries

One way to implement themes on a website with style queries

Categories: Asset Pipelines  CSS/Sass  

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  

Good news about CloudCannon and Eleventy

Not long after receiving a short-sighted shafting, my favorite JavaScript-based SSG and its creator...

Categories: Why Eleventy?  

Why CloudCannon Developers love Eleventy

YouTube video

Categories: Why Eleventy?  YouTube  

Now Page: Automatically Syncing My Now Pages

How I automatically sync my now page with omg.lol

Categories: How to...  Remote Data  

Going Lean

Categories: Migrating to Eleventy  Why Eleventy?  

Rethinking Categorization

Categories: Collections  How to...  

11ty: Index ALL the things!

Categories: Collections  Dates  Filters  Pagination  

i11g - Updating an Immutable Blog

Using IPFS, 11ty, and dAppling to create an easy to update blog hosted on IPFS.

Categories: Blogging  Getting Started  

Added Content Stats to Eleventy Plugin Post Statistics

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

Categories: Plugins  

From Nunjucks to Liquid

Changing the template language from nunjucks to Liquid in my eleventy project

Categories: Nunjucks/Macros  

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  

Use TailwindCSS with Eleventy Static Site Generator

If you are building a blog with Eleventy and want to add TailwindCSS for styling, then this is...

Categories: CSS/Sass  

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

Solving a date display issue in 11ty templates

I was getting the full UTC code and only needed the short date without time

Categories: Dates  

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

Six Million NPM Downloads!

Six Million npm Downloads! — Eleventy

Categories: Why Eleventy?  

Choosing a jamstack static site generator

Choosing a Jamstack Static Site Generator

Categories: Why Eleventy?  

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  

Introducing: 11ty with reasonable defaults

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

Categories: Configuration  

Generating CSS with PostCSS and eleventy.before

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

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 1, The Why

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

Categories: Migrating to Eleventy  Why Eleventy?  

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  

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

Fixed Category Page Generation

I figured out how to get my Eleventy Generate Category Pages module working in an Eleventy build...

Categories: Pagination  

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

Converting a Drupal site to 11ty

Samuel J. Huskey's Personal Website

Categories: Migrating to Eleventy  

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  

Migrating This Site from Joomla To Eleventy

Describes the process I used to migrate a 14 year old Joomla site (this one) to Eleventy and the...

Categories: Migrating to Eleventy  

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

Eleventy by Example, by Bryan Robinson

A review of "Eleventy by Example", by Bryan Robinson

Categories: Getting Started  

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

Cloudflare Pages error with 11ty build

I had an issue with a build failing on Cloudflare Pages and this is how I fixed it

Categories: Deployment  

Blogging on the Jamstack with Netlify & Eleventy

Looking to create a Headless Blog using the Jamstack? Here are all the steps you need to follow to...

Categories: Deployment  Netlify  

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  

Eleventy (11ty), Vite, Tailwind, and Alpine.js – Rapid static site starter framework

In this post, I'll share my go-to setup for rapidly developing static sites and landing pages where...

Categories: Getting Started  

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

Book Release: Eleventy by Example – Learn 11ty with 5 in-depth projects

Oh! Hey! I wrote a book. Fancy that! It's, of course, all about 11ty.

Categories: Getting Started  

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  

11ty 4tw!

Since 1998 I’m developing websites and software, do logo design and occasional classic print design....

Categories: Migrating to Eleventy  

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  

How Jampack optimizes our Eleventy website and improves performance

Jampack is a post-processing tool that takes the output of any static site generator and optimizes...

Categories: Performance  

Wrapping Emoji in your 11ty build

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

Categories: How to...  

A New LitLab Website

The Stanford Literary Lab is a research collective that applies computational criticism, in all its...

Categories: Migrating to Eleventy  

SVG Icon Sprites in Eleventy

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

Categories: How to...  

WebC First Impressions

Thoughts from my first attempt at understanding the new WebC framework from 11ty

Categories: WebC  

CSS Naked Day 2023

In which I describe what I did to prepare for CSS Naked Day for 2023 and ideally every year beyond...

Categories: Edge Functions  

webc-starter-kit (Github repo)

A starter project for Eleventy (11ty) using WebC as a main template langage. Also includes opiniated...

Categories: WebC  

A WebC-focused YouTube playlist

YouTube video

Categories: YouTube  

How Stable is Eleventy? (YouTube)

YouTube video

Categories: YouTube  

Working with CloudCannon and Eleventy - My Experience

My experience testing the CloudCannon CMS experience with Eleventy.

Categories: CMS  

3 Methods for scoped styles in web components that work everywhere

A post by Zach Leatherman (zachleat)

Categories: CSS/Sass  WebC  

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

wp-to-11ty - export WordPress XML and convert it to Eleventy (Github repo)

Convert a WordPress XML export to a new 11ty Blog. Contribute to jmhobbs/wp-to-11ty development by...

Categories: Migrating to Eleventy  

WebC Updates in Eleventy - Looping

A look at another new WebC feature - looping

Categories: WebC  

GitLab CI Pipeline for Eleventy

I write about software development, continuous integration/delivery, GitLab, containers, Node.js,...

Categories: Deployment  

How I built my own excerpt for Markdown content in Eleventy

I was not really happy with Eleventy's native excerpt solution requiring just a separator and having...

Categories: Markdown  

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

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

Categories: How to...  

Easy Date and Time Formatting with Luxon

Two great tastes that taste great together

Categories: Dates  

Another Eleventy content syndication path

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

Categories: Social Media  

WebC Updates in Eleventy

Description of updates to WebC

Categories: WebC  

Lazy select-based pagination in Eleventy

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

Categories: Pagination  

Automate and syndicate content from Eleventy to Mastodon

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

Categories: Social Media  

Blogging with Eleventy

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

Categories: Blogging  How to...  

New Blog Same as the Old Blog

Details about my site rebuild.

Categories: Blogging  Configuration  

The evolution of my CSS pipeline in Eleventy (part 2)

Evolution is a continuous phenomenon.

Categories: CSS/Sass  

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

Syncing Letterboxd Data to Markdown Files

Owning my Letterboxd data.

Categories: Remote Data  

What’s New in Eleventy 2: A Great SSG Just Got Better

Get up to speed with Eleventy 2.0, a popular, highly configurable SSG that's packed with new...

Categories: Why Eleventy?  

Scheduled Eleventy builds on Vercel with cron-triggered GitHub actions

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

Categories: Deployment  

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  

Building my /now page using Eleventy

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

Categories: Remote Data  

Smart Incremental Rebuilds With eleventyImport

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

Categories: How to...  

Time to move on from Nunjucks?

Here are some points to consider about how you should build and maintain Eleventy sites...

Categories: Nunjucks/Macros  

Full-stack Web Apps Without React

There are a ton of options for full stack web frameworks that don't use React. Let's explore some of...

Categories: Why Eleventy?  

Webmentions in Eleventy

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

Categories: Webmentions  

Eleventy Plugin: Green Links

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

Categories: Plugins  

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

The evolution of my CSS pipeline in Eleventy (part 1)

Handling CSS in Eleventy has been an evolutionary experience.

Categories: CSS/Sass  

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

I migrated this blog to Eleventy 2.0

Maker/Manager

Categories: Blogging  Migrating to Eleventy  

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

FIVE MILLION NPM DOWNLOADS!

Five Million npm Downloads! — Eleventy

Categories: YouTube  

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

Sass in Eleventy, with versioning

Adding support for <code>.scss</code> files, complete with content hashes.

Categories: CSS/Sass  

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

Process CSS or Sass With LightningCSS

Use these plugins or code snippets to make CSS a first-class templating language in Eleventy and add...

Categories: CSS/Sass  

Update to My Eleventy Blog Guide

An update regarding my Eleventy blog guide.

Categories: Blogging  Getting Started  

Taking Eleventy into the Spiderverse with eleventy-fetch

Let’s walk through the specifics of how to utilize the @eleventy/eleventy-fetch plugin to retrieve...

Categories: Data Cascade  Remote Data  

Extracting and using Critical CSS on my Eleventy site

This week I made some enhancements to extracting and implementing Critical CSS on my website that...

Categories: CSS/Sass  

Using WebC for progressively-enhanced UI elements

Using WebC for progressively-enhanced UI elements - Lewis Dale

Categories: WebC  

Internationalization with Eleventy 2.0 and Netlify

In this article, which I'm publishing along with a lightning talk at TheJam.dev 2023, I explain how...

Categories: Internationalization  

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  

Eleventy Collection Schemas

Use this 11ty plugin to enforce a typed frontmatter schema for templates within an Eleventy...

Categories: Collections  

New year, new me, new blog

I changed the design of my blog for the third time since its start in 2020.

Categories: Why Eleventy?  

Take your 11ty build from 1 second to 2 minutes by generating OG images

I tried to generate OG images during build and it ended up taking a long time

Categories: Images  Social Media  

Building a Mastodon Bot Listing Page in Eleventy

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

Categories: How to...  Social Media  

Moving my site from Jekyll to Eleventy - Part II

What I learned along the way..

Categories: Migrating to Eleventy  

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

Custom date formatting in Eleventy.js

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

Categories: Dates  

Rebuilding 11ty on a schedule

Automate the deployment of a website using Netlify and GitHub Actions at a specific time.

Categories: Deployment  

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  

Using JavaScript in a WebC Component

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

Categories: WebC  

Rebuilding a PHP App using Isomorphic JavaScript with Eleventy & Netlify

Back in the early days of the iPhone, I created Tipr, a tip calculator that always produces a...

Categories: Edge Functions  Netlify  

Website re-platform and a light redesign for 2023

Time for a site rebuild and this time I went with a static site generator

Categories: Migrating to Eleventy  

Which SSGs I recommend

Here’s a recap of my thoughts about the best tools for building and maintaining personal websites.

Categories: Why Eleventy?  

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

eleventy-cache-webmentions v1.1.5

Cache Webmentions using eleventy-fetch and make them available to use in collections, templates,...

Categories: Webmentions  

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

Additional Webmention Resources

Categories: Webmentions  

Adding Webmentions to Your Site

Categories: Webmentions  

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

Escaping Jekyll, and moving to Eleventy

Mendhak's blog on development, programming, technology, science.

Categories: Migrating to Eleventy  

Quick WebC Tip

How to enable better color coding for your WebC templates

Categories: WebC  

Quick Tip for Eleventy's WebC support

YouTube video

Categories: WebC  YouTube  

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

Using the Airtable API with Eleventy Collections

A detailed guide to building a reading list with the Airtable API and templated Eleventy data....

Categories: Collections  Remote Data  

Website redesign with 11ty!

I have rewritten my website to utilize 11ty, and it was a lot of fun

Categories: Migrating to Eleventy  

Eleventy (11ty) - A simple and powerful static site generateor

Eleventy is rising in the ranks among static site generators ⚡ It is powerful, simple to use, and...

Categories: Why Eleventy?  

External Asset Pipeline with Eleventy

I like to use NPM scripts for my asset pipeline instead of using Eleventy to generate assets and...

Categories: Asset Pipelines  Configuration  

Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe

Trying out CSS Grid’s new Masonry Layout, with a PhotoSwipe lightbox

Categories: Images  

A Beginner's Guide to Eleventy - part two

Second part of a beginner's guide to eleventy

Categories: Getting Started  

Post previews with Ghost, Eleventy & Netlify

A while back, I updated my Eleventy plugin for Ghost so you get more data from your Ghost instance,...

Categories: CMS  Deployment  

Static Mastodon toots in Eleventy: the Tailwind CSS edition

For users of my favorite JS-based SSG, here’s an Eleventy version of the Tailwind-based...

Categories: CSS/Sass  Social Media  

Using Eleventy filters in Directory Computed Data

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

Categories: Configuration  Data Cascade  Filters  

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

A Beginner's Guide to Eleventy - part one

First part of a beginner's guide to eleventy

Categories: Getting Started  

Moving to Eleventy

Categories: Migrating to Eleventy  

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

23 of the best Eleventy Themes (Starters) for 2023

There's a huge range of free starter themes available for the Eleventy static site generator — from...

Categories: Getting Started  

Configure Eleventy to Host a Custom Mastodon Alias

Ramblings on bacon, drawing, and technology

Categories: Social Media  

An Introductory Guide to Eleventy

Here’s an introductory guide to Eleventy. Learn about its benefits, uses, and getting started. Host...

Categories: Getting Started  Why Eleventy?  

2022

Importing external components in WebC via NPM

The online journal of Ashur Cabrera.

Categories: WebC  

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

11 Top Eleventy Blog Themes (Starters) in 2023

Using a theme can be a helpful way to get started with a new project, especially for developers who...

Categories: Blogging  Getting Started  

Eleventy 2.0 & WebC

I look at my experiences trying out Eleventy and its new Web Component language, webc.

Categories: WebC  

Pulling WordPress Content into Eleventy

Composable Architecture Powered by WordPress part 2 &#8211; How to pull content from a WordPress...

Categories: Remote Data  

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

Letting Eleventy Schedule Its Own Builds

Until recently, I've been using GitHub Actions to trigger builds on my website, but this approach...

Categories: Deployment  

New Eleventy features, a new theme, and full Eleventy support

We’re delighted to announce CloudCannon’s full support for Eleventy, one of the most popular (and...

Categories: Getting Started  

Using Airtable as a Jamstack CMS

This site is an occasional record of Daniel Saunders' reading and writing.

Categories: Remote Data  

A new website: now on Eleventy!

Announcing the new version of my personal website - this time around I built it in Eleventy.

Categories: Migrating to Eleventy  

Exploring WebC

How to setup and create your first WebC component in a Nunjucks 11ty

Categories: WebC  

Organizing the Eleventy config file

Eleventy lets you create a file called eleventy.js to configure the SSG to your own project’s needs....

Categories: Configuration  

Eleventy asset pipeline: precompiled assets without Gulp

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

Categories: Asset Pipelines  How to...  

Relational data in Eleventy

A pattern for handling many-to-many relationships.

Categories: Data Cascade  

CSS and JavaScript as first-class citizens in Eleventy

When building websites on Eleventy, we often have to decide how to deal with the CSS and JavaScript...

Categories: CSS/Sass  

Eleventy: Integrate PostCSS and Tailwind CSS

Daniel Zenzes

Categories: CSS/Sass  

A Bare-Bones Eleventy Template for Glitch

A quick template for using Eleventy on Glitch

Categories: How to...  

11ty Second 11ty (YouTube playlist, 8 videos)

YouTube video

Categories: YouTube  

Building a YouTube Embed Web Component (both vanilla and WebC flavored)

A look at a simple YouTube embed component built in traditional web components and Eleventy's WebC...

Categories: WebC  YouTube  

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  

From Notion to Eleventy

Mostly frontend, sometimes art

Categories: Remote Data  

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  

Eleventy Layouts with Sizlate

Eleventy Layouts with Sizlate by Simon McManus

Categories: Layouts  

Why I use Eleventy

A blog on web development, etc.

Categories: Why Eleventy?  

Changing urls but keeping webmentions in Eleventy

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

Categories: Webmentions  

Eleventy Starter Template Series

This series details how to build a starter template for Eleventy projects, going deep into...

Categories: Getting Started  

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

My notes on Eleventy WebC components

WebC is a compiler for single file Web Components that brings first-class component model to...

Categories: WebC  

Understanding WebC Features and Concepts

WebC is an exciting addition to the 11ty ecosystem as it enables first-class components. Putting the...

Categories: WebC  

WebC

WebC, the latest addition to the Eleventy suite of technologies, is focused on making Web Components...

Categories: WebC  

Why I built my own Vue plugin for Eleventy

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

Categories: Configuration  Plugins  

Integrating Cloudinary into Eleventy

A look at integrating Cloudinary image processing with Eleventy

Categories: How to...  Images  

First Experience Building with Eleventy's WebC Plugin

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

Categories: Plugins  WebC  

Introduction to WebC

What is WebC and what does it have to do with Eleventy?

Categories: WebC  

The next time you see me I will be Eleventy

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

Categories: Migrating to Eleventy  Why Eleventy?  

Moving my site from Jekyll to Eleventy - Part I

How I revamped my personal site.

Categories: Migrating to Eleventy  

Eleventy Tutorial - Create an 11ty Static Site

In this beginner's Eleventy tutorial, learn how to use 11ty by creating a static site with this...

Categories: Getting Started  

Manage your SVG files with Eleventy's render plugin

Using renderFile to keep things tidy

Categories: Images  Plugins  

Getting set up in Eleventy (6 part series)

Learn the basics of Eleventy in this six-part tutorial series.

Categories: Getting Started  

How I Learned to Stop Worrying and Love the Jamstack

This site is an occasional record of Daniel Saunders' reading and writing.

Categories: Why Eleventy?  

Static Site Generation with Eleventy (YouTube)

YouTube video

Categories: YouTube  

Shorter shortcuts through Nunjucks macros in Eleventy

While seeking a way to cut a three-line call down to one line, I found some great advice on using a...

Categories: Nunjucks/Macros  

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

Cache-busting in Eleventy, take two

This time, a solution that really (?) works.

Categories: CSS/Sass  

Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website

What is Eleventy? Eleventy (also called 11ty) is a simple yet powerful static site generator. It...

Categories: Getting Started  

11ty Serverless and Object Permalinks: Hybrid Rendering

Learn how to reuse a single source template in 11ty Serverless to generate both a static and...

Categories: Serverless  

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

Walk with an Eleventy site, before you can run

A getting started guide with the bare minimum. Every time I open the documentation website of ...

Categories: Getting Started  

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  

Bringing your Notion database to life with Eleventy

How and why I combine Notion and Eleventy (11ty) to render my weekly feed stats on my website.

Categories: Remote Data  

Webmention Setup for Eleventy

Here’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.

Categories: Webmentions  

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  

Eleventy: Build vs. Serverless vs. Edge

A post by Zach Leatherman (zachleat)

Categories: Edge Functions  Serverless  

Nested navigation in Eleventy

Building a no-JS navigation menu with the details element.

Categories: Navigation  

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

We're all living on it. But what exactly is The Edge?

But what is The Edge? What are Edge Functions? And what impact does this new technology have on the...

Categories: Edge Functions  

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

6 Reasons I (Still) Love 11ty

Two years after launching my site with 11ty, it’s grown considerably, and yet I’m still in love with...

Categories: Why Eleventy?  

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

Eleventy Crash Course - YouTube playlist

YouTube video

Categories: Getting Started  YouTube  

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  

You should add a generator tag to your Eleventy site

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

Categories: Configuration  

Testing the Netlify Cache Plugin with Eleventy

An example of caching for Netlify with an Eleventy site

Categories: Data Cascade  Deployment  Netlify  

How I Doubled My Lighthouse Performance Score in One Night

I spent some time seeing if I could get my Lighthouse performance score up. Here's how I fared.

Categories: Performance  

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

11ty second 11ty: The Render Plugin Part 1

The Render plugin is comprised of two shortcodes for use in your Nunjucks, Liquid or JS templates....

Categories: Plugins  YouTube  

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  

Optimizing Images with the 11ty Image Plugin

While imagery can enrich your content, it can also slow down your site if it's not used responsibly....

Categories: Images  Plugins  

Let's Learn Eleventy (11 Part Series)

For the past couple of weeks I have been exploring Static Site Generators (SSG) in an effort to...

Categories: Getting Started  Plugins  

Static site delivery automation with Eleventy & Buddy

Combine the speed of Buddy and intuitive nature of Elevenly to build and deploy static sites...

Categories: Deployment  

Why we switched to Eleventy + Netlify

Chris shares why we dropped Drupal for the newest version of our website.

Categories: Migrating to Eleventy  

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  

Eleventy wont process post

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

Categories: Debugging  

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

Hosting Eleventy on GitHub Pages

I've really been enjoying building sites with Eleventy instead of Jekyll. I'm still learning my way...

Categories: Deployment  

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  

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

Website and blog of Florian Eckerstorfer, a web developer living and working in Vienna, Europe. He...

Categories: Plugins  

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

New Looks

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

Categories: Migrating to Eleventy  

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

Migrating From WordPress to Eleventy - a non-developer's experience

I recently switched this website / blog from WordPress.com to Eleventy. I'm not a developer. Find...

Categories: Migrating to Eleventy  

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

Setting up Future Projects for Success with Template Repositories

This introduces the series of articles I wrote for Sparkbox's Foundry about how to build an Eleventy...

Categories: Getting Started  

Per-file commit logs with Eleventy

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

Categories: How to...  

The new Eleventy Vite Plugin

YouTube video

Categories: Plugins  YouTube  

Eleventy + Vue 3

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

Categories: Configuration  How to...  Plugins  

11ty quick tip: Nunjucks include in markdown without indentation

If you're not careful, included files are not correctly rendered.

Categories: Markdown  Nunjucks/Macros  

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  

Zero maintenance taxonomies in 11ty

Taxonomies in 11ty have always been hard. Sure, we have collections, but for when we want advanced...

Categories: Collections  

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

Minimum Static Site Setup with Sass

Use this command line combination for building a static site that includes Browsersync, processing...

Categories: CSS/Sass  Getting Started  

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  

Eleventy + Lit

Simple. Fast. Web Components.

Categories: Plugins  

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  

Migrating Hugo to Eleventy - Initial Thoughts

Migrating from Hugo to Eleventy has been a really pleasant and enjoyable experience.

Categories: Migrating to Eleventy  

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  

Fetching remote images with Eleventy

Following up on last month’s article about doing this in Hugo, we explain how to get there in a...

Categories: Images  Remote Data  

Using Storybook with Nunjucks components in Eleventy

The online journal of Ashur Cabrera.

Categories: How to...  Nunjucks/Macros  

Say hello to obsolete29.com v4!

Eleventy came out with v1.0 so I rebuilt my site to celebrate.

Categories: Blogging  

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  

Powering the latest Gaiety.life blog (here!) with 11ty

My favorite static site generator along with Tailwind UI to rebuild this very site.

Categories: Why Eleventy?  

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

Eleventy Custom Content Type Collections and Layouts

How-to on creating separate collections and layouts for a custom content type. In this case:...

Categories: Collections  Layouts  

11ty tips I wish I knew from the start

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

Categories: Configuration  Data Cascade  Getting Started  Navigation  

Going all in with Jamstack and Eleventy

I rebuilt my personal site with Eleventy, a static site generator, and am loving it!

Categories: Getting Started  

2021

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

Going serverless with Eleventy

Let's walk through how to configure Eleventy and how to use Eleventy Serverless to handle...

Categories: Serverless  

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

Categories: Layouts  

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

An In-Depth Tutorial of Webmentions + Eleventy

Join the Indie Web by adding Webmentions to your serverless Eleventy static site with this...

Categories: Webmentions  

Includes and Macros

Comparing techniques for encapsulating HTML components in Nunjucks or Jinja2.

Categories: Nunjucks/Macros  

Dynamically choosing a data file to use in Eleventy templates

What if I need _data/stuff.json sometimes and _data/thing.json other times?

Categories: Data Cascade  Global Data  

Time is on your side

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

Categories: Dates  How to...  

Mix and match template syntax in Eleventy using the render plugin

A post by Zach Leatherman (zachleat)

Categories: Plugins  

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

Creating and Using Eleventy Collections

Collections allow you to group templates and then sort, filter, and perform other manipulations to...

Categories: Collections  

Implementing a search bar on my static website

A personal blog where I write about my side projects

Categories: How to...  Search  

Migrating to Eleventy

Quick brain dump around my experience with Eleventy.js, a static site generator.

Categories: Migrating to Eleventy  

Managing a secrets directory in your eleventy site

A personal blog where I write about my side projects

Categories: Configuration  How to...  

Eleventy 1.0 - Global Data via Plugins Example

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

Categories: Global Data  Plugins  

Eleventy 1.0 - New Option for Global Data

A look at a new way to create global data for Eleventy 1.0 sites.

Categories: Global Data  

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  

Eleventy 1.0 - Dynamic Ignores

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

Categories: Configuration  

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  

Introduction to Eleventy (11ty) ELEVENTY

This is a simple introduction to Eleventy (11ty), a popular static site generator.

Categories: Getting Started  

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

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

Categories: Getting Started  

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  

Modular code with Nunjucks and Eleventy

These days, web development and design are all about modularization and components. Template...

Categories: Nunjucks/Macros  

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  

When to Use Pagination in Eleventy

Contrasting pagination and looping, with examples and a reference image.

Categories: Pagination  

Page Level URL Fetching with Eleventy

Making a network request on a page with Eleventy

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

Using Nunjucks shortcodes in Markdown files in Eleventy

Unlock the power of Eleventy Image in your md posts

Categories: Markdown  Nunjucks/Macros  

Structuring Eleventy projects

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

Categories: How to...  

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

Categories: Global Data  

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

Getting your bearings in an existing Eleventy project

Questions to ask to start making changes quickly

Categories: Configuration  

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  

Eleventy and template extends

A quirk detail about how Elevent handles extending a Nunjucks layout using template blocks.

Categories: Layouts  

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  

Integrating Eleventy with GitHub Flat Data

How to use the Flat Data GitHub action with Eleventy

Categories: Remote Data  

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

Notion API with 11ty

How to use the Notion API in 11ty

Categories: Remote Data  

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

Categories: Serverless  

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

A First Look at Eleventy Serverless!

YouTube video

Categories: Serverless  YouTube  

Dynamic Short URLs with Eleventy

Creating URL aliases dynamically with Eleventy

Categories: Collections  Front Matter  How to...  

Minimal SASS & eleventy Setup

A post about setting up SASS with eleventy without additional tools

Categories: CSS/Sass  

Webmentions + Eleventy Talk

Slides and resources from my talks at JamStack Toronto and Magnolia JS.

Categories: Webmentions  

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  

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

Categories: Why Eleventy?  

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  

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

Categories: Collections  

Going Beyond Static Sites With Eleventy

YouTube video

Categories: How to...  Why Eleventy?  

Moving from Hexo to Eleventy

Migrating my blog to a new static site generator and redesigning my theme.

Categories: Migrating to Eleventy  

Compile Sass with eleventy

Categories: CSS/Sass  How to...  

Itsiest, Bitsiest Eleventy Tutorial

Want to get started with Eleventy but feel overwhelmed? Try out this pared-down tutorial

Categories: Getting Started  

A Remarkable Discovery

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

Categories: How to...  Markdown  

11ty Simplicity

Categories: Why Eleventy?  

Why 11ty?

Categories: Why Eleventy?  

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

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

Categories: Why Eleventy?  

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

Stop forgetting the Eleventy Data Cascade

Eleventy is a great static site generator and one of the best parts of it is The Data Cascade. It's...

Categories: Data Cascade  

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

Asset Pipelines in Eleventy

While some SSGs have a standardized way of handling assets, Eleventy does not. That's a good thing!...

Categories: Asset Pipelines  

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

Categories: CMS  Collections  

Creating pages from data with Eleventy

Eleventy has the ability to generated multiple pages from a structured data source, either static...

Categories: Data Cascade  Global Data  

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

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

Categories: Blogging  Migrating to Eleventy  

Using Eleventy’s official image plugin

The what, why, and how of Eleventy Image.

Categories: How to...  Images  

Layout Templating

Tips for creating Eleventy layouts.

Categories: CSS/Sass  

Building a Database Driven Eleventy Site

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

Categories: Global Data  Pagination  Plugins  

On Eleventy

Categories: Migrating to Eleventy  Why Eleventy?  

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  

Faster YouTube embeds in Eleventy

Use lite-youtube-embed in Eleventy for faster and more privacy-minded video

Categories: YouTube  

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

Migrating from Hugo to Eleventy

A short summary of this site's migration from Hugo to Eleventy.

Categories: Migrating to Eleventy  

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

A Deep Dive Into Eleventy Static Site Generator

Learn what makes Eleventy unique, and about some essential concepts to help you successfully get...

Categories: Getting Started  

Filters for 11ty Content

Includes filters for creating an excerpt and other content enhancements.

Categories: Filters  

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

Categories: Blogging  Migrating to Eleventy  

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 Webmentions to my site

While I was rebuilding my website in Eleventy, I saw Amber Wilson's article about adding Webmentions...

Categories: Webmentions  

Dates in Eleventy

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

Categories: Dates  

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  

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

Categories: CSS/Sass  Getting Started  Netlify  

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  

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

Categories: Data Cascade  Global Data  

Encapsulated Eleventy/Nunjucks components with macros

How to pass parameters to an include in Nunjucks

Categories: Nunjucks/Macros  

Site Metadata

A useful technique to manage site metadata (title, description, url, etc) for ease of retrieval...

Categories: Data Cascade  Global Data  

Using Template Content as Data for 11ty

Create a collection of content using any Eleventy templating language and learn to control the...

Categories: Collections  Data Cascade  

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

Categories: Migrating to Eleventy  

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  

Webmention Analytics

I built a tool to analyze incoming webmentions. This new side project generates monthly reports to...

Categories: Webmentions  

Eleventy in eleven minutes

Image by 11ty.dev I would like to share my opinionated path how I got started using. ...

Categories: Getting Started  Why Eleventy?  

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  

Going Beyond Static Sites With Eleventy

Eleventy includes features that allow exceeding the traditional limits of static. Learn how to...

Categories: Why Eleventy?  

How to Use WordPress as a Headless CMS for Eleventy

You want to offer static-site benefits to clients, but they want WordPress! Learn how to use...

Categories: CMS  

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  

My year of Eleventy plugins

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

Categories: Plugins  

Don't shut down your business! Instead use Eleventy Image

A post by Zach Leatherman (zachleat)

Categories: Images  

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  

Add HTML classes to 11ty markdown content

11ty comes with some useful plugins for markdown manipulation, one of these is... Tagged with 11ty,...

Categories: Markdown  

Integrate Pocket in Eleventy

Categories: How to...  

Webmentions: Joining the IndieWeb

Webmentions are now live on the site, powered by webmention.io! I've been meaning to do this for...

Categories: Webmentions  

Accessing Eleventy Data on the Client Side

Accessing Eleventy data files in your JavaScript code

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

Moving from Gatsby to Eleventy

Thoughts and learnings of Graham Martin, a UI Developer in London, UK

Categories: Migrating to Eleventy  

An async function walks into a loop.

A solution for async functionality in template loops, using `eleventy-image` as an example, some...

Categories: Images  

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

Debug Mode

Debug Mode — Eleventy

Categories: Debugging  

Trigger a Netlify build every day with IFTTT

Trigger a Netlify Build Every Day with IFTTT — Eleventy

Categories: Deployment  Netlify  

2020

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  

Eleventy and Hugo: comparing and contrasting

Trying to choose between the two best static site generators? See if these points address your...

Categories: Why Eleventy?  

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  

Building my personal site with Eleventy

Power Platform Developer and all around cool guy

Categories: Blogging  Configuration  Getting Started  Layouts  Why Eleventy?  

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

Hashing out a cache-busting fix for Eleventy

Some of the code behind my previous post.

Categories: CSS/Sass  

Using Airtable with Eleventy

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

Categories: Global Data  How to...  Remote Data  

Optimize Images in Eleventy Using Cloudinary

Learn the fundamentals behind responsive images and how to set them up in Eleventy using Cloudinary...

Categories: Images  

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  

Grow the IndieWeb with Webmentions

When I re-made my site with Eleventy, the pages didn't change much, but I had loads of fun adding...

Categories: Webmentions  

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  

Inlining scripts and styles in 11ty

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

Categories: Configuration  CSS/Sass  

Footnotes in 11ty

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

Categories: How to...  

From Jekyll to 11ty

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

Categories: Migrating to Eleventy  

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

Time to Cache Up

For a long time I’ve been searching for a sound solution to storing the entire Webmention history of...

Categories: Webmentions  

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

From Gatsby to Eleventy

In this post I'll compare my experience building my personal blogging site (the one you're on now)...

Categories: Migrating to Eleventy  

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

Jamstack 101: Getting Started with Eleventy

Joel Varty will show you how to get started building Jamstack sites using JavaScript and Eleventy.

Categories: Getting Started  

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

Internationalization And Localization For Static Sites

Internationalization and localization is more than just writing your content in multiple languages....

Categories: Internationalization  

What is Eleventy! With David Darnes (Audio)

We’re talking about Eleventy. What is it and how does it fit into your Jamstack workflow? Drew...

Categories: Why Eleventy?  

Create a Custom Collection with Eleventy

If you've built sites using Eleventy, you're probably familiar with collections. Using the...

Categories: Collections  

Getting started with Eleventy in 11 minutes

This article will show you how to build a static site in 11 minutes using Eleventy. Tagged with...

Categories: Getting Started  

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

Eleventy and Responsive Images

I have created a remark plugin called @fec/remark-images that can be used with Eleventy to...

Categories: Images  

Why I love 11ty (and JAMstack) for building static sites...

It's been really hard to keep up with web development technologies over the past 10 years 🤔, but...

Categories: Why Eleventy?  

Tips for debugging in 11ty

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

Categories: Debugging  How to...  

Converting Behind the Source to 11ty

I spent the week converting Behind the Source from Craft to Eleventy (a static site generator). Will...

Categories: Migrating to Eleventy  

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

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

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

Categories: Plugins  

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  

Eleventy and Vue, a match made to power Netlify.com

Learn more about the new Netlify.com site tech stack. We've combined Eleventy and Vue, and...

Categories: Netlify  

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 Clock

The online journal of Ashur Cabrera.

Categories: Pagination  

Using Eleventy data files for frequently used links

Have a set of frequently referenced links? A global data file can come in handy.

Categories: Data Cascade  Global Data  Remote Data  

Eleventy: RSS Feeds and Front Matter Data

Getting front matter data into my Nunjucks RSS feed templates.

Categories: Front Matter  How to...  

Let's Learn Eleventy (11ty) - Collections

This is the second part of the Let't Learn Eleventy series. We'll learn how to use collections.

Categories: Collections  

A high-performance blog template for 11ty

I'm excited to announce the beta-release of eleventy-high-performance-blog–a high-performance blog...

Categories: Blogging  Performance  

Let's Learn Eleventy (11ty) - What is Eleventy?

This is the first part of the Let't Learn Eleventy series. We'll learn what is Eleventy and how to...

Categories: Getting Started  Why Eleventy?  

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  

Migrating from Node and Express to the Jamstack - Part 2

A look at how you can migrate from Node to the Jamstack - this edition focused on users

Categories: Migrating to Eleventy  Serverless  

Switching from WordPress to Eleventy

Personal site with thoughts, technical posts, bio, resume.

Categories: Migrating to Eleventy  

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

Migrating from Node and Express to the Jamstack - Part 1

A look at how you can migrate from Node to the Jamstack

Categories: Global Data  Migrating to Eleventy  Pagination  

Building a blog with 11ty and Wordpress

When I decided to move to the Jamstack, I was sure that I wanted to build something with an API and...

Categories: Blogging  

Create a Plugin for 11ty (video)

YouTube video

Categories: Plugins  YouTube  

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

Integrating Contentful with Eleventy to create static sites

Want to use a powerful yet simple static site generator? Learn how to integrate 11ty with Contentful...

Categories: CMS  

Adding Algolia Search to Eleventy and Netlify

How I added Algolia Search to an Eleventy Site

Categories: How to...  Search  

Chasing 100: tips for optimizing your website

It takes work, but making your website better is worth it.

Categories: Performance  

Moving from Panini to Eleventy

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

Categories: Migrating to Eleventy  

An Eleventy Starter with Tailwind CSS and Alpine.js

When I decided to try to base my current personal website on Eleventy, I didn't want to reinvent the...

Categories: CSS/Sass  

Adding Algolia Search to Eleventy and Netlify - Part Two

An update to my post on using Algolia with Eleventy

Categories: How to...  Search  

Moving from WordPress to Eleventy

Some thoughts and findings from my first forays converting a WordPress blog into a static site with...

Categories: Migrating to Eleventy  

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

Your blog doesn’t need a JavaScript framework

Why I choose Eleventy over Gatsby for my new website

Categories: Why Eleventy?  

Moving from Jekyll to Eleventy

Moving a blog-centric site from Ruby-based Jekyll to Javascript-based Eleventy.

Categories: Migrating to Eleventy  

Eleventy: Debugging

I belatedly figure out how to get debug output in Eleventy.

Categories: Debugging  

Performant data fetching with promises and Eleventy

Fetching a whole bunch of data from APIs at build time can be an intensive process. Getting that...

Categories: Remote Data  

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  

Architecting data in Eleventy

Setting and using data in the static site generator Eleventy

Categories: Data Cascade  

Goodby Sapper, Hello Eleventy!

Sometimes things change fast: Just about two months after I launched this website with the...

Categories: Migrating to Eleventy  

Logging with Eleventy and Nunjucks

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

Categories: Debugging  How to...  

Going solo with Eleventy

Losing webpack, regaining Tailwind CSS.

Categories: Why Eleventy?  

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

Moving From Ghost to Eleventy

Ramblings on bacon, drawing, and technology

Categories: Migrating to Eleventy  

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

Let’s Learn Eleventy! Boost your Jamstack skills with 11ty

Check this tutorial out to see what the static site generator Eleventy can do. Spin up a fast,...

Categories: Getting Started  

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  

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

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

Categories: Blogging  Configuration  Getting Started  

Back to Nunjucks for my Eleventy site

Why I’ve decided for now to backtrack from JavaScript-only templating in Eleventy.

Categories: Nunjucks/Macros  

The Emergency Website Kit

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

Categories: How to...  Why Eleventy?  

Building a website with a static site generator, part 2: Eleventy

In this post, we're gonna take a deeper look into Eleventy which takes care of building the website...

Categories: Blogging  Getting Started  Global Data  Layouts  

Eleventy's New Performance Leaderboard

A post by Zach Leatherman (zachleat)

Categories: Performance  

Moving this blog from Jekyll to 11ty

A couple of gotchas but mostly very straightforward

Categories: Blogging  Migrating to Eleventy  

Building a website with a static site generator, part 1: Setup

In this blog series, we will build a static website using Eleventy, NetlifyCMS, GitHub and Netlify....

Categories: Blogging  CMS  Deployment  Getting Started  

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

Basic custom taxonomies with Eleventy

Eleventy comes with a built-in tagging system. For a recent project, I wanted to use my own category...

Categories: Collections  

Twitter Cards with Nunjucks and 11ty

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

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

RaymondCamden.com now powered by Eleventy!

Details on my migration to Eleventy

Categories: Migrating to Eleventy  Why Eleventy?  

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  

Taking WordPress to Eleventy

How I converted 12 years of posts in WordPress to an Eleventy static site ... and loved every minute...

Categories: Migrating to Eleventy  

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

Eleventy Walkthrough

Categories: Getting Started  

Static site generators: Hugo vs Jekyll vs Gatsby vs 11ty

I have an obsession with SSGs, and Eleventy is my favourite (even better than Hugo, Jekyll, and...

Categories: Why Eleventy?  

Teaching in the open: Eleventy

Content Management Systems and structured data are part of my teaching duties. From the get go, I...

Categories: Getting Started  

Let’s Learn Eleventy!

YouTube video

Categories: Getting Started  YouTube  

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

2019

Code comfort: Eleventy and webpack

Some words about my Eleventy/webpack configuration.

Categories: Configuration  How to...  

Show conditional Twitter intents with Eleventy

Encourage users to retweet or share a post based on whether a Tweet already exists for your blog...

Categories: Social Media  

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

Adding Search to your Eleventy Static Site with Lunr

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

Categories: Collections  Configuration  Search  

Migrating from WordPress to Eleventy

Author: Ed Spencer, Article: Migrating from WordPress to Eleventy

Categories: Migrating to Eleventy  

Why I'm Digging Eleventy

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

Categories: Pagination  Why Eleventy?  

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  

Why I left Hugo for Eleventy

Only weeks after telling you I was sticking with Hugo, I switch to Eleventy: the whys...

Categories: Migrating to Eleventy  Why Eleventy?  

What I Like About Eleventy

Over the last month so, I’ve been working with Dr. Julian Jones to port some design system projects...

Categories: Why Eleventy?  

Consuming a headless CMS GraphQL API with Eleventy

With Eleventy, consuming data coming from a GraphQL API to generate static pages is as...

Categories: CMS  

Eleventy and Ghost

We’ve expanded our headless starter repositories with Eleventy – a popular JAMstack static site...

Categories: CMS  

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  

Use Eleventy to generate a Ghost blog

Last night I had a thought: What if I could source a Ghost blog from the Ghost Content API and then...

Categories: CMS  

Multilingual sites with Eleventy

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

Categories: How to...  Images  

Implementing categories

Categories: Collections  

Working with collections

Categories: Collections  

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

2018

Build your own Blog from Scratch using Eleventy

Filament Group helps companies design and build super-fast responsive sites and web apps that are...

Categories: Blogging  Getting Started  

Keeping Sass Simple and Speedy

Optimising your local development pipleine, for faster Eleventy Sass compilation

Categories: CSS/Sass  

Adding search to a Jamstack site

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

Categories: How to...  Search  

Deploy a free Gatsby, Hugo, or Eleventy website template in 30 seconds

We’ve started a collection of quick-start website project templates. Whether you’re looking for a...

Categories: Deployment  Netlify