2. Running Eleventy

11 Mar, 2024

Now that our project is all set up, let's run Eleventy on it and get going!

Build the site

Node packages are executed with the npx command. Run npx @11ty/eleventy in your terminal, again by typing (or pasting) it in and pressing ⏎ Enter. This runs Eleventy on the working directory (which should still be our project folder), generating our site. You should see something like this:

11ty-zones $ npx @11ty/eleventy
[11ty] Writing _site/feed.xml from ./feed.njk
[11ty] Writing _site/index.html from ./index.md (njk)
[11ty] Writing _site/archive/index.html from ./archive.njk
[11ty] Writing _site/404.html from ./404.md (liquid)
[11ty] Writing _site/about/index.html from ./about.md (liquid)
[11ty] Writing _site/posts/2024-02-22-Post-Template/index.html from ./posts/2024-02-22-Post-Template.md (liquid)
[11ty] Copied 3 files / Wrote 6 files in 0.21 seconds (v2.0.1)
11ty-zones $ 

...and there should be another new folder, _site, inside the project folder. It's filled with HTML, CSS, images, and (since 1.1.0) an RSS feed, ready to upload to your host.

Any time we've made some changes and want to rebuild, we can just run this command again, but that gets repetitive. Instead, we can have Eleventy watch the project for changes and rebuild the site for us, automatically, every time we save a file.

Start the development server

To get this convenience, pass Eleventy the --serve argument by running npx @11ty/eleventy --serve - you should see a similar log as before, but with two extra lines at the end:

(...)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Go ahead and open http://localhost:8080/ in your browser. It's our site!

Now open up the project's index.md file in your code editor. Change the "I hope you enjoy your time here!" text to "Hello, World!" (or whatever you'd like). When you save the file, the terminal should update as Eleventy goes to work rebuilding:

(...)
[11ty] File changed: index.md
(...)
[11ty] Copied 3 files / Wrote 6 files in 0.03 seconds (v2.0.1)
[11ty] Watching…

...and the page should even refresh itself in your browser so you can see your changes right away. Nice!

(Note that the terminal isn't prompting for another command yet - it's still busy running Eleventy. When you're done, or if you need to stop it for any other reason, press Ctrl + C inside the terminal. (This is a pretty standard keyboard shortcut across most terminals; it isn't an Eleventy- or Node-specific thing.))