Why I love 11ty (and JAMstack) for building static sites...

Web Development in 2020 is confusing...

I'll be honest, it's been really hard to keep up with web development technologies over the past 10 years.

For someone like me (someone who understands basic HTML, CSS and JavaScript) the myriad of frameworks can be extremely daunting. I feel like the barrier to entry for a lot of them is so high and they all seem to be overkill for what I need.

David Wickes seems to agree:

Why You Shouldn't Use A Web Framework

David Wickes ・ Jul 26 '18

#webdev #framework #beginners #react

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

Turn JAMstack up to 11ty

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:

Create a Blog in Less Than 20 Lines of Code Using 11ty

Omar Sinan ・ Jan 10 '20

#beginners #tutorial #webdev #11ty

For me, I'm a very visual person so I've tried to illustrate how 11ty works for my development needs in this diagram:

(FYI, I do all my diagrams in Excalidraw - read about why here!)

Let's break it down

Input Files

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.

Resources

Have files that you don't want 11ty to modify, like CSS or images? Just pass them through in the config:

eleventyConfig.addPassthroughCopy("**/*.jpg")
eleventyConfig.addPassthroughCopy("path/to/css")

And they'll just appear in the finished build.

Static Site

The output of 11ty's magic - it's just pure HTML, CSS (and JavaScript/Images if you have them).

Which means that two things suddenly become a lot easier:

1. Deployment - Host your site literally anywhere that accepts static files. Or go for JAMstack-specific hosting providers like Netlify and Vercel.
2. 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.

But I want more!

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

Let me know what you think!

• Have you used 11ty and/or do you prefer a different static site generator?
• Why?

---

🧡 Tom Anderson
www.thomas-anderson.net
Liked something I did and want to help me out?