Page-based Routing

Static uses a simple page-based routing system where each route is mapped to a file inside of a pages directory. This allows you to easily create routes for your website by adding files to this directory.

If you used the static new command, a pages directory will automatically be created. If you are inside an empty folder, you can just create a new folder with the name of pages.

Creating Pages

There are two ways to create a route for your website using page-based routing in Static:

1. Adding an index.html file to a folder: If you add an index.html file to a folder inside the pages directory, it will serve as the homepage of your application. For example, adding a file located at /pages/about/index.html would serve up an /about page.

2. Adding a file directly to the pages directory: You can also add files directly to the pages directory to create routes. For example, adding a file located at /pages/about.html would resolve to the /about page.

Creating pages for your website is as simple as adding a new file to your pages directory. When you add a new page it will automatically create a corresponding route for that page.

Route Structure

The structure of the pages directory determines the routes available on your website. Each file within the pages directory corresponds to a route. For example, with a structure like this:

Your website will have the following routes available:

Re-using Pages

There may be times when you want to create a page that resolves to multiple routes. You can do this without having to duplicate a page. Use the <page> tag to load the contents of another page.

<page src="learn/index.html"></page>

Wherever you place this file, it will generate a route for that page and load the same contents as the HTML file referenced in the src attribute.

That's the basics of Page-based routing. Next, let's move on to layouts.