[Tech Notes] How This Site Was Made
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.
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:
- GIMP image editor for editing images
- Squoosh.app for optimizing images
- Compress or Die, especially for optimizing .gifs
- Pexels is a great source of completely free images that you can use with no royalties or attribution required.
RackNerd for the Virtual Private Server used as a web host. They often have deals posted on LowEndBox and LowEndTalk.Caddy Server is our web server software; it makes configuring a site with HTTPS a breezeOur server runs the OpenBSD operating system, which is rock-solid and secure- Update: For convenience this site is currently hosted on Cloudflare Pages, but I may switch back to a self-hosted server at some point.
- VSCodium, the open-source version of Microsoft VSCode
- Firefox Developer Edition. We also test the site with UnGoogled Chromium since most users have a Chromium-based browser.
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.
Comments
No comments yet.