Home

Writing your own static template generator<br>Posted 2026-06-28T22:16:51.762Z ago<br>Pages that load quickly, use minimal dependencies and boast tiny file sizes - are becoming a thing of the past. Nowadays every page you see is always using fancy technologies and "modern" UI that looks like unicorn barf. Its time for a come back; Static pages are great for small projects or largely data-based sites. Static pages are great for this because you're able to load data statically ONCE on your local machine that way people connecting to your site don't need to wait for fancy runtime software to first load the data to the page.

Lets talk about liability, when you have a non-static site you're open to issues such as;

Needing to optimise your page for fast data loading or slower internet connections.

Bloated file sizes due to javascript libraries for lazy loading data.

Slower than traditional static/basic HTML pages

Now, you might be thinking; "Well, if I just write plain vanilla HTML, its the same as static pages", you would be correct, but, static generators allow you to wrap data into a website which means you can quickly regenerate the style of repeating data without needing edit huge amounts of your website (This is aimed at pages that use a medium amount of formatted data).

Static page generation programs usually are comprised of four basic stages, input, filtering, swapping and finally; output. This guide is not language specific so I'm not going to cover the input stage but I would suggest a malleable method of input for source, output and data properties, along with this a template should also be provided (More on this next). For this I would suggest command line arguments or a configuration file.

Templates are the users best friend. Templates are a form of format input that allows a user to specify the way in which static data is placed onto your static page. Templates are strings that have some form of keyword identifier which represents a key:value system in your data (Note that this guide assumes you will be using a key:value input data language such as JSON). This guide was greatly inspired by my experience creating Plate, my own static generator that uses JSON as an input. Justifiably JSON is the best input data type for your program, JSON has a common key:value system and you're able to sanitise any form of text into a value. JSON is also extremely common which means support libraries can be found for nearly every programming language.

In Plate, templates work as follows; a given template is iterated character by character. On every iteration the following characters are compared to a given prefix and if they match we know that a key must follow, along with a closing suffix. If the prefix is found, an inner loop is executed to reach forward in the template to locate the end of the key. This key is then searched within the data file and the corresponding value replaces the prefix + key + suffix in the template.

This could be done many other ways using string tokens/splits or otherwise, I'm sure my method is very unoptimised, but, one of the upsides of static website generators is that regardless of the data size, you only have to load data once.

I would highly suggest making this template logic a function. In your generator, you will likely need to iterate through multiple objects in a JSON data file. Having the template generator being a function means you can call it separately for every object in your JSON.

The output stage is rather simple too, you just write each generated template to a file OR even better use a trigger line: A trigger line is a line in a source file that tells the generator that it should dump the templates after that line. This is very useful when you want your data to have a surrounding website instead of needing to load your data in an iframe. This can be accomplished rather easily by simply loading a source file, iterating through each line and writing each line to the output file, if the line contains a certain trigger then start parsing the input data and write it to the output file also before continuing to write the input source file until EOF.

If you want to check out my implementation of this, check out my static tem[Plate] generator written in C.

Thanks for reading.