Preview Your Site

On this page, you’ll learn:

  • How to preview a site locally.

  • How to run an optional local server to preview a site locally.

Local site preview

Since Antora generates static sites, you do not have to publish the site to a web server to view it. A site generated by Antora works just as well using the browser’s local file: protocol. This characteristic of an Antora site is an essential tool for previewing your work.

To view the site locally, navigate to any HTML page inside the destination folder in your browser. If you’re following along with the Demo, look for the file build/site/index.html in your project. You will be viewing the HTML pages through the file: protocol of the browser, which you can see in the location bar.

Run a local server (optional)

Although the site is viewable without a web server, you may still need to view your site through a web server to test certain features, such as indexified URLs, caching, or scripts that don’t work over the file: protocol. You can use the http-server package for this purpose. http-server is a simple, static web server for Node.js.

The most straightforward way to use http-server is to invoke it using npx:

demo-site $ npx http-server -v

If you prefer, you can install the package globally using npm instead.

demo-site $ npm i -g http-server

That puts a command by the same name on your PATH so you don’t need to prefix it with npx. We’ll assume for the purpose of this tutorial that you are calling http-server using npx.

Now launch the web server by pointing it at the location of the generated site. In the terminal, type the command name, npx http-server, followed by the location of the generated site (i.e., the output dir). We also recommend adding the -c-1 flag to disable caching.

demo-site $ npx http-server build/site -c-1

Upon launching the command, the local address of the web server will be displayed in your terminal. You should see the following output in your terminal:

Starting up http-server, serving build/site
Available on:
  http://127.0.0.1:8080
  http://192.168.1.8:8080
Hit CTRL-C to stop the server

Paste the first provided URL into the location bar of your browser to view your site through a local web server.

Press Ctrl+C to stop the server.

If you get a port conflict when starting the server (i.e., listen EADDRINUSE: address already in use), you can use the -p <port> option to change to another port. For example, append -p 5000 to the command to switch to port 5000. 
demo-site $ npx http-server build/site -c-1 -p 5000