Why?
The old site was terrible, which is why I started from scratch. My old site was supposed to be a dynamic page with lots of features and little helpers, but I never followed through on that, so it became a static page served by a backend that only served some HTML content, which is quite inefficient in my opinion. The old site’s source code can be found here. It’s a Go application that runs Fiber, which isn’t necessarily a problem in and of itself, but the server already runs a reverse proxy, Caddy, which begs the question of why Caddy couldn’t simply serve the HTML content.
Oh, and the old layout was made in an afternoon, and it was never well thought out; it never included a header or other pages or even a blog section. So now the site has been redesigned, which is much better.
The new setup
Because I wanted the new site to be served directly via Caddy, my new setup had to compile down to the actual content I wanted to serve, also known as static pages. The ecosystem is very vast out there for static page generators, and therefore it was hard to make a choice for which static page generator I would settle on. My first choice was Hugo, due to it being quite popular and being a Go application (which gives me a good measure that’s likely great in performance), but after trying it out, I quickly realized that this choice isn’t great if I just wanted to focus on the content because it uses Go templates, and while I’m quite familiar with them, it will personally never feel natural for me to write them, and I don’t want to revert to only writing markdown pages.
So looking further around, I saw a familiar name, Astro, which is being used for the Forgejo website. While I do have a slight distaste for the Javascript ecosystem and their every function is a new package attitude, I still gave it a try. While it’s still not near perfect as I hoped it has been, it’s vastly better than Hugo and the performance was actually quite reasonable, after hacking the resvg-js package1. I was surprised the level of customization (especially for markdown plugins) and how easy it was to generate dynamic content into static pages. I like it, it seems well maintained, so definitely a good future-proof solution.
The new layout
To get an idea of the old layout, visit the the wayback machine, it was terrible and even that is an understatement. It uses cards, out of everything I could have chosen, I chose cards, I still have no idea how that was better, it was probably easy to get it working with CSS ¯\_(ツ)_/¯. Don’t get me started on the color choices, I had my dog type some hex codes. Fortunately, the old site is not such a disaster, it did a few things right, it uses correct HTML semantics (to make it more accessible) and when reloaded it transferred only 40.68 kB of content, it also achieved 100 scores on Lighthouse.
For the new layout, I went pretty radical compared to my old layout. I chose a monospace font instead of a sans font, so that Agent Smith and I can read the website better from a monitor.2 Shockingly, I didn’t use any cards and simply put different type of content into different kinds of pages, as it should be. The site is now mobile-first, which means no more use of the full width, which makes it easier to read content, the width should be around 66ch, but this is still an WIP.
For some bizarre reason I decided to try out TailwindCSS, I had heard great stories about it, a revolutionary invention that lets you write content more efficiently and never have to worry about CSS again. Well, I am still using it but I will replace it soon, it is not my type of thing, I prefer to manually write CSS classes and such in a split buffer rather than trying to guess what size py-4 and py-3 is and apparently if you are talking about different topics the -3 suffix will suddenly not be the same size. I can very well believe that it is very efficient to write CSS, but I am quite picky about my CSS and I have had my issues with Tailwind to the point that I actually went back to doing CSS manually via Tailwind (which I had to revert, in the hope I suddenly got the spirit of how Tailwind thinks we should write CSS).
Remarks
The old site was a disaster, the new site is only marginally better, but at least I’m enjoying working on it again, because ultimately this is just experimenting with software and tools to expand my experience. I only wish I had done this earlier, by trying to use Astro more(with the Forgejo website) or put more effort into my old site while I was making it, so I didn’t had to redesign the site. I hope this site lasts a little longer and I will enjoy it much more. The source code can be found here under the MIT license.
I know no one will read this, but I don’t really care, this is just a diary so I don’t forget why I made certain justifications for this site, and also to give some insight if anyone is really interested in reading this.
Footnotes
-
Apparently they have a function to figure out if the system is using Musl or not and to load the correct compiled node package. For some absurd reason,
process.report.getReport()will hang for exactly two minutes before returning any information. The closest explanation for this behavior that I could find is an issue on the Node issue tracker, nodejs/node#46060 which seems to suggest my networking on my PC is broken. Anyhow, currently I’m replacing this function to always return false and not execute that particular piece of code. ↩ -
This is an Matrix reference, Agent Smith is potrayed as an robot within the Matrix and is seen within the movie reading papers with a monospace font, because monospace fonts are easier to process and read by computer vision. ↩