░█▀▀░█░░░█▀▀░█░█░█▀▀░█▀█░▀█▀░█░█░░░█░█░█░█░█▀▄ ░█▀▀░█░░░█▀▀░▀▄▀░█▀▀░█░█░░█░░░█░░░░█▀█░█░█░█▀▄ ░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░░▀░░░▀░░░░▀░▀░▀▀▀░▀▀░rss feed
Join us for two great talks about the Eleventy community and caching data with Eleventy Fetch.Add event to calendarApple • Google • Office 365 • Outlook Web • Outlook • Yahoo
No content.
This month we have two presentations that promote joining the Indie Web by adding your social content to your 11ty site plus adding webmentions to like and comment across the web!
No content.
In this months episode, we're joined by Jadon Naas to show us how to create static JSON API's with Eleventy!
We're back from a loonnnggg summer break and excited to have Zach tell us all about WebC! Don't miss this exciting episode about this new 11ty feature!
Tune in to hear Zach's "State of Eleventy" and learn what's new and changed for Eleventy v2! We're also pleased to welcome new speaker Lene Saile to explore considerations for organizing the config file.
In The Need for Speed: Why Eleventy Leaves Bundlers Behind, we discussed the stability of Eleventy. “Stability is kind of a hard thing to sell, but our track record of being a five or six-year-old project now and really delivering value to folks over those five or six years speaks for itself,” he added. And Eleventy is stable. At time of writing, we’ve shipped 56 releases dating back December 2017 and only two of those releases have had Eleventy-specific breaking changes. Eric Bailey touched on his experience with Eleventy on the a11yproject.com project. a11yproject.com launched with version 1.0.0 of Eleventy. […] It's been a little under three years and I haven't had to make any adjustments to its dependencies, and it can still install and run from a cold start with no complications. W...
Eleventy v2.0.1 is now available! You can try it out in your project now: npm install @11ty/eleventy@latest Read more about project versus global installation. New to Eleventy? Eleventy is a flexible and production-ready site generator known for its zero-client JavaScript footprint, speedy sites, speedy builds, and full control over the output. Build a blog from scratch in 6 minutes with Eleventy Watch The State of Eleventy in Two Minutes Read more about Eleventy’s project goals. Features and Fixes Fixed: this.eleventy in JavaScript template functions #2790 Fixed: lodash security audits #2877 Fixed: pagination targets with object bracket notation #2851 Fixed: 11ty.js templates were too aggressively cached on watch/serve #2839 #2838 Fixed: Handlebars partials were too aggressively cach...
No content.
No content.
No content.
Eleventy is a static site generator built for speed, and the reason it can deliver is that it leaves a bundler behind, said Eleventy creator Zach Leatherman, in an interview with The New Stack. “Stability is kind of a hard thing to sell, but our track record of being a five or six-year-old project now and really delivering value to folks over those five or six years speaks for itself,” he added. Read more on The New Stack
The Eleventy v2 release improved incremental builds in several ways. However, a standing issue had been that when you display content from a collection and run an incremental build, that content wouldn't be updated in-sync. You would have to stop an restart your build, or opt back out of incremental local dev. An additional method was added in v2 to resolve this behavior, and allow you to define which collections can re-build an associated template. Using eleventyImport # The eleventyImport object can be added via front matter with one child parameter of collections that has an array value. The array should contain the names of any collections you process content from on the page. The docs for this feature give a post collection as the example: ---eleventyImport: collections: ["post"]---&...
No content.
No content.
On February 13, 2023 Eleventy passed five million lifetime downloads! (This number is limited to Eleventy core and doesn’t count our ecosystem of utilities and plugins.) Play Video Watch on YouTube (and on our YouTube channel too) Thank you for the support!! Previous arbitrary milestones Jump to heading # Four Million npm Downloads! Three Million npm Downloads! Two Million npm Downloads! Twitter: One Million npm Downloads!
To easily process CSS with Sass and/or LightningCSS, simply grab these plugins: Sass and LightningCSS LightningCSS only I've written a comparison of using Sass vs only LightningCSS if you're unsure which method you'd like to use. If you want to learn how they work or how to more manually include these in your Eleventy build, read on! Custom Template Languages in Eleventy # A powerful feature added in the Eleventy v1 release was the ability to add custom template extensions and template formats. Additionally, you can include a custom compile function. This opens the possibility to extend processing during build to tools like Sass, or run additional processing against already recognized types like JavaScript such as to minify. Or, as the docs show, you can even invent a file type in orde...
Enforce a typed frontmatter schema for templates within an Eleventy collection. Define a unique schema per collection, then receive output during development and builds to note incorrectly typed, missing, invalid, or misplaced custom data keys. Docs for Collection Schemas
A standout feature of Eleventy is the data cascade. This is the priority order of how global data, front matter data, and other data sources are computed for a given template. Additionally, Eleventy allows the creation of collections of data. Often the reason for a collection is that the content has shared traits. Let's consider a collection of blog posts, where your layout assumes availability of the following bits of data: title description excerpt None of these are going to be enforced or type-checked by Eleventy. But perhaps its important to you to make title and description required keys. Or in the future, you add a draft key that you want to ensure is a boolean, or an order field that should be a number. Introducing: Collection Schemas # Collection Schemas is an Eleventy plugin th...
A few months back, someone put Eleventy on Product Hunt! so, I wasn’t involved in this at all but someone posted @eleven_ty on @ProductHunt yesterday and it was “#1 Product of the Day” neat? neat. is it neat? ok, I don’t really know—getting orange site vibes here 😅 Today, we’re back on Product Hunt for our 2.0 release and we’d love your support!
🚨 The full release notes are available on The Eleventy Blog: Eleventy v2.0.0 or you can watch me talk about v2.0 on YouTube. Eleventy v2.0.0 is now available! You can try it out now: # Local project npm install @11ty/eleventy@latest # Global install npm install @11ty/eleventy@latest -g Read more about local versus global installation. Watch a short video about 2.0 on YouTube. New to Eleventy? Eleventy is a flexible and production-ready site generator known for its zero-client JavaScript footprint, speedy sites, speedy builds, and full control over the output. Watch The State of Eleventy in Two Minutes or read more about Eleventy’s project goals. The Big Features Smaller, More Secure ✅ Dependencies decreased by 32.1%: 211 modules (311 in v1.0.2) ✅ node_modules file weight decreased by ...
Eleventy v2.0.0 is now available! You can try it out now: # Local projectnpm install @11ty/eleventy@latest# Global installnpm install @11ty/eleventy@latest -g Read more about local versus global installation. Watch a short video about 2.0 on YouTube. Are you new to Eleventy? Jump to heading # Eleventy is a flexible and production-ready site generator known for its zero-client-JavaScript footprint, speedy sites, speedy builds, and full control over the output. Watch The State of Eleventy in Two Minutes or read more about Eleventy’s project goals. The Big Features Jump to heading # Smaller, More Secure Jump to heading # ✅ Dependencies decreased by 32.1%: 211 modules (311 in v1.0.2) ✅ node_modules file weight decreased by 77.8% to 34.3 MB (was 155 MB in ...
Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support. Also respects either your package.json browserslist or a .browserslistrc, otherwise the default targets are > 0.2% and not dead. Requires Eleventy v2 beta or stable. Add Sass to 11ty
No content.
An Eleventy theme for offering premium content to members by using Edge-powered authentication. Requires Supabase and Netlify accounts. Review this article on the high-level membership theme concepts to learn how members-only content works. Get this theme
Spoiler: This is available as an Eleventy theme over on GitHub. Read on to explore key concepts about developing using Eleventy Edge. A new feature with Eleventy v2 (currently in beta) is Eleventy Edge. What is "the Edge?" Here's a super brief summary: Low-latency nodes geographically close to the user Faster processing of Edge functions vs. serverless Retrieve user-specific data, ex. timezone, cookies “Middleware” to intercept page requests before they are rendered Allow redirecting or modifying requested content These features allow us to enable authenticated routes for our 11ty site. And the opt-in Eleventy Edge plugin enables us to add and use Edge-generated data within otherwise static 11ty templates. Prerequisites # 11ty v2 beta+ (included in the membership theme) Ne...
Last week marked the first beta release of Eleventy’s new v2.0 version. This week we’ve spent a little time updating our eleventy-base-blog project to the latest version and added a few new features too. Try out the new eleventy-base-blog Starter Project Here’s what the base blog now offers out of the box: Using Eleventy v2.0 with the new Eleventy Dev Server and that same great zero-JavaScript taste. Can easily deploy to a subfolder without changing any content Performance focused: four-hundos Lighthouse score out of the box! 0 Cumulative Layout Shift and 0ms Total Blocking Time View the Lighthouse report for the latest demo build courtesy of the Netlify Lighthouse plugin. Notably, the demo site fails the build if the site goes below a perfect four-hundos threshold. Content-driven na...
Chris Coleman - “Using Eleventy filters in Directory Computed Data” - shows how a switch to using 11tydata.js instead of JSON for data directory files allows regular JS and therefore more complex logic to work out assigning values for computed data. Benny Powers - “SVG Icon Sprites in Eleventy” - uses a technique of creating a collection out of a directory of SVG icons and programmatically turning those into an SVG sprite, and a clever way to add the sprite only once per page where at least one of the associated shortcodes is used. Vadim Makeev - “CSS and JavaScript as first-class citizens in Eleventy” - shows how to use the v2 additions of addTemplateFormats and addExtension to process CSS and JS. David Darnes - “Compile JavasScript and Sass in Eleventy using Uglify JS and Sass lib” - is ...
Update: The Eleventy v2.0.0 stable release is now available! The very first Eleventy 2.0 Beta release is now available on the @beta channel and we’re looking for Beta testers! You can try it out now: # Local projectnpm install @11ty/eleventy@beta# Global installnpm install @11ty/eleventy@beta -g Read more about local versus global installation. Play Video Watch on YouTube Are you new to Eleventy? Jump to heading # Eleventy is a flexible and production-ready site generator known for its zero-client-JavaScript footprint, speedy sites, speedy builds, and full control over the output. Watch The State of Eleventy in Two Minutes or read more about Eleventy’s project goals. The Big Features Jump to heading # Smaller, More Secure Jump to heading # ✅ Dependenc...
2.0.0 canaries have been available for quite some time, and creator Zach Leatherman has helpfully been updating the docs by adding labels to note when a feature became available. The 2.0.0 release is available as of February 8, 2023, which includes the changes noted in this article. Recently, I set out to create a new Eleventy project for the first time in a few months using the latest Canary and hit some unexpected errors. That led me down the rabbit hole to see what exactly had changed so I could be prepared to update projects, especially as I use similar setups cross-project and maintain a few 11ty starters. This may not be 100% comprehensive, but it includes the most impactful highlights for general use of 11ty. If it’s been a while since you created or updated an Eleventy project, ...
Recently, I've encountered a peculiar issue with Eleventy. The development server stopped working: eleventy --serve ... [11ty] Wrote 92 files in 0.48 seconds (5.2ms each, v1.0.2) [11ty] Watching… There were no errors. Everything seemed fine, except for the dev server not being available. I've checked my other Eleventy projects, and all of them shared the same behavior. I've enabled the Eleventy debug log, but it didn't provide any further insights: cross-env DEBUG=* eleventy --serve I've decided to postpone further debugging, but I've accidentally left the Eleventy process running. At some point I've noticed the dev server was running again. Confused by this behavior, I've restarted the server. It turned out that the dev server was actually working, but it required several minutes to laun...
Check out the Jamstack Community Survey 2022 Jump to heading # Looks like our usage grew from 17% to 19% while keeping a solid 3.8 satisfaction score. Also notably: 11ty was the only purely static site generator (SSG) in our survey to show growth in usage share. For this reason we think 11ty is now the clear choice if a static site is your use case. As we mentioned already, if you’re building a static or nearly-static site, we continue to think 11ty is an excellent choice given its growth relative to other SSGs in the space. We really appreciate the support, everyone! Read more on the Netlify Blog: Top Takeaways from the Jamstack Community Survey 2022 Previously: Jump to heading # 2021 2020
Watch on YouTube Read a bunch more detail on zachleat.com.
Looks like Eleventy is listed on this year’s State of JavaScript Survey in the “Rendering Frameworks” section——it would be really lovely if our community were well represented in the data! Appreciate y’all!
If you haven’t yet heard of WebC, check out another 11ty Rocks article, Introduction to WebC. Including WebC components outside of .webc templates # One option for using WebC is to go all in and start defining your templates using the .webc extension. If you do that, you’ll also get access to any components you define due to already being within a WebC context. For myself, I want to use my WebC components within other templates that I already have. Typically, I favor Nunjucks and Markdown for my 11ty projects. One way to make WebC components available to other template types is by listing the path under the components option for the WebC plugin (aka “global no-import components”). The gotcha here is when you have also customized your 11ty input directory to something besides the default o...
WebC is a new tool by Zach Leatherman (creator of Eleventy) for serializing custom elements at build time. It aggregates component-level CSS and JavaScript, allowing developers to keep their styles and scripts together with the markup as single file components, the way you may be used to if you work with JavaScript frameworks such as Svelte or Vue. All without having to ship a single line of JavaScript to the client — unless you want it to. WebC in a nutshell # First and foremost: WebC components are just HTML. If you already know how to write HTML, CSS, and JavaScript, you are ready to start working with WebC. Let’s define our first component: a footer for our site. We’ll create a file called site-footer.webc and put in it the following HTML: <!-- site-footer.webc --><footer> <p...
On September 16, 2022 Eleventy passed four million lifetime downloads! (This number is limited to Eleventy core and doesn’t count our ecosystem of utilities and plugins.) We put up a nice celebratory video on Twitter. Play Video Watch on YouTube (and on our YouTube channel too) Thanks for the support, y’all! Previous arbitrary milestones Jump to heading # Three Million npm Downloads! Two Million npm Downloads! Twitter: One Million npm Downloads!
This month we're excited to have Nick Taylor show us how he does automatic syndication using Eleventy and Dev.to as a CMS. Also Ben Myers is back to show how they cloned Wordle using 11ty and edge functions!
Tune in to hear Zach's "State of Eleventy" and learn what's new and upcoming for 11ty! We'll also have an incredible panel fielding questions on their experience moving to 11ty from other environments.
On March 25, 2022 Eleventy passed three million lifetime downloads! We put up a nice celebratory video on Twitter. Play Video Watch on YouTube (and on our YouTube channel too) Thanks for the support, y’all!
I am very proud to introduce a brand new addition to Eleventy: Eleventy Edge. Eleventy Edge is an exciting new way to add dynamic content to your Eleventy templates. With a simple Eleventy shortcode you can opt-in a part of your Eleventy template to run on an Edge server, allowing your site to use dynamic, user-specific content! Eleventy Edge Plugin documentation Eleventy Edge Demos demo-eleventy-edge Source Code on GitHub A few ideas Jump to heading # Here are a few ideas of things you could do with the new Eleventy Edge plugin: Any user personalized content (User accounts, premium-only content, AB testing) Accessing/setting HTTP Headers (e.g. Cookies, Save-Data, Client Hints, etc) Handling Forms Using Geolocation information to localize content A zero-clientside JavaScript...
In this month's event, we're learning how to use eleventy to show content from RSS feeds from Raymond Camden, and we'll learn from Jérôme Coupé about structuring eleventy projects!
In this example, we exclude the "__docs" directory from a production build. Environment variables are injected as part of either the "start" or "build" command, with the cross-env package used to ensure compatibility with Mac or PC. Watch how this works, or continue reading and review the code snippets. Check out the design system project on GitHub. Step one: Include environment variables # When developing an Eleventy project, it's common to include a couple of commands in package.json to run Eleventy as a local server and then to do a production-ready build for a web host. Here's an example of a very basic set of scripts: // located in package.json"scripts": { "start": "npx @11ty/eleventy --serve", "build": "npx @11ty/eleventy"}, I recommend running npm ins...
David East will show us how async shortcodes work and Sia will preview how all the pieces would fit together for a serverless e-commerce site.
🎥 Eleventy has a new YouTube channel! We’ll be sharing updates and community content over there. Like/dislike/subscribe/unsubscribe at your leisure!
And now a special message via YouTube and Twitter. Play Video Watch on YouTube Read more on the Netlify Blog: Doubling down on the ecosystem: open source and integrations Watch on YouTube More discussion on Twitter Transcript: Jump to heading # If you're seeing this video, it is Monday, February 14—Yep. Which means that I am now very excited to announce that effective today, Netlify will be sponsoring full-time development of Eleventy! Eleventy started with the very basic idea that the tools we use to make websites should be simpler for both beginners and experts, and we are still working very hard to continue to deliver on that mission today. This announcement is such huge news for our project in multiple ways: the project's longevity, sustainability, delivery of features,...
For December, we have Bryan Robinson showing us how to use 11ty Serverless for search functionality and Ben Myers diving deep into the Data Cascade.
This month we have Knut Melvær building previews with 11ty serverless and integrating with Sanity Studio, and Thomas Michael Semmler walking through the "Basic Pattern Repository".
Full docs for v1.0.0 on our web site This project would not be possible without our lovely community. Thank you to everyone that built something with Eleventy (×476 authors on our web site!), wrote a blog post about Eleventy, contributed code to core or plugins, documentation, asked questions, answered questions, braved The Leaderboards, participated on Discord, filed issues, attended (or organized!) a meetup, said a kind word on Twitter ❤️. I really wish I had time to list everyone, but I do want to mention a few folks that have made tremendous contributions: 🏆 A super special thanks to Peter DeHaan and Binyamin Green for their tireless contributions on the Eleventy Issue tracker. All of our supporters on Open Collective ❤️ Gold Sponsors: Sanity.io, Nordhealth, Screen recorder for Mac...
What Are Collections? # Collections are groups of template* content. One template can belong to multiple collections. These collections allow you to sort, filter, and perform other manipulations to customize the display of your template data. Learning all the ways to create collections provides you architectural freedom in creating your Eleventy site! * In 11ty terms, a template is any content file to be processed or rendered by 11ty. If you create a new Markdown file, you have created a new Markdown template, etc. Creating Collections # Collections are most often created from tags, but can also be groups based on other features like file type or front matter data. They can even be created from local data. Collections From tags # The simplest way to create a collection is with tags, an...
The Eleventy Mascot is becoming a series! Our project has continued with its pseudo-regular refresh of the famed possum on a balloon and the latest in the series is from acclaimed designer, illustrator, and author Geri Coady! I really like this iteration and the unique style Geri brought to the project—especially the addition of two littles, which to me is a lovely nod to how our community has grown! @hellogeri on Twitter Geri Draws Japan @hellogeri on Dribbble Color Accessibility Workflows Geri Coady is a color-obsessed Canadian illustrator and designer living in Nottingham, UK. A former ad agency art director, she has worked with companies including Simply Accessible, Nokia Withings, Scholastic, and A List Apart, as well as numerous magazines including Courier and Standart. She is the...
Watch on YouTube Read a bunch more detail on zachleat.com. Play Video Watch on YouTube
RSVP for this special Jamstack Toronto event in partnership with 11ty: The 11ties: 11 Minute Talks about 11ty on 11/11
We are super excited to let y’all know that two projects in the Eleventy community have won Jamstack Conf 2021 Jammies Awards! On the Netlify blog: Jammies Award Winners 2021 The A11Y Project wins the Social Impact Award Jump to heading # On the A11Y Project Blog: The A11Y Project receives a Jammy Congratulations to Carie Fisher, Dennis Gaebel Jr., Eric Bailey, Jen Downs, Jerry Jones, Saptak Sengupta, Scott Vinkle, Tatiana Mac, and Wayne Elgin for The A11Y Project! We're humbled to receive this award. Thank you to our contributors and maintainers, the @jamstackconf team and attendees, and to @zachleat and @eleven_ty for making this all possible! https://www.a11yproject.com/announcements/jammies-social-impact-award/ https://twitter.com/jamstackconf/status/1445830291709251593...
It is my absolute honor to announce that the very first Eleventy 1.0 Beta release is now available on the beta channel. You can try it out now: # Local projectnpm install @11ty/eleventy@beta# Global installnpm install @11ty/eleventy@beta -g The Big Features: Jump to heading # Requires Node 12+ Eleventy Serverless, a fantastic way to do dynamic server side rendering on request or lazily via Distributed Persistent Rendering. A plugin to help you upgrade from 0.x to 1.x: https://github.com/11ty/eleventy-upgrade-help Support for CLI arguments to do JSON and NDJSON output (instead of writing to the file system). Use --to=json and --to=ndjson. Custom File Extension Handlers! Plugins can now add their own template types and tie them to a file extension. Enables the Data Deep Merge fe...
Check out the Jamstack Community Survey 2021 Jump to heading # Skip to the Technology choices section to read about Frameworks. Of note: Major frameworks, where the cut-off is at least 10% usage Eleventy is classified as a “major framework” here with ~17% usage, which is huge news. Our usage is beyond that of Vite, Svelte, Hugo, Preact, and Jekyll in the Jamstack world! Relative newcomers Svelte and 11ty are doing very well, with 11ty continuing a strong showing despite relatively low awareness. Early-ish adopters, check these out. Astute readers might remember that last year’s 2020 survey had some lovely things to say too. Really appreciate the support, everyone! Read more on the Netlify Blog: First look: Announcing Jamstack Community Survey 2021 Results
For our third meetup, we have Cassey Lottman showing us how to get our bearings in an existing Eleventy project and Sia Karamalegos showing us she leverages Cloudinary to make image management easier.
Eleventy has passed two million lifetime downloads! We put up a nice celebratory video on Twitter. Thanks for the support, y’all!
This month, Ben Holmes is going to show us how to optimize images with 11ty Image, and Mike Bifulco will tell us about the creator economy and indie web!
Sometimes, we want to use characters in our page titles that we can safely escape on our own sites, but which would be stripped out by social networks' link embeds or when pulled up in an RSS reader. For instance, an article called "<tfoot>: The Table Foot element" is usually stripped down to ": The Table Foot Element" to prevent cross-site scripting. If you use the < and > HTML entities instead, these same platforms will display your title as "<tfoot>: The Table Foot element," which is also not ideal. You could choose to rework your titles so you don't run into this issue. Alternatively, you could automatically replace the offending characters with close lookalikes that won't be stripped out. Here, we'll replace the less-than...
This plugin adds an Eleventy Nunjucks shortcode to provide the functionality of generating an image's object-position value in order to keep the focal point in view when setting CSS aspect-ratio and object-fit: cover. Test drive the results by using the utility app. Docs for Object-Fit Focal Point
Hello, world! In our first edition of the Eleventy Meetup, we're bringing you a talk from our illustrious leader, Zach Leatherman, about the forthcoming Eleventy Serverless. Plus, Mike Aparicio will share about templating languages in a talk focused on helping beginner 11ty devs!
Provide permalinks to your favorite RSS feeds to populate a personalized RSS reader Jamstack application using Eleventy. Bonus: This application was built on Twitch livestream, and recordings will be available on the 11ty Rocks YouTube channel. The course covers advanced 11ty templating. Get the RSS Starter
Scenes are optimal at 1280x720, and are included for: Preshow, postshow, and break messages Main scene with large capture area and host webcam capture bonus slideshow layout All scenes include a lower third for stream details, which also features embedded chat. Get the Scenes Template
Body Classes for Pages and Layouts # A trick I originally learned from WordPress templates is to add a class on the body to identify the page being viewed. This helps you have page-specific style rules. The {{ page.fileSlug }} is an Eleventy provided data variable that will be the original file name without the extension. This will be the file name only, not the path. So /blog/post-one.md would render post-one. Our logic includes the class of "home" when there is no fileSlug available since the the main index will not compute a fileSlug. <body class="page--{% if page.fileSlug %}{{ page.fileSlug }}{% else %}home{% endif %}"> You may also add the layout in a similar way: <body class="layout--{{ layout }}"> Note: If layouts are chained, then {{ layout }} will render out the...
This post assumes a foundational familiarity with Eleventy. If you're new to 11ty - welcome! You may want to start here. This tutorial will showcase many features of Nunjucks templating. So, even if the tutorial's goal doesn't match your use case, you'll get more familair with using it as a templating language! Project Brief # The goal of this Eleventy project is to create a single-page site that displays live code demos, like the setup on SmolCSS.dev. And we'll see how to extend it to a scoped context like is used for this ModernCSS.dev tutorial. Here are the base requirements: ease of managing demo content demo code lives with demo content each demo is an independent file allow custom ordering of demos vs. date-based RSS feed for demos "Open in CodePen" functionality Base P...
Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. In my article on Smashing Magazine, I've written about things that I would have found helpful to understand when I was getting started with Eleventy. It covers: A brief intro to static site generators (SSG) What makes it unique from other SSG Getting started Layouts Templates Filters Shortcodes Collections Custom data Pagination Eleventy plugins Starters Is Eleventy a right fit for you and your project Read the rest of A Deep Dive Into Eleventy Static Site Generator on Smashing Magazine
The following snippet uses Nunjucks and could be added directly in a layout, or created as a layout partial - ex: nav.njk. First, we set the variable of currentUrl to contain the current page URL, and if it matches the the nav item's URL, we add the appropriate aria to identify it as the current page. In this example we are looping through the pages collection, which you may need to adjust to match your desired navigation content. {% set currentUrl = page.url %}<nav> <ul role="list"> <li> <a {% if currentUrl === '/' %}aria-current="page"{% endif %} href="/">Home</a> </li> {% for link in collections.pages %} <li> <a {% if currentUrl === link.url %}aria-current="page"{% endif %} href="{{ link.url }}"> {{ link.data.title }} </a> </li> {%- endfor %} </ul></n...
An extremely minimal Eleventy starter to kickstart a simple multi-page site that provides a nearly opinionless foundation to continue building on. You can preview this starter or jump right to the repo. Use Smol Starter
In the past week I’ve gotten two requests for recommendations for web developers and the best idea I had was to point people to the Eleventy Authors page—but I didn’t know who was freelancing and who wasn’t! Then I thought y’all might want to let me know if you’re freelancing to make it easier for folks to find you and do business! Thus, the Eleventy Super Professional Business Network was born. If you want to be listed on the network, find your site JSON in the 11ty-community repo and add your business_* properties. The business_url property is the only thing that’s required. Here are a few valid samples: { "url": "https://www.zachleat.com/", "name": "Zach Leatherman", "twitter": "zachleat", "business_url": "https://www.zachleat.com/hire-me/"} { "url": "https://www.zachleat.com/", "name":...
Including Opening a Browser on Launch # By default, Eleventy has the BrowserSync option to open a browser set to false. Fortunately, it also provides a way to override the BrowserSync settings, so we can allow opening a browser with the following: eleventyConfig.setBrowserSyncConfig({ open: true,}); If you use VSCode, you may also be interested in creating a launch task to enable running your Eleventy start command when you open your project. Review the official 11ty docs on BrowserSync for more info.
11ty Rocks is now on YouTube! Subscribe today so you don't miss a video. Content will be in support of topics explored here on 11ty.Rocks. Subscribe to 11ty Rocks
The following are intended to be added within your VSCode settings.json. Extend Emmet for Nunjucks # There are two steps to getting Emmet to work for Nunjucks. First, if you haven't already, install the Nunjucks syntax highlighting extension. Next, add the following to specifically extend Emmet to Nunjucks: "emmet.includeLanguages": { "nunjucks": "html"}, You can also use this setting to extend to Liquid or other file types. Language Specific Editor Settings # For myself, I have the following overrides for Markdown and Nunjucks which override my standard setting of 80 characters per column: "[markdown]": { "editor.wordWrapColumn": 100, "editor.wordWrap": "bounded", // Turned off to prevent Emmet when writing code fenced blocks "editor.quickSuggestions": false},"[nunjucks]": { "editor.wo...
The _data directory is an expected location for various data sources for your Eleventy site. A convention you'll see variations of in several starters is a data file to hold site metadata. This concept is useful for creating extendable solutions so that certain template bits don't need repeated or started from scratch everytime. Here's the one that's included in my 11ty Netlify Jumpstart which you can adapt to your own needs: // Located in _data/meta.jsmodule.exports = { // NOTE: `process.env.URL` is provided by Netlify, and may need // adjusted pending your host url: process.env.URL || "http://localhost:8080", siteName: "", siteDescription: "", authorName: "", twitterUsername: "", // no `@`}; Then, you can access that data in templates and content by using the filename first, followed by ...
Often permalinks are changed via front matter, but you may wish to apply permalink changes in a directory data file so that the change will apply to all content within a directory at once. Remove Directory Prefix # As noted in the directory data file tips, you may wish for content contained in a directory to actually appear to live off of root: permalink: "/{{ page.fileSlug }}/" page is provided by 11ty and you can learn more about the page variable in the official docs Add Date # The following will keep the existing structure based on directory location (provided by page.filePathStem), but prepend it with the content's date: permalink: "/{{ page.date }}/{{ page.filePathStem }}/" Take a minute to learn about date handling in 11ty Create Permalink From Title # You may want to use your ...
Prevent Page Generation Output # Sometimes you may want to create content using your preferred templating language but not actually output an individual page. The preferred way to do this is via permalink: permalink: false If you want this to apply to an entire collection, you can do this in a directory data file. This example is used for this very site to create the resource content on the home page: { "tags": "resources", "permalink": false} Read more about setting permalink to false in the official docs Excluding Content From Collections # Within a directory intended to be content for a collection, you may have content, such as the index, that you do not want included in the collection itself. To entirely exclude the content from any collection, set eleventyExcludeFromCollections to t...
Create a Directory Data File # To create a directory data file, add a json file within your directory with the same name as the directory. For example, within /posts/ create posts.json. Assign Tags and Layout # Most often, I use directory data files to quickly create collections via tags and also to assign all the directory content to a layout. { "tags": "posts", "layout": "post"} If needed, you can still override these values within the front matter of individual files. Change Permalink Structure # Another very handy feature is the ability to change the permalink structure for all content within directory. Here's one example of assigning content to live off the root instead of retaining the directory as a prefix: { "permalink": "/{{ {{ page.fileSlug }} }}"} Review more permalink struc...
The following techniques are applied via front matter. The base file that you are using to create the altered content can use any of Eleventy's templating languages, and use all the features that language provides. For example, you could use Nunjucks or Liquid and loop through a collection to create JSON output. Change Content's Output File Type # One of Eleventy's super powers that allows you to exceed the traditional limits of static is in using templating to create any file type output. This is often used to create sitemaps and RSS feeds. Changing the file type is done by simply appending the desired extension via the permalink: permalink: "/{{ page.fileSlug }}.txt" Learn more tips for constructing permalinks Output Content Outside the Eleventy Filesystem # This is again done via pe...
I joined Colby Fayock on Twitch in a slightly chaotic hour where I began building SmolCSS.dev with Eleventy. Check out the recording and learn more about setting up Eleventy content for use in a single-page site, including advanced template and layout features using Nunjucks. Watch Recording
Useful snippets and ideas for managing and creating 11ty projects. Includes tips on VSCode settings, site metadata, permalinks, and more! View All Tips
This tutorial describes a technique I've used in several of my 20+ Eleventy projects to push Eleventy to exceed the traditional limits of static. New to Eleventy? Start with my written tutorial or 20 minute video course. Creating Content as Data # One way we can create data in Eleventy is via the _data directory, which is great for small arrays or for pulling in content from a CMS. Content contained in _data is then available for either pagination or directly for uses such as looping to output content. But what if your content will all be local and intended to output on a single page, and you would like to use templating or other rich features that would be cumbersome inside JSON? This is the type of scenario where you want to create "content as data." Step One: Create a Colle...
When looking for a way to group my blog posts by year, I've found two approaches: By going procedurally through all posts and adding a new headline when the year changes. By creating one collection per year. Both solutions didn't feel optimal, so I came up with a third variant. This method uses a single 11ty collection consisting of [year, posts] tuples. Define a custom collection in .eleventy.js: const _ = require("lodash"); eleventyConfig.addCollection("postsByYear", (collection) => { return _.chain(collection.getAllSorted()) .groupBy((post) => post.date.getFullYear()) .toPairs() .reverse() .value(); }); I'm using lodash to group all posts by year, transform the object into an array and reverse the result (descending order). This method can be used to group posts by any other proper...
The following is the written version of my talk at TheJam.dev 2021 Key Eleventy Features # 100% Static Output # First, I was very drawn to it being able to be purely static. At it's most essential level, it can be a drop-in replacement for tools like Gulp, and can be built with good ole HTML and CSS. A huge selling point for me was that there is zero boilerplate client-side JavaScript. Developer-Mode Conveniences # Eleventy includes BrowserSync when using the --serve flag which provides hot-reload as you make changes. There's also full console logging of what was changed or had errors, and the option to quiet this output. Minimal Opinions, Highly Configurable # Technically, the only requirement besides Eleventy is an index file which can be created in any of the languages. Mine is usua...
My blog is my digital garden, and I enjoy taking care of it. It's been over five years since my last big redesign. Time for a new look. 🎨 There were also technical reasons for a migration. Hexo had once been a popular choice among static site generators, but now there's not much progress anymore. My pull request fixing a rather annoying bug has been open for almost 3 months, still waiting to be merged. Eleventy (11ty) on the other hand has been getting a lot of attention recently. It's much more flexible than Hexo and in general a pleasure to work with. Table of contents: Technical migrationDesignFontSyntax highlightingPerformanceAccessibilityBonusConclusion Technical migration While both Hexo and Eleventy are written in JavaScript, the code reuse was almost zero. This was to be expected...
CSS Houdini worklets require a server to run. While there are many ways to create an envirnoment for developing and testing your worklet, as a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet! You can preview the included worklet example on this CodePen. Details and Template
hasTag Filter # Useful when using a layout for multiple collection types, such as to provide a different call to action or link. Usage within a layout for a single page: {% if tags | hasTag('post') %} eleventyConfig.addFilter("hasTag", (tags, tag) => { return (tags || []).includes(tag);}); Could be genericized to hasItem and used on any array data type.
These filters can be used on Eleventy collections or any custom data that presents as an array. randomItem Filter # Return a randomly picked item from a given array. Usage: {{ for item in collections.all | randomItem }} eleventyConfig.addFilter("randomItem", (arr) => { arr.sort(() => { return 0.5 - Math.random(); }); return arr.slice(0, 1);}); limit Filter # Return a subset of array items limited to the passed number. Usage: {{ for item in collections.all | limit(3) }} eleventyConfig.addFilter("limit", function (arr, limit) { return arr.slice(0, limit);}); randomLimit Filter # Given a collection and a limit in addition to the current page.url, returns the requested number of items excluding the current one. This is useful for showing additional posts without the current one being repeat...
markdown Filter # Sometimes you want to convert a specific bit of content into Markdown. For example, if you have created content as JSON formatted custom data within _data. In that case, you maybe don't want to use pagination to create pages but instead to loop through it somewhere. By tapping into the included markdown-it Markdown parser that is used by Eleventy, we can create a filter to use adhoc on content: // Add above your Eleventy configconst markdownIt = require("markdown-it");// Add within your config moduleconst md = new markdownIt({ html: true,});eleventyConfig.addFilter("markdown", (content) => { return md.render(content);}); To use this filter, you'll also need to pass it through the Eleventy-included safe filter to render insted of escape the compiled HTML: {{ data.content |...
Collections from Custom Data # If you have custom data that you don't need paginated but do need to customize the returned items, here's how to create it as a collection. In this example, replace customData with the filename of your custom data. eleventyConfig.addCollection("customDataCollection", (collection) => { const allItems = collection.getAll()[0].data.customData; // Filter or use another method to select the items you want // for the collection return allItems.filter((item) => { // ... });}); randomizedPosts Collection # Create a randomized version of a tag collection. As opposed to the random filters, a collection will persist throughout your site, whereas filters used on multiple pages will produce randomized results per page. eleventyConfig.addCollection("randomizedPosts", func...
Environment variables are a way to retrieve values that may come from build processes, and are sometimes sensitive, like API keys. For local development access, those are typically stored in a .env file at the root of your site, and not checked in to version control in order to keep them private. Creating and Accessing .env Variables # You you may want to create your own variables to determine the difference between your production vs development environment. For this, you'll start with a modification to your build scripts, such as: "start": "cross-env ELEVENTY_ENV=dev eleventy --serve","build": "cross-env ELEVENTY_ENV=prod eleventy", I'm including cross-env for cross-platform compatibility. Then add to a _data file of your choice, perhaps to your site's meta.js or a dedicated file: modul...
A collection of filters, shortcodes, and other tips for extending 11ty, such as working with dates and extending built-in filters. View All Samples
slug Filter Extension # The default slug filter uses slugify under the hood, but sometimes the default behavior isn't quite enough if you are using special characters, including emoji. We can override the filter to enable strict mode, enforce lowercasing, and optionally add any other characters you encounter being problematic. In this case, I'm enforcing removing " because I have experienced issues without explicitly defining it. Usage: {{ title | slug }} // Import prior to `module.exports` within `.eleventy.js`const slugify = require("slugify");eleventyConfig.addFilter("slug", (str) => { if (!str) { return; } return slugify(str, { lower: true, strict: true, remove: /["]/g, });}); Enable anchor links on content headings # Eleventy uses markdown-it for Markdown parsing, and shows a fe...
year Shortcode # Get the current year - super useful for copyright dates. Usage: {% year %} eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); postDate Filter # Eleventy uses Luxon for dates, which is a lighter weight alternative to Moment (but made by Moment). By importing DateTime from luxon you are provided a deep toolbox of date methods. Since this is a filter, and you'll likely use it to pass {{ page.date | postDate }}, the format at that point is, ex: (Sun Dec 31 2017 18:00:00 GMT-0600 (Central Standard Time) which to Luxon is the JSDate format. The output as shown will be Nov 23, 2020, or you can update it to another option referenced in the Luxon docs on DateTime. // Import prior to `module.exports` within `.eleventy.js`const { DateTime } = require("luxon");...
Generate simple, responsive email templates, with inlined CSS on build. Use the Sass theme setup to re-brand the default template, and use the frontmatter keys for flexibilty in the layout. Check out the README for additional tips on creating emails. Create Your Emails
Based on my tutorial, this package creates dynamic images sized for social media tags (particularly Twitter and Facebook) based on your available pages. Use one of the predefined color themes, or define your own style, template, or both to customize the layout (like the ones in use on 11ty Rocks). Configure the CLI script to run after your Eleventy build, and by default images will be created in _site/previews/ as png images. Use the CLI options to define a custom outputDir and/or a custom imageDir. Docs and Install
Kickstart your 11ty plugin project with this template that includes a barebones 11ty build to test your functionality, and docs on how to test your plugin locally. Also includes a boilerplate for your plugin README, and demonstrates setting up plugin config defaults. Build Your Plugin
The following tutorial is based on a live stream I did with Eva on Twitch. If you prefer, you can watch the recording below, or read on for the step-by-step instructions for creating your first basic 11ty website. Check out the final project on GitHub, and the deployed examply on Netlify. Begin the Project # Open a new directory in your editor of choice, and then in your terminal do the following command to start a brand new project: npm init -y Then, install Eleventy. For a basic site like this, eleventy itself is our only dependency! npm install @11ty/eleventy Once the installs complete, open package.json and update the default scripts section to the following. This enables a start command to run 11ty with hot-reload, which is provided by Browsersync that comes bundled as part of 11ty'...
This plugin provides a filter that displays an estimated read time for Eleventy content, optionally with an emoji visual indicator. The plugin offers config options to change or remove the emoji, update the word-per-minute, and alter the label. A simple string is returned, so the text formatting is up to you. The default appearance displays one 🍿 per rounded 5 minutes of estimated reading time, ex: 🍿 7 min. read Docs for Emoji Read Time
Based on my experience building StyleStage.dev, this tutorial will cover how to create a full-featured 11ty site including: How to initialize Eleventy and create useful develop and build scripts Recommended setup customizations How to define custom data and combine multiple data sources Creating layouts with Nunjucks and Eleventy layout chaining Deploying to Netlify Build Your Community
Eleventy makes it possible to mix templating languages. More importantly to this generator is that we can customize the output file type and composite a file from includes. This generator works with the inherent features of 11ty. Web components are generated within a Nunjucks (.njk) template that outputs the final .js file. Demo the Generator
Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty. Includes minifiying and autoprefixing of styles postbuild. Get the Starter
Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images. Test Drive the Jumpstart
Build a site in 20 mins! Start from a blank project and build up to an 11ty site that includes Sass, a blog collection, and is prepared to source content from a headless CMS. Watch the Collection
Watch on YouTube Also posted on zachleat.com. Play Video Watch on YouTube
In another new exciting launch, we’ve learned that MIT’s new Digital Humanities site was built using Eleventy! You can see an interview about the new site on Sanity’s Community Spotlight with Bryan Robinson: Play Video Watch on YouTube Awesome work by Mike Wagz and the Self Aware crew.
It has been long requested that we create a space for the Eleventy Community to gather and hang out. A welcoming space for beginners to Eleventy to ask questions without some of the intimidation that might accompany opening a GitHub issue. Wait no longer. We have created a Discord server! Join us with this special invite code: discord.gg/GBkBy9u
Just want to highlight that Eleventy was nominated for the JSNation Conference 2020 Open Source Awards category: Breakthrough of the Year alongside: Deno TailwindCSS Alpine.js Eleventy Svelte.js Winners for the cateogry were Deno and Svelte.
Yes, it took me a long while to add this to the blog but I did want to include it in the archives. Netlify does a Jamstack Community Survey every year to gauge trends in the Jamstack world and the results post had a glowing mention of Eleventy: Relative newcomer 11ty had an amazing satisfaction score Really appreciate the support, everyone!
This plugin provides an Eleventy shortcode to add "Open in CodePen" functionality for code demos. The functionality pairs well with the result of this tutorial on creating live static code demos. Docs for Open in CodePen
In order to minimize administrative overhead, to receive an Eleventy sticker you must find someone with Eleventy stickers and ask for one. Verbally. In person. They are not distributed on conference sticker tables. They are not mailed. They are not shipped. They travel only by sneakernet. Our current list of Eleventy Sticker Ambassadors includes: Zach Leatherman (👋🏻 hi) Manuel Matuzović This list of Sticker Ambassadors may expand as time goes on. You will need to find out which meetups/conferences/events our Sticker Ambassadors are going to, attend those events, and talk to them! As an introvert, I know this is terrible (sorry).
As many of you may know, James Williamson first came up with animal suspended from the floating red balloon logo for the Eleventy project in May of 2018. It was originally a cat! James’ quickly iterated to the now-iconic Eleventy possum. Why a possum? Why is the possum floating? Why a balloon? Exactly. 42. To honor James, I thought it might be nice to commission a professional interpretation of his original vision. After Ethan Marcotte shared some possum content from Phineas X. Jones, I knew we had the artist to make this a reality. Literally three days later, I am proud to show you all something that I hope James would have really enjoyed. You can see more of Phineas’ work on octophant.us, Instagram, or Twitter. We also maintain a Twitter Moment of community contributed logos.
I just want to take a brief moment to remember the very special James Williamson who passed away earlier this month. James was diagnosed with ALS in 2013 and was known for his widespread teaching contributions to the web community. Probably the least of which, but one that I will always remember, was his creation of the floating possum mascot for our little Eleventy project. This mascot (nay, mastcot, because it lives in the masthead ok fine but James would have liked that one) lives at the top of the Eleventy docs and links to the Twitter thread he started in 2018. Though we never met in real life, James was clearly a one-of-a-kind. We will miss you ❤️ Donations may be made in James’ name to The ALS Therapy Development Institute or to Quest Youth Ministries at St. John's United Methodist ...
The Eleventy project is deprecating the 11ty.io domain and moving to 11ty.dev. 11ty.dev now has feature parity and the 11ty.io DNS will begin redirecting to 11ty.dev as soon as your DNS updates. A couple of wrinkles here: We switched DNS providers to enable proper forwarding behavior here (including all prior versions of docs on subdomains). This may result in some temporary downtime for 11ty.io URLs, but they will begin forwarding correctly in a matter of time. Sorry for this! Eleventy Contributor Accounts need to be migrated to 11ty.dev. This means you’ll need to set a new password for your account. Check your email for new invite links. This was no small thing! (But it wasn’t too terrible either). We migrated: All versioned documentation subdomains (×15) (e.g. the Eleventy v0.5.3 doc...