This is a simple example of how to render a MPA with file based routing and includes a build and watch mode.
- Incremental builds
- Watch mode
- Build mode
- Static folders
- HTML and Markdown support
- Nested Layouts
- File based routing
- Syntax highlighting
- Github Actions
- Web Dev Server
Build TS files:
npm iStart the watch mode on the html files:
npm run devor one time build:
npm run buildStart the http server:
npm run startOpen the browser to http://127.0.0.1:8080/static-site-file-based-routing/
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>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.
The layout chain will be the following for the given route /about/:
example/about/index.htmlexample/about/layout.htmlexample/layout.html
Any css or js files in the target folder will be copied to the build folder.
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.