Local Server
Intro to Eleventy Server
Eleventy includes a local web server feature. Two of the main benefits are auto-refresh, and running your site at the web root.
If you have the server running, and the page you're editing is loaded into your browser (using the Eleventy server URL), then when you save the file the site will automatically rebuild and then refresh in the browser. However, there are two caveats:
It only refreshes if the changes are done in a template that has <body></body> tags.(note that this may no longer be accurate)If the folder structure is changed or a new file is added, the server will have to be stopped and restarted. Apparently it only processes the files it saw when it was started.(note that this may no longer be accurate)
Running at the web root is useful because Eleventy assumes any URLs it generates (such as hrefs for pagination) are at the root.
To start the Eleventy server :
npx eleventy --serve
When the server starts, part of the messages it returns should be similar to :
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:8080
External: http://192.168.1.5:8080
The Local URL is what you point your browser to.
Eleventy defaults to port 8080. To start the server at a specifc port :
npx eleventy --serve --port=8081
This guide will assume the server is being used throughout. If it is not, make sure to re-run Eleventy whenever changes are made :
npx eleventy
And remember that sometimes the site needs to be at root for certain things to work. In those cases the server is probably the easiest way to deal with that.