This helps make templated static websites. Nowadays, very affordable static website hosts like Amazon S3 are available, and can be configured with your own domain. However, static website development is not easy — making changes to the template needs to be reflected on all the pages on the site — and without automated tools, it can be a frustrating experience. Further, typically the URLs of pages on static sites end in .html, which looks less than professional. This tool helps apply a single template file across multiple source html files, and moves each html file into its own directory, making the URLs look nicer ( instead of This website was built using SiteBuilder.

How to use:


The syntax of the template and html files is inspired by ASP.NET MVC. In the template file, place the word @ViewBag.Document where you want the content of the individual html files to appear.

Variables: Define variables throughout the rest of the template document using the @ViewBag.VariableName syntax. These will be replaced by the definitions from the individual html files, if present. For example, @ViewBag.Title can be placed in the <title> section of the template, and can be replaced from an html file by using the syntax @ViewBag.Title=My Title Here. Variable definitions in the html files must be in a line of their own, and must start with @ViewBag.

CSS: SiteBuilder also supports a very restricted subset of Sassy CSS. In particular, it only supports definition and replacement of variables, and it treats all variables as strings. Anywhere in your CSS file, you can define a variable by starting a new line with the statement $variablename: variablevalue. You can then use $variablename anywhere in the document, and it will be replaced by variablevalue. Whitespaces are stripped out from values. Variable names must only have English letters and numbers, or the hyphen (-) character.

URL replacement: All files named <anything>.html are moved into the corresponding /<anything>/index.html file in the bin directory. Please plan your internal links correctly — instead of linking to /<anything>.html, create links to /<anything>/, which will make your site's URLs free of the extraneous .html annotations.

References: References to style files and images need to take into account the fact that the URL will be changed. Since the directory the page ends up in is a level deeper than where it began, CSS and images are best referred to with respect to the root directory, e.g. (/style.css, instead of just style.css).

Download the source code.
Download the binary.
Download an example setup.

This program and its source code is licensed under the BSD 2-Clause license.

Last updated August 19, 2013.