What’s the single best thing you can do if you want to learn a new tool or evaluate a new technology? Right, it’s getting your hands dirty.
Only by building something tangible, like a realistic prototype or even a real project, you’ll get immediate answers to the questions that are relevant to you and your specific context. Based on those insights, you can then make an informed decision about whether this tool is the right one for you or not. Also, it is so much fun to build something new, right?
So imagine my excitement (🥳🎈) when I recently decided to start a new side project and finally got to try out Eleventy, Zach Leatherman’s lovely Static Site Generator. And because every good side project begins by starting another side project and also because the The Law of Eleventy™ demands that you create a starter project as the first step of your learning journey, I did exactly this: set up a starter project.
Another thought I had immediately was that I could also try out Vite, Evan You’s blazing-fast build tool. I had heard a lot of praise for it and also listened to a really intriguing episode of Chris’s and Dave’s ShopTalk Show with Evan You. So I had a look at it and, luckily, also found a plugin Zach had published earlier this year that lets you use Vite with Eleventy.
A clear, performant base
The thing with starter projects is that they grow old very quickly. Of course, when you set everything up, you want to add the latest tools, all those dependencies that are currently state-of-the-art, and also want to try out new things. But this, in turn, means that you now might have to update your project more regularly and also re-evaluate some of the decisions you made. On the other hand, as long as, for example, a build process works, you might not need to change a running system. And there is always the process of learning something new that makes setting up a starter project valuable in itself.
So, I set out to create a starter that should be as simple and concise as possible, not only to make it easier to understand for anyone who wants to get their head around it as well – including or my future self – but also to reduce the need for maintenance. At the same time, I wanted it to have all the features already built in that I would enjoy in such a base project. For example, a really performant base with Critical CSS, a web font loading strategy, or also base styles for responsive typography. And, of course, RSS.
The result of my endeavors is Eleventy Plus Vite, a starter project with the following features:
- Eleventy 2.0.0-canary
- New Eleventy 2.0 Dev Server with live reload
- Vite as Middleware in Eleventy Dev Server (uses eleventy-plugin-vite)
- Eleventy build output post-processed by Vite (with Rollup)
- CSS/Sass post-processing with PostCSS incl. Autoprefixer and cssnano
- Uses my own opinionated CSS/Sass structure
- Critical CSS, generated and inlined via rollup-plugin-critical. The main CSS file is then loaded asynchronously with Scott Jehl’s
medialoading strategy (adds media="print" and swaps to media="all" once loaded) - Example implementation of a web font loading strategy (critical FOFT with preload)
- Basic fluid typography based on Utopia
- Basic dark mode support (using
prefers-color-schemeand CSS Custom Properties) - Polyfill for focus-visible
- RSS feed already included 🧡
- XML sitemap
- Four Hundos Lighthouse score 💯💯💯💯
There were quite a few things to get my head around, besides learning about how to use Eleventy and Vite. For example, I had also not worked with Rollup before, which Vite uses to bundle JavaScript modules. And many of the plugins I now use in the starter were also new to me. But that’s exactly why building something real is so valuable: in order to find solutions for problems that seem complex and unsolvable at first, you are forced to play, explore, and blindly try out things that sometimes work and most often don’t. And step by step, you understand how everything works.
If you want to get started with Eleventy as well, maybe you better don’t use my starter. 😉 Have a look at Eleventy and a few other starter projects yourself. There is also a brilliant introduction by Andy Bell, Learn Eleventy From Scratch. The course is now Open Source and although it might be outdated here and there because it is from 2020, it still explains the basic concepts very well. Stephanie Eckles wrote A Deep Dive Into Eleventy Static Site Generator for Smashing Magazine and she also collected a lot of useful resources on the website 11ty Rocks!. And, besides many more articles you can find on the Web, there is the Eleventy Documentation, to help you get started.
Thanks so much again to all the people who created a starter project or Eleventy site before me, especially Stephanie, Miriam, Max, and Zach. I learned so much from your different approaches (and shamelessly copied a bit of code here and there as well… 😇)!
Oh yes, and I’ll keep you posted on any updates I make to the project, for example, the dark mode toggle I am currently working on.
~
