That’s what you do under the Coronavirus Lockdown, right? Rebuilding your personal website.
After a few years of running on Wordpress, I made the switch to Hugo. I found a database system to be too much of a hassle to work with. Finally, the switch to Gutenberg would have meant for me to implement a new content system if I wanted to stay up to date. Markdown just seems so much easier to write (via VS Code), manage (via git) and store (just file-based).
I love tinkering around just for the sake of it, so I started to write my own static site generator as a side project to learn Golang. Pretty soon I realized how much work that turned out to actually be. My to-do list just didn’t stop growing. Also, it seemed to already exist a project that already did exactly what I wanted. Enter Hugo.
Hugo allowed me to separate the Static Site Generator from my theme and my content. In order to keep as much of this site open source without exposing my content (including drafts and unpublished posts), I put each in their own repo and include the content and theme as a submodule. No excuses for not working in the open!
Writing a theme
What’s the fun relaunching your website without writing a theme?
My goal was to focus on Privacy, Accessibility and Progressive Enhancement and gain some nice performance boosts as a result. I think it worked out well.
On Progressive Enhancement
I wanted to use no node modules in my production code, since those tend to become hellish dependency traps and quickly bloat up everything. However I failed on this one and ended up using Verlok’s awesome Lazy Loading script (at least until I eventually write my own). For everything else I used a collection of handy scripts and helpers written in vanilla JS that I keep around for cases like this. I plan to write up on them in detail in future posts, too!
Hosting on asteroids
Despite having a static site now, I didn’t want to go all the way to a Serverless setup. I’m hosting on Uberspace and I’m very happy with the amount of control I have over my webspace. I’m also putting this behind a CDN (Cloudflare in my case), so I can have really fast loading times from anywhere.
I integrate social media interactions via bridgy. They crawl every 30 minutes, so your comments may take some time to show.
My deployment strategy has become more complex. That’s becoming more noticeable now, as I’m deploying with every content change. I need to update the content repo, the submodule in the main repo, build the site and refresh Cloudflare. Luckily, all of this can be automated by Travis and bash scripts. The added complexity stays, though.
Hugo doesn’t support WebP just yet, so jpegs will have to do for now. Same goes for gifs. Resizing them in Hugo strips away their animation, so I can’t have gifs in sourcemaps.
Also, I’ve written some weird workarounds for missing functions that I hope to see implemented natively at some point.
All in all, I’m really happy with what I’ve come up with. My site has become more versatile, faster and safer with the switch to static content.
With the rebuild, I’ve also got rid of some old content. I’ll be shifting my focus more on tech and web development.