HTML Templater

HTML Templater is a static site generator where the templates and content are all straightforward HTML. The user can define custom elements, or redefine existing HTML elements with custom HTML to be used as page templates, or reusable components.

The element definitions and their use are all in bog-standard HTML, meaning that developers don't have to learn any other markup language, and that it's flexible enough to do anything that the web can do, both now and in the future.

The code for this project can be found on GitHub.

Getting started

To get started with HTML Templater, simply create 2 folders one for the source files, and another where the website will be generated into. Within the source folder, create a folder structure as follows.

Manifest file

The starting point for site generation with HTML Templater is the manifest file, which enumerates the custom elements defined for our website, the location where the website will be generated, and how to handle assets.

The following JSON will is enough to get started, where the outputPath indicates the folder where the website should be generated.

{
  "elements": [
    "page"
  ],
  "outputPath": "../wwwroot",
  "assets": {
    "input": "assets",
    "output": "assets"
  }
}

Pages

HTML Templater will iterate over each htmt file in the pages subfolder and generate a corresponding html page in the output folder. For now, let's start with a single page called index.htmt and give it the following contents.

<page>
  <h1>Hello World</h1>
</page>

Elements

Each HTML element can be redefined in an element file. This can be used to create reusable building blocks, like page templates. To see this in action, create a page.htmt file in the elements subfolder, and add the following code to it. 

<!DOCTYPE html>
<html>
  <body>
    <main>{{ InnerHtml }}</main>
  </body>
</html>

Site generation

Now when HTML Templater is ran, with the path to the manifest.json file as an argument, it will generate a single html page, where the page element has been replaced by its definition from the element file.

This relatively basic setup can now easily be extended with additional pages, different custom elements and any choice of static assets. For more detailed information, visit the documentation page.

About the author

My name is Nino van der Mark, I'm a software developer at 4Dotnet and I like building things that make life a little more fun, and a little bit easier. Feel free to check out my other projects on GitHub or my personal website.