Skip to main content

632 posts in 'How to...'

Eleventy - Merge external data with an existing collection

I wanted to create an archive of all of my tech writing, merge content I wrote for other websites and my blog into a single collection. Here is how I did it.

Categories: CollectionsConfigurationGlobal DataHow to...

Building pages from data in Eleventy

I've expanded the media sections I already had built to include pages generated from data using Eleventy.

Categories: Data CascadeHow to...Remote Data

Dynamic Content Includes

In this post, I explain how I solved two issues at the same time by introducing a feature to my post layout that I’m calling pre and post includes.

Categories: Front MatterHow to...LayoutsNunjucks/Macros

Taking inspiration from a fellow blogger

Categories: ConfigurationHow to...

Keeping Out Dark Visitors

One short data file and one tiny template to block all AI scrapers and crawlers.

Categories: How to...PermalinksRemote Data

Create a Blog with Eleventy and Storyblok

This is a step-by-step tutorial on how to create a blog site using Eleventy and Storyblok.

Categories: BloggingCMSConfigurationHow to...Pagination

Eleventy Reading Time Plugin

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

Categories: How to...Plugins

Scheduling Posts with a Static Site

Alex Hyett is a Software Developer, YouTuber and Writer focussed on helping people transform their lives by learning how to code.

Categories: DeploymentDraftsHow to...Scheduling

Supporting a full-text RSS feed

Up until now, I've only included a short description for posts in my RSS feed, but I've changed tactics so fellow RSS perverts can choose to read my stuff in their reader of choice.

Categories: CollectionsHow to...RSS

Leveraging APIs like Notion with a nice caching system

How I implemented Notion and PSN APIs in my Eleventy build for my Now and Gaming pages

Categories: How to...MarkdownNow PageRemote Data

Building a Localised Site with 11ty, Sanity & Netlify

In this article, we'll explore how I built a localised website for a client of mine using 11ty, Sanity, and Netlify.

Categories: CMSHow to...Internationalization

Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck

I've spent a while hosting and fetching images from bunny.net when my 11ty builds. I had multiple pull zones configured and wanted to leverage bunny.net's transforms, but the pricing of $15/month per zone wasn't feasible.

Categories: How to...Images

Surfing The Web And Sharing What I Find

How I surf the web, manage my online bookmarks and share exciting hyperlinks with the community.

Categories: CollectionsHow to...PaginationRemote DataRSS

Notifications for New Eleventy Posts in GitLab - Part 2

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

Categories: CollectionsConfigurationHow to...Social Media

Deploying An 11ty Project To Shared Hosting

Forget the usual suspects for your website hosting. You should consider shared hosting for your next 11ty project.

Categories: DeploymentHow to...

Improving page load times with pagination in Eleventy

This is probably a very obvious one for everyone; the less content on the page, the quicker it will load.

Categories: How to...PaginationPerformance

Deploy a Static Website to AWS S3 with Official GitHub Actions

Modern IT & InfoSec for the Discerningly Lazy

Categories: DeploymentHow to...

Blockin' Bots with Eleventy

The 11ty equivalent of Ethan Marcotte's Jekyll solution

Categories: How to...Permalinks

Notifications for New Eleventy Posts in GitLab - Part 1

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

Categories: CollectionsConfigurationHow to...

Enhancing pagination with a page selector

I've made a change to my site's pagination wherein I've enhanced the page count displayed at the bottom of my home and links pages to display the page count in a select element. The select displays a list of all the pages and navigates to the selected page.

Categories: How to...Pagination

2024 redesign

Some notes about this 2024 redesign.

Categories: Asset PipelinesHow to...Plugins

Thirteenth place on Eleventy Leaderboards

My site got to thirteenth place on Eleventy Leaderboards with perfect Lighthouse scores.

Categories: How to...Performance

How I shaved 1.5 minutes off my Eleventy build time

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

Categories: Asset PipelinesHow to...PerformancePlugins

Building a Live Preview with Eleventy, Contentful, and Liquid Templating

As a part of the marketing team at Heyflow, I collaborate with people who work on the company’s website. Although all team members are technically acquainted, sometimes they struggle to update the website. The struggle is not being able to visualize what will change on the page when updating the content. Saving the updates and […]

Categories: CMSHow to...NetlifyRemote DataServerless

Webmentions Web Component

I got overwhelmed by build steps and decided to fetch my webmentions through a web component.

Categories: How to...Webmentions

Lightweight search in Eleventy

I've been using Pagefind for my site search for a while now and would readily recommend it, but I wanted to throw together something a bit lighter weight and customizable.

Categories: How to...Search

Generating Eleventy Post Descriptions Using Generative AI

Using Generative AI to automatically generate post descriptions is a great way to save time and ensure consistency across your site. By leveraging tools like ChatGPT, you can quickly create engaging summaries that entice readers to click through and read more. The Describer GenAI extension for Visual Studio Code simplifies this process, allowing you to effortlessly generate descriptions for your articles with just a few clicks. With the ability to customize settings and easily integrate the generated descriptions into your site, this tool is a valuable asset for content creators looking to streamline their workflow.

Categories: BloggingFront MatterHow to...

How to add tags with links to hub topic pages in 11ty

Categories: CollectionsHow to...

Automate Your Static Site Rebuilds with Netlify Scheduled Functions

Effortlessly automate regular website updates for your static site using Netlify scheduled functions. Set it and forget it - never worry about manual updates again!

Categories: BloggingDeploymentHow to...NetlifyScheduling

Eleventy excerpts

Everybody seems to implement their own way of generating post excerpts in Eleventy, and here's mine.

Categories: BloggingFiltersHow to...

Group posts by year in Eleventy.js

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

Categories: BloggingCollectionsDatesHow to...

Automatic image pre-processing in Eleventy, Part 2

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

Categories: ConfigurationHow to...Images

How I Eleventy

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

Categories: ConfigurationHow to...LayoutsMarkdownPermalinksShortcodes

Using an Eleventy event to optimize component JavaScrip

I've added a small event to optimize web component JavaScript when my site builds.

Categories: Asset PipelinesHow to...Performance

Surfacing most used tags in Eleventy

I made some lightweight design changes to my site, keeping things simple but moving the date up above post headers, surfacing tags below and restoring `Read more` links.

Categories: CollectionsFiltersHow to...

Adding inline SVGs to Eleventy.js

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

Categories: How to...ImagesConfiguration

Eleventy - Group posts by year

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

Categories: BloggingCollectionsConfigurationDatesHow to...

Math equations with Eleventy using TeXZilla

I demonstrate how to make MathML equations using LaTeX markup with TeXZilla.

Categories: FiltersHow to...

Building My Comics Page

How I built my comics page using League of Comic Geeks, a NodeJS module and Eleventy.

Categories: How to...Remote Data

Deploy an Eleventy site to Cloudflare Pages efficiently with GitHub's action cache

Deploy an Eleventy site to Cloudflare Pages efficiently with GitHub's action cache I have wanted to move this site from Netlify for a while now, but the recent news about their bandwidth prici...

Categories: DeploymentHow to...

Unveiling the Marvels of 11ty's WebC

Are you ready to dive deep into the world of web development and discover a game-changing tool that will revolutionise the way you build websites?

Categories: How to...PerformanceWebC

Search, Webmentions and microformats

I’ve made some updates on my website - let’s talk about them. I added a search functionality with Pagefind, Webmention support both directions and microformats to my blog posts.

Categories: How to...SearchWebmentions

Elevating Video Transcripts as Searchable Content

A post by Zach Leatherman (zachleat)

Categories: How to...PluginsWebCYouTube

Updating 11ty to enjoy ESM

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

Categories: ConfigurationHow to...

THE Eleventy Meetup Feb 20th

We had a lovely meetup with the Eleventy community. I talked about building meetup community sites utilizing Global Data Files and Robb talked about how he builds his website with Eleventy, pulling data in from various sources.

Categories: BloggingHow to...YouTube

Eleventy: custom markup alongside item contents

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

Categories: ConfigurationFiltersHow to...

Weaving music data in and out of my personal website

