Eleventy (aka "11ty") is the great Node.js based Static Site Generator I use to build this site.
There are 79 contents with this tag:
My photography site is now built with #Eleventy v3, all JavaScript code is migrated to #ESM, and common features I use in all my Eleventy project are now provided by the #Pack11ty plugin.
Doesn't “3,632 additions and 23,478 deletions” sound like a big improvement?
Much less specific code to maintain in the future! 🥳
Looks like I finaly managed to migrate #Pack11ty, my plugin and template/starter for #Eleventy to v3! 🥳
Including replacing all CJS with #ESM, the most difficult part.
Preview: https://11ty3--pack11ty.netlify.app/
Code in branches 11ty3:
I will now improve the docs, before releasing stable versions.
I have to admit that I'm often sad when I read “Font Awesome” in the code of projects I'm auditing for performance. A fairly heavy font is often loaded to display a few icons, whereas we've known for a long time that SVG is generally more suitable.
But the arrival of Web Awesome, and my enduring admiration for @zachleat@zachleat.com and @leaverou@front-end.social (and their creations) means that their arrival at Font Awesome may well change my epidermal reaction to the name.
Bravo!
I'm now using #Eleventy's screenshot service for my links content, thanks a lot @zachleat@zachleat.com!
But…
…it looks like many screenshots fail, so I get the default image — Eleventy's logo —, as you can see in my #Cloudinary Library… 😅
I don’t want to suggest that my experience was bumpy, mind you — far from it! Overall, I am delighted by how easy it was to move a decade’s worth…
About https://techhub.social/@cloudcannon/112604279395366912
Alex […] shares how using CloudCannon for client sites boosts performance and efficiency 🚀
I love #CloudCannon's efficiency. 👍
But with an SSG, #WebPerf depends on the way you build pages. Good SSGs — as #Eleventy — don't force anything so performance is really just the result of developer's work.
The CMS should have no impact. 🤷♂️
Having fun building several similar sites with #Eleventy, editing content with #CloudCannon, assembling pages with Bookshop components shared from a common repository/site with Site Mounting.
This is really awesome! 😍
Tag pages on my photographie site can now be
sorted by dates and popularity, just like galleries.
For example, here are the "night" photos sorted by popularity:
https://nicolas-hoizey.photo/tags/night/by-popularity/
This is all static HTML generated with #Eleventy, no need for any JavaScript here.
I added new ways to browse my photography website built with #Eleventy.
There were already galleries, like the list of countries I visited in Europe for example: https://nicolas-hoizey.photo/galleries/travels/europe/
Now, you can also see all photos from Europe at once, with 3 different sorting orders:
Enjoy!
Netlify’s Disingenuous Survey-based Attack on Next.js (and Eleventy, too)
Reading the report, it’s clear that Netlify has a vested interest in elevating Astro because Astro is best poised to dethrone Next.js. If Astro wins,…
I created a new page in my photography site to show some statistics about the settings used to shoot the photos I share there: apertures, focal lengths, ISOs, shutter speeds.
https://nicolas-hoizey.photo/statistics/
Do you think any other statistics could be interesting?
This is of course using #Eleventy 's collections and filters, based on photo data stored in Markdown files.
Building a photography website
Last year, I started a photography hobby. Soon after, I've created a place where I can share some of my work, without any attention-driven algorithms…
This is so great that #CloudCannon is now sponsoring #Eleventy, and hiring @zachleat@zachleat.com as a Developer Advocate! 🥳
https://cloudcannon.com/blog/cloudcannon-the-official-cms-partner-of-eleventy/
Oh… you need to quickly start a new #Eleventy project on your computer?
Asuming you already have npm installed, here's how to use my Pack11ty starter/plugin:
Ethan Marcotte
Zach Leatherman
Darek Kay
npm create pack11ty@latest your-project-nameEasy enough? 😁
Details on https://pack11ty.dev with other solutions for Netlify, Vercel, StackBlitz, etc.
If someone is creating service workers with #Workbox recipes and injectManifest, a build with #esbuild, and doesn't have any issues, I'm interested! 😅
I have a very strange issue:
https://github.com/GoogleChrome/workbox/issues/3207
Bonus points if this is with #Eleventy
Some things I wish people mentioned when writing about #Eleventy usage, moreover concerning assets bundling (Sass, JavaScript, etc.):
This is really important for sites with many contents/pages, build speed, and site performance.
How I built my own excerpt for Markdown content in Eleventy
I was not really happy with Eleventy's native excerpt solution requiring just a separator and having the excerpt content preserved in the content, without any way to style it differently. So I tried different alternatives, and settled on a solution with some Markdown-it plugins and a bunch of regexes.
I've read the whole documentation for #Eleventy's WebC components: https://www.11ty.dev/docs/languages/webc/
Time to experiment, I guess!
In other news:
My #Eleventy starter project is now using Eleventy 2.0! 🥳
And my Eleventy plugin for responsive images based on standard Markdown syntax and usage of an image CDN/service is now compatible with Eleventy 2.0:
https://nhoizey.github.io/images-responsiver/eleventy-plugin-images-responsiver/
A bookmarklet to create a new link content Markdown on GitHub
When I was building my site on my local computer, I had a shell script to initialize a new Markdown file for sharing a link. When I moved to Cloudflare Pages 6 months ago, it opened a new opportunity to share links more easily in my Eleventy content, directly from the page I wanted to share. Bookmarklets are still an awesome invention!
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.
The Top Five Static Site Generators for 2023 (and when to use them!)
Eleventy is a great choice for developers who value simplicity, flexibility, and customizability, and who want an SSG with fast build times and a…
If you use #Eleventy and know how to add fetchpriority="high" on your Largest Contenful Paint image, I made a plugin that adds a <link rel="preload"…> for it, even it it's responsive: https://github.com/nhoizey/eleventy-plugin-auto-preload
Feedback welcome! 🙏
There are now pages on my photography site about the cameras and lenses I used to shoot the photos you can see:
https://nicolas-hoizey.photo/gear/
Data are extracted from the photos' EXIF, and pages are still generated with #Eleventy! 😍
TIL in #Eleventy inputPath gives the path to the source content, not to the template generating the page, when we use pagination… Where can I guet the template path? 🤔
Building a design system with Eleventy
Trys shows here some of the power of Eleventy, the best static site generator, to generate a Design System with components. Eleventy was the obvious…
After several years using #Eleventy, I still struggle with dates and timezones… 😅
Being in UTC+02:00, I don't want content written one day at 1am to be "seen" as published the day before at 11pm:
https://github.com/11ty/eleventy/issues/573#issuecomment-1031617462
Vanilla JavaScript and old-school SSGs are the best choices for web performance
True. That's why I love #Eleventy so much!
Trailing Slashes on URLs: Contentious or Settled?
I have mixed feelings about URLs without an extension (.html for example) or a trailing slash. It certainly comes mostly from 25 years of unexpected…
URLs, a poll:
(there is a right answer)
This is an important question for #Eleventy users, because you can't have both /about.md and /about/index.md with Eleventy default behavior.
In #Pack11ty, a single setting is enough to decide: https://pack11ty.dev/documentation/collections/#permalinks
📢 The 3rd Edition of EVERY LAYOUT is now available!
We were blown away reading all the kind words you gave us for testimonials; have some logical properties as a thank you!
every-layout.devN
Don't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts!
The layout of my #Eleventy project https://pack11ty.dev/ uses it to get a responsive layout without any media query.
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved srcset and sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
Keeping track of what happens in my mentions is easy with @mxbck's amazing project Webmention Analytics, built with webmention.io and #Eleventy.
And it's public: https://nho-webmention.netlify.app/
Jérôme Coupé
Jérôme tells us how he structures his Eleventy projects. Appart from the content folder, this is almost exactly how I do myself, including in Pack11ty,…
Working on my photography site, I wanted to show a few photos from folder in a gallery, and built something cool with just CSS.
But is it really cool, or just cool once and then annoying?
Try it live on desktop: nicolas-hoizey.photo/travels/europe/
youtu.be/VmwJ4KInloQ
I finally decided the effect on hover was too invasive and difficult to tweak, so I changed for a much more traditional way to show multiple images of a folder: a diaporama with a Ken Burns effect.
eleventy-plugin-images-responsiver, my #Eleventy plugin for responsive images, is now available in a much faster v1.9.0! 🏎
My own site build is for example 30 % faster. 😍
I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. 😅
Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?
Accessible anchor links with Markdown-it and Eleventy
I like to be able to link directly to a section in a long content. I wish every site provided anchor 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.
Carolina Gilabert
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should…
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
Own your short URLs!
Easy with #Eleventy and #Netlify (for example):
https://github.com/nhoizey/1y#readme
@addyosmani Bitly sets cookies and shares user data with third parties. Please consider stopping unnecessarily using URL shorteners.
Whoops, there's a warning gatsby in the logs of @jlengstorf's Let’s Learn Eleventy! video with @zachleat… 😅
Today is the first anniversary of this site being built with #Eleventy, and it's been an amazing year! 🥳
(At least on this topic, you know what I mean…)
Mike Riethmuller
Understanding Filters, Shortcodes and Data in 11ty
I've been using Eleventy for 2 years now (already! 😮), and I thought Mike's post would be a nice one to send to beginners, but I actually learned…
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
Nicolas Goutay
Towards a Lightweight Jamstack
Not having to use a JavaScript framework also meant that HTML, not JSX or Vue components, is now front and center in the code you write. This helped…
Enhancing archives navigation, step 2
In my previous article Enhancing archives navigation, step 1, I promised further archives navigation enhancements. Here they are!
Enhancing archives navigation, step 1
I decided years ago to remove paged navigation (aka "pagination"), because I find it not user friendly at all, and a nightmare for SEO with new content pushing one tenth of contents to another page (for a 10 items per page pagination). Now, I improved the UX even further.
I may have created a new plugin for #Eleventy… 😅
If you use Nunjucks layouts and want an easy way to build internal links between your contents, this might help you:
https://github.com/nhoizey/eleventy-plugin-link_to#readme
Browsing #Eleventy docs to see data available in a page and in a collection item. title vs item.data.title…
Wish it was the same, for simpler Nunjucks macros with a single item object with the same attributes.
Each step of eleventy-plugin-images-responsiver tutorial is both a README and a small Eleventy site with the plugin and progressively improving configuration and usage… 😎
I'm already using #Jest to test images-responsiver, my #Node package for easier responsive images, but I wonder how to use it to test my plugin wrapping it for #Eleventy… 🤔
I'm quite happy with this nice and simple collection of complementary tools that help me maintain my pet projects on #GitHub:
https://nhoizey.github.io/images-responsiver/#tools-and-automations
⚠️ People using my #Eleventy plugin for responsive images should be aware that its Git(Hub) repository has moved into the new images-responsiver monorepo.
There's nothing to do if it has been installed from npm, though.
Should I use a monorepo for images-responsiver and eleventy-plugin-images-responsiver, the #Eleventy plugin? 🤔
Might be better to manage dependencies and sync releases, and easier for users to find/add issues.
YouTube and Vimeo videos are now embedded thanks to @gfscott's great #Eleventy Embed Everything plugin.
YouTube videos are light and without trackers thanks to @paul_irish's lite-youtube-embed.
Use Speedlify to Continuously Measure Site Performance
If you don't have any budget for Dareboost (or competitors) yet, Speedlify can help you monitor your site's performance for free, and build your performance…
Using speedlify with #Netlify is great, because enhancing the sites performance will reduce the build times, therefore the monthly cost… 😁
This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍
New project: Speedlify 🐇
A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.
Demo:speedlify.netlify.app/ssg/c
Blog post:www.zachleat.com/web/speedlify/L
It took me just a few minutes to built my dashboard for multiple sites:
https://webperf-monitoring.netlify.app/
I use #Eleventy transforms for multiple use cases, but they can only be run on the almost final HTML.
How would you run other transforms on the source #Markdown, before Markdown-it?
How could it be done in en Eleventy plugin?
Tracking my #Eleventy based web sites in #Dareboost to make sure my performance and accessibility results stay good for the leaderboards… 😅
My Dareboost monitoring dashboard for Eleventy based sites
Pack11ty, my #Eleventy template project, now uses some of #EveryLayout layouts and starts looking much better!
I guess #CSSNakedDay is the best day to launch my own heavily opinionated #Eleventy template project, for which I didn't write any CSS yet… 😅
Here is Pack11ty, hosted on #Netlify!
Trying to write documentation for my #Eleventy plugin as runable examples… not so easy, but I think it's worth the effort!
https://github.com/nhoizey/eleventy-plugin-images-responsiver/tree/master/docs/examples
I guess (without proof) #Eleventy builds including assets bundling/minifying could be accelerated with memoization.
Did this for the slugify filter (I use @sindresorhus's one instead of the default) called multiple times with the same string:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/src/_utils/slugify.js
images-responsiveris a simple solution for most responsive images needs
Is it catchy enough? 😁
Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/
If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver
Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.
People using #Eleventy and #Webmention, when and how do you send mentions from your content to remote sites?
Bryan L. Robinson
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look…
My #Eleventy build time is now down to 37 seconds on average! 💪
A few external data fetches, 1087 HTML pages generated, 1608 simple images <img src…> automatically transformed into responsive <img srcset… sizes…>…
Eleventy’s New Performance Leaderboard
Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly…
You should remember I told you nho.link is built with #Eleventy.
So why do #Netlify Analytics tell me the most visited URL is https://nho.link/wp-login.php ? 🤷♂️
Now that I use #Rollup to generate my Service Worker with #Workbox in #Eleventy, I guess I should try to remove #Webpack from #JavaScript assets bundling… 😅
You might have noticed that these notes are #POSSE on social networks with a link to a shorter domain. 🤔
https://nho.link/ is my short URL domain, hosting only redirects. It is also powered by #Eleventy! 💪
Use the "1y" template to create your own: https://github.com/nhoizey/1y
Hashtags written in Markdown content of such notes are automatically transformed into tag links in the site with some #Eleventy magic (I'll explain later), but are not yet "true" tags.
Waiting for an issue to be resolved (if possible): https://github.com/11ty/eleventy/issues/971
Migration from #Jekyll to #Eleventy now complete, and even more! 💪
See all tags.
David Large
CloudCannon
Trys Mudford
Chris Ferdinandi
Mark Llobrera
