Home
Muller's Memoranda

Eleventy (11ty) Static Site Generator

This site is built using Eleventy. I chose it because it uses javascript, which I want to learn better, and it takes a minimalist approach, allowing me to start with a very simple site setup.

The main things to know:

Daily usage

I do my Node work in a WSL2 VM. I open a shell, cd to my local clone of this site, and run code . to start a Visual Studio Code instance. Then, in that same shell, I run npx @11ty/eleventy --serve and leave that running.

Now I can point my browser (on Windows, usually) at http://localhost:8080 to view the local version of the site. As I save edited and added files, the site updates automatically, I just have to refresh pages in the browser.

Occasionally, check stuff in, then git push to update the public site. GitHub Actions automatically process the changes.

Build the static site from sources, by default the output goes to _site.

npx @11ty/eleventy

To serve the project up locally, in a way that will automatically update as you modify the source files:

npx @11ty/eleventy --serve

(npx is (nearly) an alias for npm exec.)

Installation

You need Node.js. See my notes on installing it.

Install npm.

npm install -g npm

If you're working on an existing eleventy project, clone it to a local repo and cd into it. Run npm install to install all the project's dependencies. You're done.

If you are setting up a new project, create a new repo, cd into it, and initialize it as a Node.js project:

npm init -y

Install Eleventy in this project, as a tool that's needed only for development (not production):

npm install --save-dev @11ty/eleventy

Add a .gitignore file. You can find templates online for Node.js projects. Or if you created the repo on GitHub, you can add a .gitignore file in GitHub's Web interface, and it will offer templates you can choose from. In any case, add a line containing sites/ to .gitignore so that eleventy's outputs don't get checked in.

Now refer to the Daily usage section above.

See also

References