Skip to content

Simple example of how to render a MPA with file based routing and includes a build and watch mode.

License

Notifications You must be signed in to change notification settings

rodydavis/static-site-file-based-routing

Repository files navigation

Static Site File Based Routing

Demo

This is a simple example of how to render a MPA with file based routing and includes a build and watch mode.

Features

  • Incremental builds
  • Watch mode
  • Build mode
  • Static folders
  • HTML and Markdown support
  • Nested Layouts
  • File based routing
  • Syntax highlighting
  • Github Actions
  • Web Dev Server

Getting Started

Build TS files:

npm i

Start the watch mode on the html files:

npm run dev

or one time build:

npm run build

Start the http server:

npm run start

Open the browser to http://127.0.0.1:8080/static-site-file-based-routing/

Creating a new page

Create a new page in the target folder that is named index and is a markdown or html file:

example/about/index.md

# About Page

This is the about page.

example/index.html

<h1>Home Page</h1>

Creating a new layout

Create a new layout in the target folder that is named layout and is a html file:

example/about/layout.html

<html>
  <head>
    <title>About Page</title>
  </head>
  <body>
    <h1>About Page</h1>
    <div class="content">
      <slot></slot>
    </div>
  </body>
</html>

If a <slot> is added it will replace the content with the child pages in the directory, otherwise it will append to the end of the body.

Nested Layouts

The layout chain will be the following for the given route /about/:

  1. example/about/index.html
  2. example/about/layout.html
  3. example/layout.html

CSS and JS

Any css or js files in the target folder will be copied to the build folder.

Assets

Any assets in the public folder will be copied to the build folder.

There is an option to pass multiple directories to the public option.