Step 1. Beginning

So, you've decided to construct a web site. That's a great idea! Owning a web site is a fun and possibly profitable hobby and break from the fascist-controlled corporate media infrastructure. You can host a regular website almost anywhere, including offline!

Eleventy (oft written "11ty") is a static site generator, which means that it compiles a set of information, pages, and data into a website that can be hosted on a web server. Practically, it allows you to manage a complex website from simple files and data without requiring a complex CMS or other management software.

11ty is a low-configuration application where you can accomplish most tasks with a minimum of coding. I hope this small tutorial gives you a taste of the power available to you. Always remember, if you to need something more complex than 11ty, you can always reuse the code and data for a different app.

Pre-requisites

You need a Node.js environment in the cloud or on your local machine. I recommend Bun which is a program that can replace a few common JS developer tools and is also extremely fast. You can use NPM or another NPM-compatible program instead. My examples will be using Bun but you should be able to translate them easily.

You'll also need a code editor. I will recommend VS Code simply because I know it has a decent extension for something we'll be using later.

Setting up an 11ty Project

Starting an 11ty project is so easy, I'm not even going to bother with the "hello world" but you can run it solely from the executable if you have no configuration. It is not a zero config environment for most cases, but it is very low config. Let's get started instead with the basic local install so you can get going.

I'm going to assume you're initializing a Git repo and will refer to some Git-specific things but if you're not, you can ignore any language around editing Git-related files or Git commands.

Install 11ty using the following command:

bun i -D @11ty/eleventy

This will create a package.json file that you can edit to control your project and a lockfile you should never edit manually, in this case named bun.lock. You don't want all the installed depedencies in your repo, so create a .gitignore and add node_modules/ to it. Congrats, you've installed 11ty!

Before you make a Git commit, let's add some startup scripts to make it easier to work from the command line. you should create build and dev entries in package.json that reference the commands eleventy and eleventy --serve respectively. Check the package.json of this repo if you're confused on how this is done, or review the Bun run documentation on running package.json scripts. Let's also pop a "type": "module" definition in the file so we can expect the new-style JS syntax.

Testing 11ty

Let's test it to make sure it's working. Create a file called test.md in the root directory and type something into it. If you're not familiar with Markdown, you can get familiar but for this case you can just type anything. Then, run bun run build in your terminal. You should see the program chew for a moment then spit out a folder called _site in the project root with a single file, _site/test/index.html.

You may notice that I, in the project, created a file called .eleventyignore in the project root. This is an optional file that tells 11ty not to process something it would normally process, in this case, all the Markdown I'm writing for you. If you have a similar case, such as a README.md file in the root, you can do this also.

What just happened?

11ty took all the files that it understands from the root and converted them to HTML. Notice that it creates them by default at name/index.html as this will create a clean URL on the website, although like most things in 11ty, this is configurable. In our case, there is only a single file that 11ty understood out of the box, the Markdown file in the project root.

If everything is working, let's make that first project commit, but first you'll want to add that output directory _site/ to your .gitignore and delete that test file.

If you create a sample input like this…

/test.md

# Oh lawd he's comin'
It's big, bad 11ty Jones.

You will get a sample output like this…

/_site/test/index.html

<h1>Oh lawd he's comin'</h1>
<p>It's big, bad 11ty Jones.</p>