Why I love 11ty (and JAMstack) for building static sites...
Tags: webdev, eleventy, html, jamstack
Published: 2020-07-23 18:45:34

---
description: "It's been really hard to keep up with web development technologies over the past 10 years 🤔, but here's how 11ty and the JAMstack is helping me build static sites in a modern way. 👍"
---

## 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:

{% link https://dev.to/gypsydave5/why-you-shouldnt-use-a-web-framework-3g24?signin=true %}

But now it seems like there's a new trend emerging that seems oddly familiar - [JAMstack](https://jamstack.org/). 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](https://www.staticgen.com/) to generate JAMstack sites, a lot of them still had **way** too much bloat. When I came across [11ty](11ty.dev) (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:

{% link https://dev.to/oohsinan/create-a-blog-in-less-than-20-lines-of-code-using-11ty-3oh0 %}

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

![How 11ty works](https://dev-to-uploads.s3.amazonaws.com/i/sgo9z7ui1rzn3r7snv8p.png)
*(FYI, I do all my diagrams in [Excalidraw](https://excalidraw.com) - read about why [here](https://medium.com/@ndsn/why-excalidraw-is-mightier-than-the-pen-and-the-sword-47ecea8e81)!)*

## 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](https://shopify.github.io/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](https://github.com/11ty/eleventy-base-blog).

**Resources**

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

```javascript
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](https://github.com/Driminary/thomas-anderson.net) 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](https://www.thomas-anderson.net/?utm_source=devto)
*Liked something I did and want to help me out?*
[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-orange?logo=Buy%20Me%20A%20Coffee&logoColor=white)](https://www.buymeacoffee.com/ndsn)