I started integrating music data into my personal website when I added Last.fm artist and album displays to my now page. Initially, I tried sourcing artist images from a few different services, knowing that Last.fm had updated their API to stop serving them. After a fair bit of searching I found that most services that supplied artist images covered only a small fraction of my library and often supplied the wrong image when there were multiple artists sharing the same name.

Categories: How to...Now PageRemote Data

Using Eleventy to Gobble Up Everything I Do Online

A blog post about how my site works based on a talk I did at the Eleventy meetup

Categories: BloggingGlobal DataHow to...Remote DataSocial Media

Building a bespoke now-playing web component

I've long had a now playing element on the home page of my site that displays either what I've checked into on Trakt, the Lakers' record and who they're playing when a game is on or the last song I've listened to. After leveraging some new web components on my site, I decided to refactor the code powering this into a web component specific to my needs.

Categories: Remote DataHow to...Now Page

Refactor by shortcode

I decided to take on some overdue refactoring of the 11tybundle.dev site. Here's what I did.

Categories: FiltersHow to...Nunjucks/MacrosShortcodes

Using B2 as a JSON data store

My links page is powered by the Readwise Reader API but because there are, quite reasonably, rate limits in place, I've gone ahead and reduced the page count I fetch on each build and cached older link data from past builds in a B2 bucket.

Categories: Data CascadeGlobal DataHow to...Remote Data

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

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

Categories: Asset PipelinesHow to...Plugins

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

Categories: FiltersHow to...Plugins

Setting up image transforms in Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, music, writing, reading and tv and movies.

Categories: How to...ImagesPlugins

Eleventy 🤝 Immich

HOW DO YOU DO, PLEASE STATE YOUR PROBLEM _

Categories: CollectionsHow to...ImagesPlugins

Keeping your Algolia search index up to date

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

Categories: ConfigurationHow to...Search

How to connect Eleventy and Storyblok

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

Categories: CMSConfigurationGlobal DataHow to...

Lessons Learned Moving Eleventy form CommonJS to ESM

A post by Zach Leatherman (zachleat)

Categories: ConfigurationHow to...Plugins

Added Folder Selection to My New Post Utility

Added an enhancement to my Eleventy New Post utility to support choosing the target folder during post creation.

Categories: BloggingHow to...

Check if images are available before optimizing in Eleventy

How to check if a remote image is available before attempting to optimize it using @11ty/eleventy-img.

Categories: How to...ImagesWebmentions

Assigning an active page in Eleventy navigation

A small tip for computed navigation, when the URL structures don’t all match.

Categories: How to...NavigationPagination

Eleventy Filter to Turn a URL Into a Domain Name

ZOMG my first 11ty filter!

Categories: FiltersHow to...

Slashing by caching

I've reduced the build time for the 11ty Bundle site from 30 seconds to 10 seconds. Here's how.

Categories: FiltersHow to...Performance

Different favicon for development build

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

Categories: ConfigurationHow to...Nunjucks/Macros

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

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

Categories: ConfigurationHow to...

💻 Emoji URLs and 11ty Webmentions

Not letting emojis drop mentions on the floor

Categories: How to...Webmentions

Community websites with Eleventy

With Eleventy’s data files, I’ve come up with a good setup to build landing pages for communities that organize events.

Categories: Data CascadeFiltersGlobal DataHow to...

Eleventy - Create a global production flag

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

Categories: ConfigurationGlobal DataHow to...Layouts

Track and display uptime of your blog

This article is about: How you can track and display the uptime of your eleventy-page using Uptime Kuma

Categories: DeploymentHow to...PerformanceRemote Data

Creating an OPML File for my Blogroll

How I'm creating OPML files for my blog, and pod, rolls so people can subscribe to all of the sites in one go

Categories: BloggingData CascadeDatesHow to...

Sending Webmentions after Deploying to Azure Static Web Apps

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

Categories: How to...Webmentions

Buttondown with 11ty on Netlify with GitHub

A look at how Fudge Sunday 🤔💡🤯🤓 newsletter gets made each week

Categories: DeploymentHow to...

Super fast responsive image loading in Eleventy

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

Categories: How to...ImagesPerformancePlugins

Fetching Package Dependents from GitHub

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

Categories: Global DataHow to...Plugins

How to automatically generate a new boilerplate-post with inquirer

This article is about: How I automated the creation of the boilerplate with frontmatter

Categories: BloggingFront MatterHow to...

How to host a 11ty-site on a Raspberry Pi

This article is about: How I am hosting my blog on a Raspberry Pi for almost no money

Categories: BloggingDeploymentHow to...

Cloudflare _redirects

Keeping old paths alive on the new site

Categories: ConfigurationDeploymentHow to...

Adding webmentions to my site

I had told myself that I wouldn't do this...but, seeing them on other people's sites changed my mind.

Categories: FiltersGlobal DataHow to...Social MediaWebmentions

Adding Decap CMS to 11ty

One person is typing.

Categories: BloggingCMSConfigurationHow to...Plugins

A Simple Guide to Redirects on Neocities with Eleventy

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

Categories: ConfigurationDeploymentFront MatterHow to...Pagination

How I use Readwise Reader to post and share links.

Categories: BloggingHow to...Remote Data

Hiding Future Posts in Eleventy

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

Categories: BloggingConfigurationGlobal DataHow to...Plugins

Adding Site Search to Eleventy with pagefind-search

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

Categories: CSS/SassHow to...PluginsSearch

Right here, right now

A brief explanation of the way I built the "Right now" box on my homepage.

Categories: CollectionsData CascadeDatesHow to...Now Page

Eleventy Resume Builder

Despite searching the internet, I couldn't find a quick starter for my online resume project, not even on the official 11ty start page. Consequently, I decided to invest some time in creating one and making it available as a starter project for a broader audience.

Categories: Getting StartedHow to...Why Eleventy?

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

Categories: ConfigurationHow to...ImagesLayoutsImage Galleries

Creating a complete RSS feed

This article is about: How I created a complete RSS-Feed

Categories: BloggingHow to...PluginsRSS

Minifying and compressing text files to reduce load

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

Categories: ConfigurationHow to...Performance

Deploy 11ty Site Using Rsync

Step-by-step guide for a deployment of your 11ty blog using rsync, npm deploy scripts and optimization for an efficient workflow.

Categories: DeploymentHow to...

Building robots.txt from a simple API endpoint

The online journal of Ashur Cabrera.

Categories: ConfigurationHow to...Remote Data

Automatic pre-processing of post images in Eleventy

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

Categories: ConfigurationHow to...ImagesPlugins

Eleventy File List Plugin

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

Categories: How to...Plugins

How to modify external links by post-processing HTML in Eleventy.

Categories: How to...Markdown

Another Approach to Webmentions in Eleventy

A quick and dirty way of using Eleventy Fetch and Liquid to display webmentions on your site.

Categories: How to...Webmentions

LastFM Recently Played with Eleventy

How I'm using Eleventy Fetch to display my recently played tracks from LastFM.

Categories: How to...Remote Data

Generating and Caching Open Graph Images with Eleventy

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

Categories: ConfigurationHow to...ImagesLayoutsSocial Media

Adding a GitHub Repository List to an Eleventy Site (part 2)

An extension of the previous post that shows how to add a list of GitHub repositories to this site using authenticated access to the GitHub REST API.

Categories: How to...Remote Data

Adding a GitHub Repository List to an Eleventy Site

I decided to add a list of GitHub repositories to this site; not because the site needs it, but because I wanted to learn how to do it. I built a quick and easy approach (with limitations) and this post describes how I did it.

Categories: How to...Remote Data

Eleventy Post Graph Plugin

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

Categories: DatesHow to...Plugins

Generating Open Graph Images in Eleventy

I added the og:media image tags yesterday, and the approach seems to work, so I'm going to share it in this post.

Categories: FiltersHow to...ImagesSocial Media

Syntax highlighting code in Eleventy posts

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

Categories: CSS/SassHow to...Plugins

More Easily Use Design Tokens in Eleventy

Jan De Wilde, designer and web developer

Categories: CSS/SassHow to...

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

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

Categories: BloggingCMSCSS/SassConfigurationHow to...

Adding pagefind to my Eleventy personal site

I've been wanting to add search functionality to this site for a while. Pagefind made it simple.

