This is so great that #CloudCannon is now sponsoring #Eleventy, and hiring @[email protected] as a Developer Advocate! 🥳
https://cloudcannon.com/blog/cloudcannon-the-official-cms-partner-of-eleventy/
Contents tagged “Eleventy”
Eleventy (aka "11ty") is the great Node.js based Static Site Generator I use to build this site.
There are 67 contents with this tag:
-
-
Oh… you need to quickly start a new #Eleventy project on your computer?
Asuming you already have
npminstalled, here's how to use my Pack11ty starter/plugin: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.):
- Does it run only once per asset, or once per template where the asset is used?
- Does it run before or after HTML is generated?
- Does it manage hashes for cache busting?
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-preloadFeedback 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
inputPathgives 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 -
Chris Ferdinandi
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 (
.htmlfor 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.mdand/about/index.mdwith 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.devNDon'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
srcsetandsizesattributes 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
contentfolder, 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/VmwJ4KInloQI 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…
-
Mark Llobrera
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 gatsbyin 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.
titlevsitem.data.title…Wish it was the same, for simpler Nunjucks macros with a single
itemobject with the same attributes. -
Each step of
eleventy-plugin-images-responsivertutorial 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/LIt 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 needsIs 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.linkis 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! 💪
David Large
CloudCannon
Trys Mudford
Zach Leatherman
See all tags.