Eleventy (11ty) is a simple static site generator that transforms a directory of templates into HTML. In this post, we'll explore the basics of getting started with Eleventy and creating your first static site.

Let's get this out of the way real quick: some say Eleventy, some say 11ty. My understanding is that Eleventy is the actual program, while 11ty is the name of Zach Leatherman's organization that maintains it. I tend to stick with that convention when writing about it, though I am not sure if that's true... Zach, if you're reading this, please hit me on LinkedIn and confirm or deny. Anyway, feel free to think of them interchangeably if that's easier for you.

Static vs. Dynamic Websites

For broad-strokes purposes, most websites on the internet can be defined as "static" or "dynamic."

"Static" Sites? Shocking.

A static website (like the one you're reading right now) is made up of folders (big kids call them directories), documents, and files that are uploaded to a server for hosting. When you want to visit that website, your browser asks that server to send those documents over to you, the server happily obliges, and your browser renders it for your viewing pleasure. Most of the time, those documents will be HTML, JavaScript, and CSS. HTML gives your site structure, JavaScript lets it do stuff, and CSS makes it pretty.

TL,DR: static site = no frills, no fuss, extremely inexpensive (or literally free in some cases), fast, secure, gg.

Dynamic Sites...

...are dynamic. You're way ahead of me on that one.

A dynamic site has a back end configuration, usually involving a database and/or a server that actually processes data instead of just hosting it. For example, e-commerce is a very common application of WordPress sites. When a customer checks out, the website needs to be able to communicate that information to an inventory database, process the order, and return a confirmation back to the customer. In some cases, the customer even has the option to create an account so they can track their orders. All those actions would require reading and writing data from a server and a database.

And now we see the downsides: moving data back and forth isn't free. Huge servers that have to constantly run to process that information aren't free. Maintaining all that isn't free.

Don't get me wrong, Content Management Systems like WordPress, Squarespace, etc. still have their place. They exist for a reason, and WordPress alone powers nearly 40% of the Internet for a reason. All I'm saying is ask yourself: "Do I NEED a CMS? Do I NEED a dynamic site to host my one-page portfolio?"

Fun fact: my vanity domain on this website costs less than half of what I used to pay for WordPress hosting. Ah, the economy.

Why Eleventy?

There are many static site generators out there, so why do I happen to love Eleventy?

First of all, it's not WordPress. For small websites, that's a huge relief. I love WordPress and think it's amazing, but I also hate it and think it's terrible. Duality of man and all that. But in all seriousness, as discussed above, WordPress (or other CMS's) can do a lot for your website. I got my start in web dev by maintaining, building, and migrating WordPress sites every which way. If your site is super complex and requires a backend for real-time data crunching, chances are you'll be better off setting up a dynamic site with a content management system (you guessed it: WordPress).

HOWEVER... if you're out here making a portfolio or brochure site, building a technical documentation library, want to learn web development from scratch, flat broke, or any combination of these, a static site is PERFECT for you.

  • Simplicity: Eleventy is built on JavaScript but doesn't require you to learn a complex framework.
  • Flexibility: You can use multiple template languages in the same project.
  • Performance: Eleventy builds static HTML files incredibly fast.
  • Opossums: Their mascot is an opossum, one of the coolest animals on earth.

Getting Started

Well begun is half done, so to set yourself up for success, run through these items and make sure you have a good grip of the game at our gates as you gain some growth from Mr. Gold.

Fundamentals

If you know HTML, JavaScript, and CSS, you're in a good spot to jump right in. If you don't, even better! That means you're going to learn something by exploring this project.

Software

To start using Eleventy, the first thing you'll need to do is install Node.js. That might sound indimidating if you're new to the world of coding, but in laymans terms: JavaScript runs in a web browser. Node.js allows you to run JavaScript outside of a web browser. As you probably guessed, that is pretty important when you're using a JavaScript-based site builder, which needs to make your website before you can see it in a browser.

Node also comes with Node Package Manager, or NPM. You'll see that quite often. NPM is the beating heart of Node.js apps. Think of it like an app store, but without the in-app purchases or data harvesting.

I also recommend installing Visual Studio Code, which is a powerful code editor developed by Microsoft (dont worry, it works perfectly on Mac OS as well). If you have a different code editor/IDE that you prefer, go ahead and use that, but I'll base my tutorials on VS Code.

Setting up Eleventy

ALRIGHT. Enough chin-wagging. Let's make a website.

Create a new folder on your computer named "my-eleventy-site." Then, open VS Code (or your IDE of choice) and click "open folder." Navigate to that empty folder you just created, open it up, and start a new terminal (Terminal > New in the top menu bar).

Now in terminal, run the following commands one by one:

npm init -y
npm install @11ty/eleventy

Now you're ready to create your first page and start building your site!

Stay tuned for more tutorials on using Eleventy to create amazing static websites.