Categories: How to...Search

Programmatically importing your Last.fm listening data to ListenBrainz

I love Last.fm, but in the interest of redundancy, Ive started programmatically importing my listening data from Last.fm into ListenBrainz.

Categories: Data CascadeGlobal DataHow to...Remote Data

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

Adding Music Previews to My Now Page

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

Categories: How to...Remote Data

DoubleShift

A small idea to check how many actors have been in both Scrubs and Grey's Anatomy turned into a much bigger thing

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: FiltersHow to...

Automating my site update with gitlab ci/cd

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

Categories: DeploymentHow to...

How I'm using the Fathom API to show a list of popular blogs posts in my Eleventy site

Categories: Data CascadeFiltersHow to...Remote Data

Generating the Firehose page on the 11tybundle site

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

Categories: CollectionsHow to...Remote Data

VSCode Pasting 11ty Images

Creating content locally like a hosted editor

Categories: How to...ImagesMarkdownPlugins

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

Categories: How to...Remote DataYouTube

Using 11ty to bring back tag clouds

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

Categories: FiltersHow 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 StartedHow to...Migrating to Eleventy

A new technique for image optimization: SVG short circuiting

A post by Zach Leatherman (zachleat)

Categories: How to...ImagesPlugins

Hacking together a Tweekly.fm replacement

I mused the other day about wanting a replacement for Tweekly.fm which shut down due to Twitter's API changes and restrictions. In my case, the aim would be to make this compatible with Mastodon since that's where I've found myself spending the most time recently.

Categories: How to...Remote Data

Highlighting the current category in Eleventy

Highlight current parent folder using the eleventy-navigation plugin

Categories: How to...Navigation

11ty Quick Tip: Minify inline JavaScript in WebC

For when you need to minify your WebC JavaScript

Categories: Asset PipelinesHow to...WebC

Default layouts in 11ty

Default layouts in 11ty

Categories: ConfigurationHow to...Layouts

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 a whole thing.

Categories: CMSFront MatterHow to...

Pagination in a Javacsript template with Eleventy

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

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: FiltersHow to...RSS

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

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: ConfigurationHow to...

Building a photography website

The setup for sharing my photo gallery.

Categories: How to...ImagesNavigationImage Galleries

Clean Up Your Config File

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: ConfigurationHow to...

TinaCMS + 11ty

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

Categories: BloggingCMSConfigurationDeploymentHow to...

Adding Social Preview Images To Our 11ty Blog

Twitter X recently removed headlines and descriptions from link previews, in the name of “esthetics.” Inspired by Steph Ango, while we try not to run our business on the whims of a social media platform, this change did push us into making a change we’ve been meaning to for awhile: adding social preview images for our blog posts. For example, this is now what you’ll see when you share this post:

Categories: How to...ImagesSocial Media

CloudCannon as a git based headless CMS for static site generators

Showcasing CloudCannon with 11ty as a headless CMS service

Categories: CMSHow to...

Migrating Blogger to Eleventy

Shifting sheetsj.com into the future

Categories: Migrating to EleventyHow to...Blogging

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

Categories: NavigationHow to...CSS/SassPermalinks

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

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

Categories: ConfigurationHow to...ImagesCSS/SassSocial Media

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 a... Tagged with frontend, css, html, tutorial.

Categories: BloggingCollectionsFront MatterHow to...Layouts

How to Fix Eleventy Serverless Functions on Netlify

In a strange turn of events where I made zero changes to my code, my serverless functions suddenly stopped working, until now.

Categories: How to...NetlifyServerless

Excerpts for Eleventy: My Implementation

Converting my relatively basic personal website to Eleventy has shown me how challenging it is to build a static-site generator flexible...

Categories: BloggingHow to...Front MatterMarkdown

Headless kiosk application (with Kirby CMS)

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

Categories: CMSHow to...Images

Delaying asset requests in Eleventy

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

Categories: Asset PipelinesHow to...

Eleventy JSON Output

For a small Eleventy-based project I wanted to output an example.json file – stored in the data folder – in a nunjucks template. If you simply output the variable example you'll see the unhe…

Categories: How to...Filters

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

Categories: How to...DeploymentScheduling

How to add a custom slugify filter to 11ty

During my recent blog migrations, I discovered the new slugify filter handles apostrophes differently. I'd prefer they were dropped. Here are the steps.

Categories: FiltersHow to...

Building a Blogroll with 11ty

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

Categories: BloggingHow 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 site.

Categories: Data CascadeRemote DataHow to...ConfigurationBlogging

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 based... Tagged with eleventy, 11ty, tutorial, portfolio.

Categories: How to...Navigation

Custom language syntax highlighting

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

Categories: CSS/SassHow to...

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

Categories: Front MatterHow to...

Semi-automated hashtags for syndicated posts

I went out on a limb recently and decided to build a custom collection in Eleventy that aggregates my post tags and link tags (sourced from Matter). These tags then get appended to shared post or link titles when they're syndicated from my site.

Categories: CollectionsHow to...

Creating a Category Filter in Eleventy

Now I have a few posts, it would be good to have some way to narrow them down when looking for something specific.

Categories: FiltersHow to...Nunjucks/Macros

CloudCannon + Eleventy

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

Categories: DeploymentHow to...CollectionsConfiguration

Now page: grouping episodes of the same tv show

I made a minor update to how I'm normalizing TV data for display on my now page.

Categories: Remote DataHow to...Now Page

Flickerless dark mode in 11ty with Tailwind CSS

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

Categories: CSS/SassConfigurationHow to...

Drying up now page templates and normalizing data in Eleventy

My now page consists of a number of similar sections — some bespoke text, a number of media grids and lists. The text is repeated once, the lists are easily templated out in Liquid.js and the media grids are all quite similar.

Categories: How to...

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

Setting a post to draft in 11ty while writing

Categories: ConfigurationHow to...Drafts

Webmentions in Eleventy

There comes a time in every Eleventy blog's life where the author must write a post about implementing webmentions. Here is mine.

Categories: How to...Remote DataWebmentions

Fun With Front Matter: Part 3 - Handling Edits

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

Categories: How to...Front Matter

Fun With Front Matter: Part 2 - Follow-ups

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

Categories: Front MatterHow to...

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

Categories: Front MatterFiltersHow to...

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

My site is built using 11ty and is rebuilt once an hour. These frequent rebuilds accomplish a few things, notably updating webmention data and keeping my now page current.

Categories: How to...Edge FunctionsNow Page

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 to avoid needing WebC or Design Tokens included.

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 was time for a total rewrite and upgrading my stack and tools.

Categories: Remote DataHow to...

How I built my Now page

YouTube video

Categories: How to...Remote DataYouTube

Pulling WordPress Post Categories & Tags Into Eleventy

Step by step guide to gathering post categories and tags from the WordPress REST API for better filtering and discoverability in an Eleventy blog.

Categories: Remote DataHow to...

classnames

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

Categories: PluginsHow to...CSS/Sass

Build your own 11ty starter

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

Categories: How to...ConfigurationGetting Started

Eleventy Category Images

Describes a solution I implemented in this site to add Category-specific header images to posts. I modified my eleventy-generate-category-pages module to generate additional properties for the header images and some shortcodes to add the image and attribution to the site's pages.

Categories: ImagesHow to...

Interactive HTML Code Demos in Eleventy

With eleventy-plugin-code-demo, you can easily add interactive HTML, CSS, and JavaScript code demos to your Eleventy site using Markdown.

Categories: How to...

Use TailwindCSS with Eleventy Static Site Generator

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

Categories: CSS/SassConfigurationHow to...

WebC Declarative Shadow DOM Slot Workarounds

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

Categories: WebCHow to...

Sorting and Dating 11ty Posts by Name

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

Categories: DatesHow to...

Formatting Obsidian markdown to render in Eleventy

Added functionality to find and replace certain Obsidian markdown with Nunjucks templates and HTML

Categories: How to...Markdown

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 Travis CI for deployment to GitHub Pages. Travis, unfortunately, discontinued their free plan b...

Categories: DeploymentHow 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 Mastodon replies.

Categories: How to...Social Media

Now Page: Automatically Syncing My Now Pages

