Design

Design

This page describes the design of this website. I'll be updating this as I go along.

Stack

The website is rendered using the Zola static site generator; this allows me to write content in .md files. Zola has a simple process to build and minify the website, but I also complement it with Lightning CSS for transpiling CSS as I have observed a ~31% difference in the resultant file size. Each page is tested locally using a custom script that relies on Playwright and Lighthouse. After this, a spellcheck is run using CSpell and then deployed to Firebase.

I started out with the Hugo SSG and it is perfectly fine, but I wanted to try something new. Perhaps my only complaint with Hugo would be that it doesn't flush out orphaned files, and I grew tired of having to manually delete them during development. Zola comes with built-in support for Sass, which makes migrating all the more worthwhile. The way Zola handles slugs is somehow more messy yet intuitive to me. Another thing I'm hoping to try in the future is a different theme for a new section of the site. This is much easier in Zola.

This site is pretty minimal but does require some libraries to make it look nice. I've been using KaTex for rendering LaTex. Initially the KaTex CSS file was being fetched by default, adding some avoidable network overhead. So now it's disabled by default and only loads when I explicitly state that a certain blog needs it. I was also using highlight.js for syntax highlighting but I wasn't happy with the load times, especially as this is was render blocking. If only there was a way to pre-render the syntax highlighting within the HTML - and there is! The inbuilt syntax highlighting in Zola does exactly that. The website now loads much faster.

UX

The theme was designed from scratch to be very minimal, but not bland. It's a simple colour palette with green primary and accent colours.

Primary color representationSecondary color representation, superimposed

This site's pretty new so a lot more tweaks will be added in time, and I'll be sure to update them here.

License

All content on this site is licensed under CC BY 4.0.