zenonet

This Site

I originally wanted to create this site in pure HTML and CSS but I quickly noticed that that was going to be way more annoying than I thought. I tried using the Hugo SSG but with that, creating a custom template was too complex for me (an html/css beginner) I quickly decided on just creating my own simple static site generator that just uses a C# library for converting markdown into html and inserts the generated html into a template.

Properties

As I continued designing the site this way, I quickly noticed it'd be cool to have an automatically generated list of posts for navigating the site. Of course, these post links needed to be filled with post specific data. I decided to save this data directly in the markdown files of the post. Now, every markdown file contains a head section looking like this:

/// name = Zen SSG
/// date = January 2024
/// description = How I created this website with my own custom static site generator

When generating the static files, ZenSSG saves those values for each post. In my post-card template, I can then use Zen SSG to embed the value of the post's name into the html.

Compilation Flags

When uploading the generated files to a sub-directory of a domain, some relative links stop working. To fix this, I need a <base> tag in the html files head that specifies the sites base directory. However when just testing the site, I use ZenSSG's integrated http server and then, said <base> tag ruins my links again because they reference an older copy of the generated files. To fix this, I added compilation flags. Now, when using the ZenSSG CLI command zenSSG serve, ZenSSG generates the files using the DEBUG compilation flag. When writing my templates now, I can use conditional compilation to only add something to the site under certain conditions like for example when debug building. Conditional compilation looks like this:

#IF(!DEBUG){
	<Things that shouln't be in debug builds go here>
}

CSS minification

At some point, I just thought I'd be cool to minify CSS in case some body with a really slow internet connection visits this site. Of course, for a small site like this, it's completely unneccessary. However I happen to really like RegEx so I got to work and within 5 minutes or so, I created the following regex:

(?<={)\s+|\s+(?={)|(?<=})\s+|(?<=;)\s+|^ +|\/\*[\s\S]*?\*\/|\n|\r|;\s*(?=})

It really just removes most whitespaces (feel free to use it in your own Static Site Generator) I implemented it into zenSSG and now, zenSSG supports CSS minification.