How I automatically sync my now page with omg.lol

Categories: How to...Remote DataNow Page

Build a Blog with Eleventy (11ty) and Webiny Headless CMS

In this tutorial, we will build a blog site with Eleventy (11ty) and Webiny Headless CMS. We will look at how to set up Webiny and consume that data in a Eleventy (11ty) project.

Categories: BloggingCMSGetting StartedHow to...

I took some time last week to build out a popular posts widget after seeing Zach's implementation using Google Analytics.

Categories: Remote DataHow to...

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

Add table of content in Eleventy markdown blog

First, install the markdown-it-anchor plugin to add ids to heading elements. Then use the eleventy-plugin-toc plugin to generate the table of content.

Categories: BloggingHow to...Markdown

Batching YAML Front Matter Updates

This article describes a command-line utility I created to do batch add/update to YAML front matter of all of the markdown files in a folder. This is especially helpful when working with static site generators (SSG).

Categories: Front MatterHow to...

Updated Eleventy Post Stats Plugin

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

Categories: How to...Debugging

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

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

Categories: How to...Configuration

Eleventy Filter Parameters

How to add parameters to an Eleventy filter.

Categories: FiltersHow to...

Now page update: poster art for shows and movies

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

Categories: Remote DataHow to...

Generating CSS with PostCSS and eleventy.before

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

Categories: CSS/SassConfigurationHow to...

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 have. At the end of last year, I implemented an interesting feature on this site, but never wrote about it.

Categories: Social MediaDeploymentHow to...

Displaying listening data from Apple Music using MusicKit.js

Up until now my now page has sourced music data from Last.fm (and may well again). But, in the interest in experimenting a bit, I've tried my hand at rewriting that part of the page to leverage data from Apple Music, using MusicKit.js instead.

Categories: Remote DataHow to...

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 and store page URL to display on my /now page.

Categories: ImagesRemote DataHow to...Now Page

Creating Bootstrap WebC Components in Eleventy

Using WebC to make working with Bootstrap simpler.

Categories: WebCHow to...

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

Eleventy tag filter

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

Categories: FiltersHow to...

Bookshop 11ty Guide

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

Categories: How to...Getting Started

File Last Modified Is Available

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: DatesHow to...

Integrating JSON-LD Into Your Eleventy Pages

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: ConfigurationHow to...

From ICS to JSON: surfacing anticipated albums

I use MusicHarbor by Marcos Tanaka to track upcoming albums from my favorite artists (typically by syncing my last.fm data with the app.) When I see something new that I want to add to my collection I throw it on a calendar creatively titled Albums.

Categories: Remote DataHow to...

Using Goodreads Data in Eleventy - Update

A followup to my previous article on Goodreads and Eleventy

Categories: Remote DataHow to...

Fast and Easy CSS Revisioning

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: CSS/SassHow to...

Optimizing for performance with Eleventy

In the interest of over-engineering my personal site I've gone out of my way to optimize it for performance.

Categories: PerformanceHow to...

Using Goodreads Data in Eleventy

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

Categories: Remote DataHow to...

11ty image shortcode best practice

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

Categories: ImagesHow to...MarkdownShortcodes

Generating Eleventy Category Pages Inside Eleventy Build

After my announcement of my command-line utility for generating Eleventy Paginated Category pages, I learned how to do this inside of Eleventy and need some help finishing it for general use.

Categories: PaginationHow to...

Interactive demos inside articles

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

Categories: How to...

Eleventy Paginated Category Pages

Something I wanted to do with this site, but wasn't supported by Eleventy, is generate paginated pages of content for each category. This article explains how I solved this problem and how you can use it for your Eleventy site(s).

Categories: PaginationHow to...

Adding client side search to a static site

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

Categories: SearchHow to...

Eleventy Displaying Posts from Another Site

I wanted to pull the most recent articles from an Eleventy site into another Eleventy site, so I wrote this article to explain how I did it.

Categories: How to...Remote Data

My plugin for markdown-it: codewrap

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

Categories: MarkdownHow to...

I hooked up Eleventy to WordPress API

I’ve got some plans for this site. The main thing I want to do is bring my music collection into my main site, instead of having a subdomain. That thing has been a “prototype” for over 2 years now… The problem is that site uses Notion as its data source. I really like managing my […]

Categories: Remote DataHow to...

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

How to rewrite the Cloudfront request so trailing slashes are redirected to the non-trailing slash URI using a Cloudfront function.

Categories: DeploymentHow to...

Generating Post Batches in Eleventy

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

Categories: How to...

Automating Eleventy Post Creation

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

Categories: How to...

Eleventy Site Statistics

I wanted to add a statistics page to this site, so I created an Eleventy plugin to do it. This article describes how to use the plugin in your Eleventy site.

Categories: How to...

Fetching & caching data from Airtable in my 11ty site

Using the Airtable.js library and Eleventy Fetch

Categories: Remote DataHow to...

Now page update: favorite articles from Matter

I dropped in a quick update to my now page to display the 5 most recent articles from my favorites feed in Matter.

Categories: How to...

Meta Description and Keywords in Eleventy

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

Categories: ConfigurationHow 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 out to fix it.

Categories: How to...

Unit Test 11ty Pages With Vitest and Typescript

Unit testing 11ty JavaScript templates with Vitest and Typescript

Categories: DebuggingHow 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 add First and Last buttons as well and this post describes how I did it.

Categories: NavigationHow to...

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 needing a server-side language or database.

Categories: Getting StartedHow to...

Automated workflows for websites

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

Categories: ConfigurationHow to...

Building and Automating My Now Page

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

Categories: How to...Remote DataNow Page

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 stuck with 11ty in the end for a variety of reasons, but th...

Categories: How to...WebC

Wrapping Emoji in your 11ty build

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

Categories: How to...

SVG Icon Sprites in Eleventy

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

Categories: How to...

Jan De Wilde, designer and web developer

Categories: How to...MarkdownAccessibilityPermalinks

Builder.io's Partytown with 11ty

Exploring builder.io's partytown and integrating it with 11ty! It is nothing but a library which uses web workers to separately execute third party scripts.

Categories: How to...

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

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

Categories: How to...

Blogging with Eleventy

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

Categories: How to...Blogging

.env files in Eleventy

The Eleventy docs recommend the dotenv package for working with .env files, but I've found dotenv-flow to be a bit more useful inasmuch as support for .env* file patterns make development more convenient.

Categories: How to...

Spellchecking my blog posts with cSpell

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

Categories: How to...Blogging

Automating Algolia Index Updates

I added support for Algolia search to an Eleventy site, and this post describes a utility I created to help Eleventy site owners to automate updating their Algolia indices outside of the build process.

Categories: SearchHow to...

Smart Incremental Rebuilds With eleventyImport

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

Categories: How to...

Displaying Build Details in an Eleventy Site

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

Categories: ConfigurationHow to...

Alphabetising Glossary Terms

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

Categories: BloggingFiltersHow to...

Should I upgrade to Eleventy 2.0?

Eleventy 2.0 was released at the beginning of February. It has some major new features. Is it worthwhile to upgrade? Is it painful to upgrade?

Categories: How to...

Using the Codeberg CI

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

Categories: DeploymentHow to...

Hiding drafts and future posts in Eleventy.js

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

Categories: How to...ConfigurationDrafts

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: ServerlessHow to...

Font Subsetting with Eleventy.js

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

Categories: Asset PipelinesConfigurationHow to...Plugins

Supporting PDF Embeds in an Eleventy WebC Component

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

Categories: How to...

Slotted content in Eleventy

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

Categories: How to...

Upgrading to Eleventy 2.0.0

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

Categories: How to...

Filtering tags within Eleventy.js collections

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

Categories: FiltersCollectionsHow to...

Farewell Netlify Large Media, Welcome eleventy-img

Not too complex once I had finished making my mistakes.

Categories: ImagesHow to...

Building a Mastodon Bot Listing Page in Eleventy

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

Categories: How to...Social Media

Adding a Table of Contents to dynamic content in 11ty

Code that introduces automated anchor links to headlines in Eleventy dynamic-loaded content. Improves accessibility and makes content sharing easier!

Categories: How to...

Setup GitLab Review Apps with Eleventy

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

