Eleventy Hub

 ░█▀▀░█░░░█▀▀░█░█░█▀▀░█▀█░▀█▀░█░█░░░█░█░█░█░█▀▄
 ░█▀▀░█░░░█▀▀░▀▄▀░█▀▀░█░█░░█░░░█░░░░█▀█░█░█░█▀▄
 ░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░░▀░░░▀░░░░▀░▀░▀▀▀░▀▀░
 
rss feed

11ty Hub

🧑🏽‍💻 Jamstack Community Survey 2022 Results

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

November 29, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 The State of Eleventy (2022) in Two Minutes

Watch on YouTube Read a bunch more detail on zachleat.com.

November 28, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Represent Eleventy in the State of JavaScript Survey 2022

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!

November 23, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Setting a date string in eleventyComputed to fix 11ty's "Off by 1"

November 21, 2022 18:04 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.18

No content.

November 19, 2022 03:23 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.17

No content.

November 17, 2022 22:36 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 The State of Eleventy in Two Minutes (2022)

November 7, 2022 17:00 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Understanding WebC Features and Concepts

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

October 24, 2022 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 The WebC Episode with a Bonus Server-Rendered Image Comparison Component on Eleventy 🎈 Changelog №18

October 20, 2022 14:00 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Introduction to WebC

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

October 15, 2022 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy hits 4 Million Downloads on npm!

September 30, 2022 16:44 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Four Million npm Downloads!

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!

September 30, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Interactive Progressively-enhanced Web Components with WebC

September 29, 2022 21:27 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 11: WebC with Zach

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!Add event to calendarApple • Google • Office 365 • Outlook Web • Outlook • Yahoo

September 28, 2022 13:48 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Crash Course in Eleventy’s new WebC Plugin

September 27, 2022 19:01 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Paginating Markdown blog posts with 11ty Pagination

September 12, 2022 19:24 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Get next and previous collection items

August 29, 2022 15:29 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 HTML Base Plugin, Asynchronous Filters, and Config Filename Defaults on Eleventy 🎈 Changelog №17

August 23, 2022 14:00 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.15

No content.

August 19, 2022 15:51 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 Eleventy v1.0.2: One bug fix for Liquid Shortcode Argument Parsing

