I'll be honest, it's been really hard to keep up with web development technologies over the past 10 years.
David Wickes seems to agree:
But now it seems like there's a new trend emerging that seems oddly familiar - JAMstack. Rather than these highly reactive and fully-loaded websites, why don't we just generate static files and serve those! (How very 90's!)
Upon first glance at some of the suggested tools to generate JAMstack sites, a lot of them still had way too much bloat. When I came across 11ty (pronounced 'eleventy) though, it immediately appealed and was super easy to get to grips with.
Rather than being a framework used at runtime or some server-side 'on-the-fly' site generator, 11ty runs as a compiler. It takes inputs, glues them together (really quickly!) and outputs a static site. Simple.
There are several great tutorials on the official 11ty site for beginners, but Omar Sinan does a great job here on Dev.to:
For me, I'm a very visual person so I've tried to illustrate how 11ty works for my development needs in this diagram:
One of the biggest selling points for 11ty for me. One of the biggest issues I had with trying to build sites in pure HTML was that if I wanted to re-use a nav-bar or footer I had to literally copy and paste the code.
11ty does away with this and lets us use a huge array of templating languages, most notably Liquid and Markdown - and even lets us mix and match. Perfect!
But we can also augment our input templates with data (either local or remote) and generate static files based on our layouts and data at compile time. This makes it super easy to create blog sites.
Have files that you don't want 11ty to modify, like CSS or images? Just pass them through in the config:
And they'll just appear in the finished build.
Which means that two things suddenly become a lot easier:
- Deployment - Host your site literally anywhere that accepts static files. Or go for JAMstack-specific hosting providers like Netlify and Vercel.
- Testing - Can be as simple as loading up the HTML file in your browser, or you can integrate automated testing with tools like Cypress or Jest/Puppeteer.
Sure - other static site generators might do more.
And a fully-fledged framework might work better for project X or 'my-react-app25'.
But for someone who just wants to re-use their Navbar and Footer across all pages of their personal website or create a blog that they can host anywhere, I couldn't recommend 11ty highly enough.
I even rebuilt my own website using 11ty*!
(*Yes, I used TailwindCSS to style it. CSS is hard. 😉)
- Have you used 11ty and/or do you prefer a different static site generator?
🧡 Tom Anderson
Liked something I did and want to help me out?