Categories: ConfigurationDeploymentHow to...

Using Rmarkdown with Eleventy

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

Categories: ConfigurationFront MatterHow to...Markdown

CAUTION

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

Using shiki with 11ty

Shiki is a really nice syntax highlighter that I already wrote about. This is just a short post to show you how to use it with eleventy.

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 local computer, and uploading the build result on my hosting with `rsync`. I've moved to Cloudflare Pages 6 months ago, which means webmentions where updated only when I pushed new content to GitHub. Here's how I fixed that.

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 syntax highlighting in Eleventy.

Categories: PluginsHow to...

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 modified and manually via a data property

Categories: How to...

Adding tag list with post count to Eleventy.js

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

Categories: CollectionsHow to...

Improving Syntax Highlighting

Adding syntax highlighting to a blog is hard, doing it in a good way is hard. I recently switched my setup away from @11ty/eleventy-plugin-syntaxhighlight to a custom solution based on Shiki.

Categories: How to...

11ty, nunjucks, tag counts

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

Categories: Nunjucks/MacrosHow to...

Adding posts by tag to Eleventy.js

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

Categories: How to...

Adding a basic search to a static site

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

Categories: SearchHow to...

Adding webmentions to your static blog

The portfolio and blog of Jan Monschke

Categories: WebmentionsHow to...

How to programmatically add tags to posts in 11ty

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

Categories: BloggingCollectionsConfigurationHow to...Plugins

Adding dynamic read time to Eleventy.js

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

Categories: How to...

Adding stub posts

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

Categories: BloggingHow to...

Building A Membership Site With 11ty

Do you want to offer exclusive content, but also have full control over the platform you use? With the power combo of Eleventy, Netlify, and Supabase, we’ll create an authenticated membership site, no frameworks required.

Categories: How to...Edge Functions

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

Categories: BloggingConfigurationHow to...Markdown

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 more about the progress and the result.

Categories: How to...Dates

Adding Tina CMS to 11ty

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

Categories: CMSHow to...

Plop in Automation

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

Categories: How to...

Kevin is a designer based in the UK specialising in digital product design, design systems and all things web.

Categories: Nunjucks/MacrosHow to...

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 better... Tagged with eleventy, tutorial.

Categories: DatesHow to...

Using PageFind with Eleventy for Search

How to use PageFind to implement search for an Eleventy site

Categories: How to...Search

Building a Podcast Site with Eleventy

Moving Ruminate's site from Simplecast to Eleventy

Categories: How to...

Fixing long start-up times of the Eleventy dev server

Running Browsersync without internet connection.

Categories: DebuggingHow to...

Drafts and timestamp-based publishing in Eleventy

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

Categories: DatesHow to...Drafts

Using Fontsource With 11ty

For quite some time, I was searching for a way to self host google fonts because the google fonts API's network request increased the render blocking time more than I expected.

Categories: How to...

Adding Download Support in an Eleventy Site

An example of adding download resources to an Eleventy site

Categories: How to...

Eleventy asset pipeline: precompiled assets without Gulp

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

Categories: Asset PipelinesHow to...

A Bare-Bones Eleventy Template for Glitch

A quick template for using Eleventy on Glitch

Categories: How to...

Support External Articles in an Eleventy Blog

Adding a method to list external articles in an Eleventy blog

Categories: How to...

Some Options for Timing Pages in Eleventy

Some experiments timing slow pages with Eleventy

Categories: PerformanceHow to...Debugging

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, desktop and devices.

Categories: How to...

Quick LiquidJS + Eleventy Example - All Posts

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

Categories: How to...Dates

Eleventy, Markdown, and Tailwind CSS

English software developer based in Seattle.

Categories: MarkdownCSS/SassHow to...

How to access post content in template listing files

Eleventy (11ty) Tutorial

Categories: Data CascadeHow to...

Building an Eleventy Starter Template Series

In this series, learn how to construct your own starter template for Eleventy so you can start your future projects sooner.

Categories: Getting StartedHow to...

Integrating Cloudinary into Eleventy

A look at integrating Cloudinary image processing with Eleventy

Categories: ImagesHow to...

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

Using Puppeteer with 11ty to automate generating social share images

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

Categories: FiltersHow to...PaginationSocial Media

Get good Git info from Eleventy, too

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

Categories: How to...

A truly fetching utility for Eleventy

While trying to make things work equally well in multiple repos, I discover the value of an Eleventy plugin I’d previously ignored.

Categories: Remote DataHow to...

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

Static embeds in Eleventy

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

Categories: Social MediaHow to...

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

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

Categories: Asset PipelinesHow to...

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

Categories: Social MediaHow to...

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

Categories: How to...Filters

Support Draft Blog Posts in Eleventy

A look at various ways of supporting draft posts with Eleventy

Categories: How to...ConfigurationCollectionsDrafts

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 static data with JSON and dynamic (at build time) data with JavaScript.

Categories: Global DataHow to...

WordPress & Eleventy part two: Eleventy

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

Categories: CMSHow to...

WordPress & Eleventy part one: WordPress

Some considerations for setting up WordPress to use with Eleventy.

Categories: CMSHow to...

Add Netlify CMS to an existing 11ty site

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

Categories: CMSNetlifyHow to...

Generating Zips in an Eleventy Site

An example of providing zipped resources in an Eleventy site.

Categories: How to...

Adding Custom Anchors to Headings in Markdown - Eleventy

Anchors are nothing but id attributes applied to an element to link to it using href attribute internally on the same page.

Categories: MarkdownHow to...

I18n of URLs

Zach Leatherman asked what style of internationalization you'd prefer (explicit or implicit) and my response just doesn't fit in 280 characters.

Categories: InternationalizationHow to...

Eleventy - Shortcode for Embedding Codepen

Don't know what eleventy is? Before you read further, check out this amazing series of articles by... Tagged with webdev, javascript, beginners, eleventy.

Categories: How to...Shortcodes

Reading Comic Books in the Jamstack

Adding support for digital comic books to your Jamstack site

Categories: Global DataHow to...Images

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

Categories: DatesHow to...

Inlining SVGs in Eleventy

Medium post

Categories: ConfigurationHow to...Images

Logging in Eleventy

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

Categories: How to...Debugging

Building a Quiz with Eleventy and Eleventy Serverless

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

Categories: ServerlessHow to...

Getting Tailwind to work with Eleventy

Tackling Tailwind to work with Eleventy.

Categories: CSS/SassDebuggingHow to...

Generate a sitemap for your Eleventy website

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

Categories: How to...Configuration

Add Build Info to an 11ty Site

Expose information about your 11ty site at build time to all templates using global data. Among other things, this can be used to show your site's build time, package version, and the latest Git commit hash.

Categories: DeploymentHow 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 images in it. I needed something different, and this is how I did it.

Categories: PluginsImagesHow to...

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. Here’s...

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 developers call "pagination", but it...

Categories: PaginationHow to...

Creating a now page archive with 11ty

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

Categories: CollectionsFront MatterHow to...LayoutsNavigationNow Page

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 site with the lowest hosting costs possible?

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 template language without having to leave the familiar comfort of the Node ecosystem.

Categories: How to...Filters

Favicons in root with Eleventy

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

Categories: How to...

Adding Cooklang Support to my Eleventy Blog

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

Categories: How to...

Design Mode in 11ty

Sometimes, I prefer to compose text right in my browser and copy it over to my source files. In 11ty, we can enable this behind a keyboard shortcut in our development environment using environment variables.

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, accessible front end development.

Categories: How to...Remote Data

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

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

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

Categories: How to...Drafts

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

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 image tag. In this post, I walk through how responsive images (with the picture tag) are handled on this blog in a way that doesn't compromise the authoring experience.

Categories: MarkdownImagesHow to...

Use Your Saffron Recipes in the Jamstack

How to use your Saffron recipes in a jamstack site.

Categories: How to...

Thoughts on the Jamstack and Content Metrics

Tips for getting an understanding of your site's content

Categories: How to...

Using Storybook With 11ty

Storybook is great for component-driven development. This blog post shows you how to use Storybook with 11ty.

Categories: How to...ShortcodesWebC

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 DataRSS

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, and how to create a page containing all tags ordered alphabetically