Eleventy v1.0.2 🎈🐀⚡️🕚 Full docs for v1.0.2 on our web site This project would not be possible without our lovely community. Thank you to everyone that built something with Eleventy (×595 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 ❤️. 🏆 A super special thanks to Peter DeHaan for their tireless contributions on the Eleventy Issue tracker. All of our supporters on Open Collective ❤️ Gold Sponsors: Sanity.io, Nordhealth, CloudCannon and Silver Sponsors: Set Creative Studio, Unabridged Software, PQINA, The Coders Guild, Bejamas, Nathan Smith, Flatirons Deve...

August 16, 2022 17:10 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Using Template Filters (built-in and custom)

August 15, 2022 14:30 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Internationalization (i18n) and Markdown Benchmarks—Eleventy 🎈 Weekly №16

August 8, 2022 19:26 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Dynamic Data from JavaScript and APIs in 11ty's build process

August 8, 2022 16:00 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Global Data files (JSON)

August 1, 2022 15:45 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.14

No content.

July 27, 2022 21:47 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.13

No content.

July 15, 2022 15:26 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Full Control Over HTML, a look at requiring opt-in for the `meta name="generator"` in Eleventy

June 30, 2022 15:46 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Emulated Passthrough File Copy and Advanced Copy Options—Eleventy 🎈 Weekly №15

June 27, 2022 22:33 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Ep: 10: Static JSON API's with Jadon Naas

June 27, 2022 20:27 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.12

No content.

June 27, 2022 13:59 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 The Dreaded Markdown Indented Code Blocks, Twig Templates, Dev Server CLI—Eleventy 🎈 Weekly №14

June 21, 2022 18:40 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: Render Plugin and the renderTemplate tag

June 20, 2022 14:30 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 10: Static JSON API's with Jadon Naas

In this months episode, we're joined by Jadon Naas to show us how to create static JSON API's with Eleventy!Add event to calendarApple • Google • Office 365 • Outlook Web • Outlook • Yahoo

June 14, 2022 16:55 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Hydrating Components with `is-land` and Framework SSR—Eleventy 🎈 Weekly №13

June 14, 2022 14:25 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 11ty Second 11ty: The basics of Collections

June 13, 2022 14:30 | [11ty Second 11ty]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 9: Automatic syndication and Wordle on the edge

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!

June 3, 2022 18:35 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Wordle on the Edge

June 3, 2022 18:31 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Automate syndication and ownership of your content with Eleventy

June 3, 2022 15:48 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Partial Hydration and Islands Architecture—Eleventy 🎈 Weekly №12

May 31, 2022 21:08 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Edge-powered Search, Images feed the Data Cascade, Empty Results Pagination—Eleventy 🎈 Weekly №11

May 16, 2022 17:31 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.11

No content.

May 13, 2022 20:34 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.10

No content.

May 12, 2022 12:51 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy Build went from 54s to 17s—Memory/Performance Wins 🏆 on 2.0.0-canary.9—Weekly №10 2022-W18

May 9, 2022 17:38 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

👾 v2.0.0-canary.9

No content.

May 6, 2022 18:41 | [Release notes from eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Choose your own syntax Tabs, Eleventy Edge Preferences, and Eleventy Edge Wordle!—Weekly №9 2022-W17

May 2, 2022 18:57 | [Eleventy]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Transitioning to Eleventy from other environments (Gatsby, NextJS, WordPress, Jekyll) - Panel

April 23, 2022 00:01 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 8: State of Eleventy and Panel on Transitioning to 11ty

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.

April 22, 2022 18:13 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 State Of Eleventy: April 2022 - Zach Leatherman at THE Eleventy Meetup

April 22, 2022 17:54 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Three Million npm Downloads!

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!

April 22, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Use Eleventy Edge to deliver dynamic web sites on the Edge

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

April 19, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 7: Structuring 11ty Projects and Rendering RSS Content

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!

April 3, 2022 17:39 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Structuring 11ty Projects - with Jérôme Coupé

April 3, 2022 17:05 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Including RSS Content in your 11ty Site - With Raymond Camden

April 3, 2022 17:05 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Ignore Eleventy files for a production build using environment variables

March 25, 2022 22:30 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ignore Eleventy Files With Environment Variables

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

March 25, 2022 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 6: Async Shortcodes and Serverless E-commerce

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.

March 7, 2022 19:45 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Is 11ty actually a JavaScript framework?

March 7, 2022 19:44 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 New Eleventy YouTube Channel

🎥 Eleventy has a new YouTube channel! We’ll be sharing updates and community content over there. Like/dislike/subscribe/unsubscribe at your leisure!

February 18, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Architecting an Eleventy serverless e-commerce site

February 15, 2022 16:11 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Full Time Open Source Development for Eleventy, sponsored by Netlify

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

February 14, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 5: 11ty Serverless Search and the Data Cascade

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.

January 25, 2022 15:27 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 4: 11ty's Instant Preview with 11ty Serverless & "Basic Pattern Repository" Walkthrough

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

January 25, 2022 15:27 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Eleventy v1.0.0, the stable release.

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

January 9, 2022 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Journey to the Center of the Eleventy Data Cascade with Ben Myers

January 7, 2022 03:49 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy Serverless Search - With Bryan Robinson

January 7, 2022 03:49 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Creating and Using Eleventy Collections

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

November 11, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 "Basic Pattern Repository" Walkthrough with Thomas Michael Semmler

October 21, 2021 16:41 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Upgrading the editor experience for 11ty sites with instant preview - With Knut Malvær

October 21, 2021 15:52 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 A new Eleventy mascot from Geri Coady

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

October 18, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 The State of Eleventy (2021) in Two Minutes

Watch on YouTube Read a bunch more detail on zachleat.com.

October 8, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 The 11ties: 11 min ⚡️ talks about Eleventy on 11/11

RSVP for this special Jamstack Toronto event in partnership with 11ty: The 11ties: 11 Minute Talks about 11ty on 11/11

October 8, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Shout out to Jamstack Conf 2021 Jammies Award Winners

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

October 7, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 The very first Eleventy 1.0 Beta Release

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

October 6, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Jamstack Community Survey 2021 Results

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

October 5, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Diving into an existing 11ty project with Cassey Lottman

September 28, 2021 15:42 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Optimize Images in Eleventy Using Cloudinary with Sia Karamalegos

September 28, 2021 13:30 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 3: Getting your bearings and Cloudinary Images

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.

September 27, 2021 15:17 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Two Million npm Downloads!

Eleventy has passed two million lifetime downloads! We put up a nice celebratory video on Twitter. Thanks for the support, y’all!

September 3, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Ep. 2: 11ty Image and the Creator Economy

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!

August 23, 2021 19:25 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Filter Titles for RSS and Social Shares

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 &lt; and &gt; HTML entities instead, these same platforms will display your title as "&lt;tfoot&gt;: 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...

August 8, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Plugin: Object-Fit Focal Point

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

August 7, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Hello, World!

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!

July 20, 2021 15:14 | [THE Eleventy Meetup]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Nunjucks Templating and CSS Styling | Eleventy RSS Reader Part 6 of 6

July 5, 2021 22:14 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy Filters, Shortcodes, Template Partials, and Slugs | Eleventy RSS Reader Part 5 of 6

July 3, 2021 01:02 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Extending Eleventy with Build Scripts and Filters | Eleventy RSS Reader Part 4 of 6

July 1, 2021 02:19 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy Templating and Advanced Pagination for Dynamic Page Creation | Eleventy RSS Reader Part 3/6

June 28, 2021 04:10 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Start a Jamstack App with Eleventy | Eleventy RSS Reader Part 2 of 6

June 27, 2021 01:32 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty RSS Reader Starter

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

June 24, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy RSS Reader Application Requirements | Part 1 of 6

June 14, 2021 04:39 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy AMA - Getting started, content without page output, custom ordering, adding JS

May 2, 2021 00:38 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Twitch Scenes 11ty Starter Template

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

May 2, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Layout Templating

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

April 16, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Use Eleventy Templating To Include Static Code Demos

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

April 2, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 A Deep Dive Into Eleventy Static Site Generator

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

March 24, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Eleventy: Key Features and Getting Started

March 10, 2021 00:40 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Essential Navigation Snippet

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

March 9, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Smol 11ty Starter

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

March 9, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Join the Eleventy Super Professional Business Network

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

February 26, 2021 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Custom BrowserSync Options

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.

February 25, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

📺 Build an 11ty Site in 3 Minutes

February 20, 2021 16:37 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty.Rocks on Youtube

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

February 20, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 VSCode Settings

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Site Metadata

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Modifying Permalinks

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Excluding Content Output

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. For this, use: eleventyExcludeFromCollections: [value of tag for collection] Or, if you are ...

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Directory Data File

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Changing Content Output

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Single-Page Setup (recorded livestream)

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Quick Tips

Useful snippets and ideas for managing and creating 11ty projects. Includes tips on VSCode settings, site metadata, permalinks, and more! View All Tips

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Using Template Content as Data for 11ty

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

February 15, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Group posts by year in Eleventy

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

January 31, 2021 15:52 | [11ty — Darek Kay]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Going Beyond Static Sites With Eleventy

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

January 28, 2021 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Moving from Hexo to Eleventy

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

January 17, 2021 18:27 | [11ty — Darek Kay]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty CSS Houdini Worklet Generator

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

December 15, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Filters for Tags

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.

November 24, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Filters for Data Arrays in 11ty

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

November 24, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Filters for 11ty Content

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

November 24, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Customizing 11ty Collections

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

November 24, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Managing `.env` Variables

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

November 23, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 .eleventy.js Config Samples

A collection of filters, shortcodes, and other tips for extending 11ty, such as working with dates and extending built-in filters. View All Samples

November 23, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Slugs and Anchors

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

November 23, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Date Shortcodes and Filters

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");...

November 23, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Email Generator

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

November 14, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Plugin: Social Images

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

November 1, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Eleventy Plugin Template

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

October 31, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Create Your First Basic 11ty Website

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

October 31, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Plugin: Emoji Read Time

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Build a Community Site With Eleventy

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Web Component Generator

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Sass Skeleton Starter

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 11ty Netlify Jumpstart

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Build an Eleventy Site from Scratch

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

October 20, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 The State of Eleventy (2020) in Two Minutes

Watch on YouTube Also posted on zachleat.com.

October 15, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 MIT’s new Digital Humanities site launches using Eleventy!

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: Awesome work by Mike Wagz and the Self Aware crew.

August 11, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Join our Discord Server!

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

August 10, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 JSNation Open Source Awards 2020

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.

June 15, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 State of the Jamstack Survey 2020 Results

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!

May 27, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Plugin: Open in CodePen

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

April 2, 2020 00:00 | [11ty Rocks!]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 How do I get an Eleventy Sticker?

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

February 5, 2020 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 An Homage to the James Williamson Possum Balloon

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.

December 19, 2019 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 A special note of remembrance for James Williamson

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

December 18, 2019 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -

🧑🏽‍💻 Eleventy Docs Moved from 11ty.io to 11ty.dev

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

December 5, 2019 00:00 | [Eleventy Blog]
- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -- + - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - -