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 (example.com/something/ instead of example.com/something.html). This website was built using SiteBuilder.
How to use:
- First, you must be running windows.
- Download the binary and put it in a folder.
- Create a subfolder called 'src' and a subfolder called 'bin'.
- Create a file called template.html and put it in your src folder.
- Put your content (and just the content, not the template fluff) in your html files in src as well.
- Run the SiteBuilder.exe. It will apply the template to all your html files and create appropriate files in bin. It will also 'compile' your css files. (Details below). It will continue to monitor the folder for any changed files so you don't have to explicitly run SiteBuilder every time you change the html or the template files.
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,
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
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).
This program and its source code is licensed under the BSD 2-Clause license.
Last updated August 19, 2013.