Categories: How to...

Eleventy Progressive Web App

Catching the Eleventy Lighthouse obsession bug!

Categories: PerformanceHow to...

Generating Apple Touch Icons with Eleventy

Creating the various sizes of Apple Touch Icons is one of the more tedious tasks in web development, but we can use JavaScript templates in Eleventy to automatically generate Apple Touch Icons.

Categories: ImagesHow to...

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

Validating the HTML of an Eleventy site

Let's build an HTML validator for an Eleventy site. It will validate all generated pages to make sure they are valid HTML. Any errors will be reported in the terminal.

Categories: How to...

Sometimes it's too late for a starter project

Categories: How to...CMSImage Galleries

Ignore Eleventy Files With Environment Variables

Using environment variables and the Eleventy config option to ignore files, we can exclude files or directories depending on our build process.

Categories: How to...

Per-file commit logs with Eleventy

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

Categories: How to...

Eleventy + Vue 3

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

Categories: ConfigurationHow to...Plugins

11ty aliases the right way

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

Categories: CollectionsConfigurationHow to...Pagination

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 workaround, you can assemble and parse a JSON string to pass along to the shortcode as an argument.

Categories: How to...

Generate Social Image Covers With Eleventy And Node-Canvas

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

Categories: ConfigurationHow to...Social Media

A 11ty Reading Time Plugin Quest

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

Categories: How to...Plugins

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 other... Tagged with eleventy, 11ty, lighthouse, performance.

Categories: PerformanceHow to...

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 page content splitted in serveral files using reusable UI components

Categories: InternationalizationHow to...

Including RSS Content in your Eleventy Site

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

Categories: Remote DataHow to...RSS

Building blocks for my first Eleventy site

Different choices that go into building an Eleventy website from scratch.

Categories: CSS/SassDatesDeploymentFiltersHow to...NavigationPaginationSocial Media

Custom Markdown Components in 11ty

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

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... Tagged with 11ty, eleventy, firebase, graphcms.

Categories: ServerlessHow to...Blogging

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, accessible front end development.

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: BloggingFront MatterHow to...

How to add npm packages for client-side use in Eleventy

It's not immediately obvious how to use npm packages in an Eleventy website front end. Here's how to do it.

Categories: How to...

Notes Section: From Notion To Eleventy

How to write notes on Notion and publish with Eleventy

Categories: Remote DataHow to...

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 describes how to do that with an Eleventy static site.

Categories: How to...

Adding QR Codes to Your Jamstack Site

A look at adding QR codes to your Jamstack site.

Categories: PaginationHow to...

Advanced 11ty: Using Objects in your UI

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

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... Tagged with eleventy, minification, terser, 11ty.

Categories: How to...Netlify

A Google Static Maps Eleventy Plugin

A simple Eleventy plugin to support Google Static Maps

Categories: How to...Remote Data

Easily Create Gravatar Images With Eleventy

If you're moving your Wordpress site to Eleventy, you will want to convert your Gravatar images too. Find out how easy it is using an Eleventy shortcode.

Categories: ImagesHow to...

My complete blogging workflow

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

Categories: BloggingHow to...ImagesFront Matter

Using a Google Photos Album in your Eleventy Site with Pipedream

Integrating a Google Photos Album in your Eleventy site with Pipedream

Categories: ImagesHow to...Remote DataImage Galleries

Using Storybook with Nunjucks components in Eleventy

The online journal of Ashur Cabrera.

Categories: Nunjucks/MacrosHow to...

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 experience with simple JavaScript.

Categories: PaginationHow to...

A Guide to Building a Blog in Eleventy

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

Categories: BloggingHow to...Getting Started

Using the Netlify CMS locally

