I have recently gone through the painstaking trouble of rewriting my homepage at geraldwu.com. I have tried to make it as simple, readable, and lightweight as possible.
Trimming the bloat
What’s even worse about the old site, was that it was dynamically generated. Every time somebody hit my website, my web server would do a call to a MariaDB instance, fetch all the data with SQL queries, and process the final result. Only then would it send the actual page back to the client. For what reason did I do this? No really, why did I do this? The content was all static anyway. It simply wasted CPU cycles server-side.
The new website’s HTML and CSS is less than 5KiB transferred over the network. When you include all the images for projects and logos, the entire webpage weighs in at only 54KiB over-the-wire. This is thanks to the magical work of image compression, gzip at the webserver level, and most importantly, no modern webdev bloat.
A new deployment method
Since the new website is a sort of résumé, I found this to be a perfect target of a homebrew static site generator. I whipped up a quick Python script to generate the website from a YAML configuration file and a Jinja2 template. To add an entry to any section of the site, I only need to add an entry into my very human-friendly YAML configuration file, and run the Python script to regenerate the static site. Full details and code in the git repo.
But wait, there’s more!
It would be annoying to constantly generate and upload the site myself. I would have to remember to run a single
rsync command to my webserver every time I update the site! Now that’s just too much work. So instead, I took advantage of my self-hosted GitLab’s CI/CD features, and wrote a CI/CD pipeline for my static site generation. Now, whenever I push an update to my git repo (be that for the config file, new content on the site, or just a general bugfix), it will trigger the GitLab CI/CD to build the site automatically and deploy it to my webserver’s root. All without me lifting a finger.
As an added bonus, I can embed automatic pipeline environment variables straight into the webpage at build time. If you take a look at the bottom of the page, you’ll see some cool stats about the git commit and pipeline that built this iteration of the webpage:
Using the media queries in CSS, geraldwu.com will read your system’s theme (even on mobile!) and will alter the theme of the site to light or dark mode to respect your system’s settings.
I’m relieved I finally had time to scratch my itch and redesign my website from the ground up to remedy this problem.