[Tech Notes] How This Site Was Made

📌 Late June 2021
June 28, 2021

Updated Mid-May 2022

The base of the site

This site is only HTML, CSS, and just a few non-essential lines of Javascript (to make the entirety of each “card” on the homepage clickable, not just the link title).

Hugo stitches it all together:
This site began with Publii, which is a great easy way to generate a static site.
But wanting more control over the code, I switched to Zola, a wonderful static site generator.
For more flexibility and to assuage longevity concerns, we have now landed on Hugo for our static site generator.

Hugo assembles the blog from various pieces of HTML and Markdown, but each piece of our website’s template is handmade. (More on the virtues of handmade websites)

Built for speed

There are no database servers, Wordpress installations, Javascript libraries, streaming video, CSS frameworks, cookies, ads, trackers, beacons, web fonts, analytics scripts, etc. This makes Hinnz easier to maintain for me and faster for you.

The homepage, including images, CSS, and tiniest bits of javascript, is well under 100KB (actually closer to 50KB) and scores a 100/100 on Google Pagespeed Insights. I will try to keep all pages under 100KB unless they contain a bunch of images, which I will naturally take steps to reduce in size.

The site’s performance is tested regularly with various tools. Server-side compression is used to speed up the site’s load time.

Screenshot of Hinnz.com in Links, a text-only browser

This site even works in text-only browsers like Links (as long as they support https).

Tools used to make Hinnz.com

I prefer open-source software and services that are budget-friendly for hobbyists and students and everyone. Here are some of my favorite tools that are used to make hinnz.com:

More information about how this site was made can be found at the following posts:

If you have any specific questions about the site, please feel free to contact me.


No comments yet.