The markdown file uses the `/src/layout/admin.njk` template. This is very similar to the default Netlify CMS example. ```html <!doctype html> <html> <head> <meta charset…

Categories: NetlifyCMSHow to...

CAUTION

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

Setting a timestamp for posts and RSS feeds in eleventy

Eleventy (11ty) Tutorial

Categories: DatesHow to...RSS

Just Enough JavaScript for Eleventy

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

Categories: ConfigurationHow to...

Running Netlify Dev and Eleventy Two or More Times At Once

A tip for folks using Netlify Dev and Eleventy

Categories: How to...

How to use Contentful with Eleventy

Here's a pretty 0-60 tutorial on integrating Contentful headless content with Eleventy static site generation! I hope you think it's nice!

Categories: CMSHow to...

Time is on your side

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

Categories: DatesHow to...

Configuring Web Fonts in 11ty with Global Data

Rather than using static font-face declarations for web fonts, you can take advantage of global data in 11ty to create a single source of truth for fonts and reuse those values in your templates and CSS.

Categories: Global DataHow to...

Implementing a search bar on my static website

A personal blog where I write about my side projects

Categories: How to...Search

Managing a secrets directory in your eleventy site

A personal blog where I write about my side projects

Categories: ConfigurationHow to...

Converting a simple HTML site to use Eleventy

For when you're ready for a little templating fun

Categories: How to...Migrating to Eleventy

Updated social sharing (open graph protocol) images for my personal site

Using the large social sharing images added nothing to the information being published so I've decided to stop using them.

Categories: Social MediaHow to...

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

Inspecting an existing 11ty project

Great talk by Cassey Lottman

Categories: How to...ConfigurationDebugging

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 Algolia, without bloating our codebase,

Categories: ServerlessSearchHow to...

Requesting YouTube API endpoint using Node and 11ty

How to request YouTube API endpoint using Nodejs standard API and Eleventy (11ty) in the frontend!. Tagged with node, eleventy, javascript, html.

Categories: YouTubeHow to...

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

Categories: How to...Front Matter

Supporting Multiple Authors in an Eleventy Blog - Follow-Up

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

Categories: How to...Front Matter

How to Create and Deploy Your First Eleventy Website

Learn how to build a website with Eleventy (11ty), a static site generator that gives you simplicity and flexibility.

Categories: How to...Deployment

Every fire needs a sparkline

A post by Zach Leatherman (zachleat)

Categories: How to...

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

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 through that process using a real example with Eleventy.

Categories: How to...

Using Liquid Blocks in Eleventy Layouts

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

Categories: LayoutsHow to...

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

Prettier previews, built with many moving parts.

Categories: ImagesHow to...

How I Set Up a Project With Eleventy

Introduction This is a quick overview on my typical setup for an 11ty project. I really... Tagged with jamstack, eleventy.

Categories: How to...Getting Started

More Work on Algolia and My Blog

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

Categories: SearchHow to...

Using parameters in your eleventy includes with nunjucks macros

Includes are great. But for actual reusability of code, parameters are always needed. Luckily, nunjucks makes this possible with macros!

Categories: How to...Nunjucks/Macros

A Running Log - Garmin Connect and Eleventy

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

Categories: Data CascadeHow 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 11ty templating magic!

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 embeds

Categories: How to...Social MediaFiltersRSS

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

Page Level URL Fetching with Eleventy

Making a network request on a page with Eleventy

Categories: How to...Remote DataFront MatterGlobal Data

Structuring Eleventy projects

One of the great things about Eleventy is its flexibility and its lack of assumptions about how your projects should be organized. However, in order to preserve my own sanity, I needed to come up with a default files and folders architecture that made sense to me.

Categories: How to...

Blog post filter with Netlify Functions

I built my first ever serverless feature to add tag filtering to my blog listing. Here's how I integrated that to my Ghost & Eleventy setup with Netlify Functions.

Categories: FiltersHow to...ServerlessRemote Data

Building a notification thingamajig with Eleventy data

The online journal of Ashur Cabrera.

Categories: Data CascadeHow to...

Making an 11ty collection from a remote XML file

RSS is XML with a specification, however not all RSS feeds follow the spec. In this post, we process the feed as an XML document meaning we can access the extra attributes and values

Categories: CollectionsHow to...Remote Data

Eleventy plus Vite = elite

Re-bundling, but without the pain of webpack.

Categories: How to...Plugins

Formatting dates nicely in 11ty with Luxon

Eleventy (11ty) Tutorial

Categories: DatesHow 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 API, serverless functions, and Eleventy.

Categories: ServerlessHow to...

Setting a conditional variable in Javascript

Power Platform Developer and all around cool guy

Categories: ImagesHow to...

Improving my automated open graph image process w/ Eleventy

Power Platform Developer and all around cool guy

Categories: ImagesSocial MediaHow to...

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 eleventy-img. Here is what I did.

Categories: ImagesHow to...

Manage Design Tokens in Eleventy

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

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 the latest YouTube videos on our website

Categories: Remote DataCollectionsHow to...RSS

Creating an Additive Capture Shortcode in Eleventy

Creating a capture shortcode that appends insteads of replacing

Categories: How to...

Creating an 11ty collection from a JSON API

Using 11ty Global data files, you can make collections from JSON APIs, allowing you to make whole websites from one endpoint

Categories: CollectionsHow to...Global Data

Dynamic Short URLs with Eleventy

Creating URL aliases dynamically with Eleventy

Categories: Front MatterCollectionsHow to...

Using Lunr with Eleventy via Netlify Serverless Functions - Part Two

A followup to my post demonstrating using Lunr via serverless functions

Categories: SearchHow to...

Using Lunr with Eleventy via Netlify Serverless Functions

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

Categories: SearchHow to...

A Remarkable Discovery

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

Categories: MarkdownHow to...

Accessing 11ty filters within data files to keep your code DRY

11ty filters can exist as JS functions inside the declared filters directory - these can be accessed by other files not processed by 11ty

Categories: FiltersHow to...

Sanity with 11ty

Categories: CMSHow to...

Building a Choose Your Own Adventure site with Eleventy

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

Categories: Front MatterHow to...

Automatically generate open graph images in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Categories: FiltersHow to...ImagesSocial Media

Using PurgeCSS with Bootstrap and Eleventy

Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap? In this tutorial,... Tagged with eleventy, 11ty, bootstrap, purgecss.

Categories: CSS/SassHow to...

Adding an Email Subscription to Your Jamstack Site

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

Categories: How to...Front Matter

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 f... Tagged with 11ty, eleventy, sanity, jamstack.

Categories: How to...CMS

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

Eleventy 1.0

In the changelog, I’m documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work. This time it’s about the update to Eleventy 1.0 and some things that changed while updating.

Categories: ImagesSocial MediaHow to...

How I got the archive page permalinks right.

Categories: How to...Permalinks

Get your Eleventy Site into the real world using a hosting provider like Netlify or Git pages

There are plenty of ways to get your 11ty site live depending on preferences and skill set, this blog walks through a few of the popular ones including Gitlab pages, Vercel, Netlify and Cloudflare pages

Categories: DeploymentHow to...

Using Eleventy’s official image plugin

The what, why, and how of Eleventy Image.

Categories: ImagesHow to...

Medium-Style Share Highlights in Eleventy

I built an Eleventy plugin to do Medium-style text highlights that can be shared. It uses a webcomponent, custom properties and the Web Share API.

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 your past

Categories: CollectionsHow to...

Creating a feed in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Categories: How to...

npx eleventy !== npx @11ty/eleventy

Use the former at your own risk.

Categories: How to...Configuration

Using the Image plugin with Eleventy to build a simple gallery

Categories: ImagesHow to...PluginsConfigurationImage Galleries

Using Cloudflare workers to publish your scheduled 11ty posts

Learn how to schedule blog posts and other items to go live with your static site generator without having to rebuild the whole site. Get all the benefits of a dynamic CSS with static files

Categories: How to...Deployment

How to add Netlify CMS to an existing Eleventy project

I started coding again recently and I've been working on some personal projects in Eleventy. I alrea... Tagged with netlifycms, eleventy, jamstack, beginners.

Categories: CMSHow to...Netlify

Syndicating blog posts from an 11ty site to Dev.to using RSS

How I syndicate the blog posts from my website to Dev.to by providing an RSS feed for my journal page.

Categories: How to...RSS

Using SASS With Eleventy

Eleventy (11ty) is a super customisable static site generator that at its core transforms template language into HTML. However, template languages li…

Categories: CSS/SassHow to...

Quick Tips for Eleventy and Vercel

A quick tip for folks using Eleventy and Vercel together.

Categories: DeploymentHow to...Debugging

11ty Date Shortcodes and Filters

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

Categories: DatesHow to...FiltersShortcodes

Adding a favicon in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Categories: How to...

Using the Eleventy image plugin to generate images

In the changelog I'm documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work.

Categories: ImagesHow to...

Tailwind-to-head with Eleventy

This follow-up to an earlier article about Hugo Pipes shows how to get internal CSS in an Eleventy site — and with no build tools required.

Categories: CSS/SassHow to...

Collection archive in Eleventy

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Categories: How to...Collections

Using PDFs with the Jamstack - Now with Thumbnails

Combing Adobe PDF APIs with Eleventy to create PDF Thumbnails

Categories: How to...Remote DataPagination

Adding Simple Pagination to an 11ty Collection

11ty can handle pagination really well, but finding the right subset of the many pagination features can be a little difficult to figure out. Here's how I added simple previous and next links and post totals to the list pages on this blog.

Categories: PaginationHow to...Collections

I like to be able to link directly to a section in a long content. I wish every site provided anchor links associated to headings, even if Text Fragments might be a cross browser thing sometimes in the future. Here's how I made the anchor links of my Eleventy based site accessible.

Categories: MarkdownHow to...Accessibility

Using PDFs with the Jamstack

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

Categories: How to...Global DataPagination

11ty and Rollup - a take on current build pipelines

I love rollup and I love 11ty (eleventy), but mixing the two seems to be a little hard - at least when looking at the starter projects presented on 11ty's website. Here's my take on it.

Categories: How to...

Integrating Navigation Search with Lunr and Eleventy

How to use navigation search forms and Lunr

Categories: SearchNavigationHow to...

Create an Eleventy podcast feed

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

Categories: FiltersBloggingHow to...Configuration

Group posts by year in Eleventy

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

Categories: DatesHow to...Collections

Eleventy plugin for generating social images (using SVG)

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

Categories: PluginsHow to...

Grouping blog posts by year in Eleventy

Create an archive page grouped by year (or anything you want!) using 11ty's built in pagination and a modified collection.

Categories: PaginationDatesHow to...Blogging

Eleventy plugin for efficient CodePen embeds

Embed CodePen.io Pens into your 11ty website by using a ShortCode. It directly embeds an iFrame for efficiency (without loading CodePen's Javascript).

Categories: How to...Plugins

Configure markdown footnotes in eleventy

Eleventy (11ty) Tutorial

Categories: How to...MarkdownConfiguration

Let's Learn Eleventy (11ty) - Images

In the fourth part of the Let't Learn Eleventy series, we'll learn how use images with eleventy-img plugin

Categories: ImagesHow to...

Using Pre-Built Lunr Indexes with Eleventy

Switching to Pre-Built Lunr indexes with Eleventy sites

Categories: SearchHow to...Configuration

Add YouTube playlists to your Eleventy site

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

Categories: YouTubeHow to...

Accessing Eleventy Data on the Client Side

Accessing Eleventy data files in your JavaScript code

Categories: Global DataRemote DataHow to...Front Matter

3 Ways to Render Server-Side Components with Eleventy

While Eleventy doesn't appear to be built for today's component-driven landscape, here are three approaches we can take to get closer.

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 protocol, search and favicons.

Categories: Social MediaImagesHow to...

Accessible amojis with 11ty

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

Categories: AccessibilityHow to...

Give your Eleventy Site Superpowers with Environment Variables

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

Categories: ConfigurationHow to...

RSS, a love letter and walkthrough for my Eleventy site

Power Platform Developer and all around cool guy

Categories: How to...PluginsLayoutsRSS

Maximally optimizing image loading for the web

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...

Categories: ImagesHow to...

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: ImagesHow to...Plugins

Add structured data annotations to Eleventy blog

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

Categories: How to...Data CascadeBlogging

Using Airtable with Eleventy

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

Categories: Remote DataHow to...Global Data

Generating Social Sharing Images In Eleventy

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

Categories: Social MediaImagesHow to...

Understanding Filters, Shortcodes and Data in 11ty

Sometimes it’s a little confusing what the difference between shortcodes, data and filters really is, and frankly the boundaries can become a little blurred with 11ty.

Categories: Data CascadeHow to...FiltersShortcodes

Adding Google Calendar to Your Jamstack - with Pipedream

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

Categories: Remote DataHow to...

Footnotes in 11ty

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

Categories: How to...

Composing data in Eleventy

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

Categories: Front MatterData CascadeHow to...

Using a folder other than posts/ with Eleventy

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

Categories: ConfigurationHow to...

Compile Sass With Eleventy

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

Categories: CSS/SassHow to...

Asset Pipelines in Eleventy

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

Categories: How to...CSS/SassAsset Pipelines

Using PostCSS for cache-busting in Eleventy

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

Categories: CSS/SassHow to...

Adding a Warning for Old Posts to Your Jamstack Site

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

Categories: How to...Filters

Selecting Random Posts in Eleventy

A look at adding links to random pages in Eleventy

Categories: How to...FiltersConfiguration

Responsive Images with Eleventy & Sharp

High school student and open source developer.

Categories: ImagesHow to...

Creating a Sitemap file with Eleventy

This is a quick tip showing how I created a sitemap.xml file using Eleventy that will automatically update itself when you create new pages

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

Categories: How to...Shortcodes

Tips for debugging in 11ty

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

Categories: DebuggingHow to...

Setting up Homebrew, NPM and Eleventy on a fresh mac

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

Categories: ConfigurationHow to...

Tracking Posts by Week in Eleventy

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

Categories: How to...Dates

Manually splitting CSS files in Eleventy

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

Categories: CSS/SassHow 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 _redirects file to Eleventy projects deployed with Netlify.

Categories: NetlifyHow to...

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 automatically using post data, Cloudinary API & Eleventy

Categories: Social MediaImagesHow to...

Add a generator meta tag to your Eleventy website

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

Categories: How to...Configuration

Generate CSV Files from Data with 11ty

Eleventy is one heck of a powerful, incredibly flexible static site generator. This short guide will show you how you can generate CSV data files using Eleventy.

Categories: How to...

Hooking Up FaunaDB to Eleventy

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

Categories: Remote DataHow to...Pagination

Eleventy: RSS Feeds and Front Matter Data

Getting front matter data into my Nunjucks RSS feed templates.

Categories: Front MatterHow to...RSS

Supporting Multiple Authors in an Eleventy Blog

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

Categories: Front MatterHow to...FiltersPagination

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 many considerations are needed to start accepting user

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 develop a website. It's hard to beat a static site generator

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: Migrating to EleventyServerlessHow to...Remote Data

Hiding Future Content with Eleventy

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

Categories: How to...Front MatterFiltersCollections

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 into a conundrum: How do you show Liquid or Nunjucks template code in your code blocks.

Categories: How to...Blogging

How to generate ID attributes in headings using Eleventy

Eleventy doesn't generate heading IDs by default, here's how to do it.

Categories: How to...Markdown

Adding Algolia Search to Eleventy and Netlify

How I added Algolia Search to an Eleventy Site

Categories: SearchHow to...

Adding Algolia Search to Eleventy and Netlify - Part Two

An update to my post on using Algolia with Eleventy

Categories: SearchHow to...

Building and maintaining components from utility classes in Eleventy

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

Categories: How to...CSS/Sass

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 11ty's documentation. He was going to create a performance leaderboard to showcase performant projects using the tool. I wanted my site to break into the top 100!

Categories: How to...CSS/Sass

Testing my Eleventy-website with Cypress and Netlify

Last time I wrote "this page is a repository consisting of some thrown-together and latenight-written code". Some tests should ensure that I don't break to much when I'm, cleaning up the code. Here's how I created a basic setup that runs my tests before every deployment.

Categories: How to...DeploymentNetlify

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 index.html... Tagged with eleventy, help.

Categories: How to...Collections

Integrating Netlify Analytics and Eleventy

How to use Netlify's Analytics API in Eleventy

Categories: How to...Remote Data

Logging with Eleventy and Nunjucks

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

Categories: DebuggingHow to...

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

In this tutorial, we'll set up a simple navigation, identify what page navigation item we need to activate based on URL parts and add an active class to that element with no need of an if tag

Categories: How to...

Building a Static API with Eleventy

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

Categories: How to...

Ignore _site Build Directory in Eleventy

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

Categories: How to...

How to Include PrismJS CSS Only When Required In Eleventy

How I set up Eleventy to avoid including unnecessary CSS.

Categories: CSS/SassHow to...

Webmentions in three SSGs: Part 1

The intro to a five-part series about incorporating webmentions into three different static site generators (SSGs).

Categories: How to...Webmentions

Embed Everything

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

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 our use of Eleventy and Web Components.

Categories: How to...

Quick Tip on Using Vue with Eleventy

Avoid issues with Vue code being confused for Liquid

Categories: How to...

Creating a similar post component with Eleventy

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

Categories: How to...

Creating an Editable Site with Google Sheets and Eleventy

Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into

Categories: How to...Remote Data

The Emergency Website Kit

In cases of emergency, many organizations need a quick way to publish critical information. But existing (CMS) websites are often unable to handle sudden spikes in traffic.

Categories: How to...Why Eleventy?

How my site is built with Eleventy + Ghost

This website is run with Eleventy, using Markdown and Ghost CMS for blog posts. I've iterated in a couple of ways to build the CMS integration.

Categories: CMSHow to...

Twitter Cards with Nunjucks and 11ty

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

Categories: Nunjucks/MacrosSocial MediaHow to...

Add pagination for dynamic data in Eleventy

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

Categories: PaginationHow to...

Adding Another Template Language to Eleventy

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

Categories: ConfigurationHow to...

Adding Text Linting to Eleventy

An example of using Eleventy's Linter feature

Categories: How to...Plugins

Checking (and Upgrading) Template Engines in Eleventy

How to check the version of embedded template engines in Eleventy

Categories: How to...ConfigurationFilters

Adding a Last Edited Field to Eleventy

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

Categories: How to...CollectionsConfigurationDates

Eleventail - A helper for Taiwindcss

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

Categories: How to...CSS/Sass

Code comfort: Eleventy and webpack

Some words about my Eleventy/webpack configuration.

Categories: How to...Configuration

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

Hello. I am Ken Hawkins. Builder of websites, project planner, newspaper nerd, information architect, lover of UX, consultant. Information structure is my thing.

Categories: How to...

Integrating Eleventy with gulp, upstream JS

Hello. I am Ken Hawkins. Builder of websites, project planner, newspaper nerd, information architect, lover of UX, consultant. Information structure is my thing.

Categories: How to...

Eleventy and Craft

My name is Vince. I make things on the web.

Categories: CMSHow to...Migrating to Eleventy

Language switcher for multilingual JAMstack sites

Following my blogpost on multilingual websites with Eleventy, I had several questions about how to build a language switcher. Here is the approach I generally use.

Categories: InternationalizationHow to...

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 way to slim down a particularly heavy web page.

Categories: ImagesHow to...

Creating an 11ty Plugin - SVG Embed Tool

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

Categories: PluginsHow to...

Scheduled and draft 11ty posts

This post explains how you can add scheduled publishing to your 11ty blog (with a bonus for drafts). Before I jump in though, 11ty is a surprisingly simple sys…

Categories: CollectionsFiltersHow to...DraftsScheduling

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 Google and convert it for use with a static site generator (SSG). We'll be using my personal favorite SSG 11ty (EleventyJS).

Categories: How to...YouTube

Multilingual sites with Eleventy

Eleventy might not have multilingual and localisation capabilities out of the box, but you can build a pretty good setup using global data files, collections and Nunjucks as a templating language.

Categories: ImagesHow to...

Using Webmentions in Eleventy

How to pull interactions from social media platforms like Twitter back to your own site, using Webmentions, webmention.io and Bridgy.

Categories: How to...Webmentions

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 total of 50 pages added to it over 5 years. Not much content and not much complexity. I deba...

Categories: DeploymentHow to...

Adding search to a Jamstack site

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

Categories: How to...Search

Get the blog by email (or RSS)

Powered by Buttondown