Free blog with less than 10kb

A couple of weeks ago I finally bought the domain I had my eyes on for a while: max.hn. Not only does it give me a memorable and quick to write email address (which is super handy now that you need to leave your contact details in every restaurant), but it also gave me another reason to investigate a new hosting setup.

Although I have been a happy uberspace customer over the past years, my expectations towards hosting providers for my own website have shifted. When I started to learn more about node.js and backend in general uberspace was great, since it offered a lot of freedom to experiment for an affordable price.

Now my requirements for hosting are:

When uberspace announced that they’ll stop supporting the current version of their software my websites are running on, I knew that I don’t want to spend any time upgrading servers and should look for alternatives instead.

#Trying Next.js and vercel

At work I had recently evaluated Next.js and vercel, which have been around for a while, but only their latest versions have an API that is minimal and flexible at the same time. In combination with static site generation and vercel’s network of CDN’s around the globe, one can achieve really good performance with React without spending a lot of effort.

Therefore I built the first version of this website in Next.js and the results were good. It had over 90 points in Google’s Lighthouse performance test and it was on par with the Cloudflare cached version of my previous setup.

#Performance is key

I could have sticked with that setup, but via hackernews I stumbled upon Tom MacWright’s website. Its superfast page loads and minimal design made me stay on it much longer than I usually do (besides its great content). Finally I’ve been on a website again which puts zero obstacles between visitors and content. As you might see my new website is heavily inspired by his.

Especially this post about how he started optimizing his website and ended up with about 15kb inspired me to turn the performance dial up to 11 on mine as well. Currently mine weighs about 8kb (for posts without images) and my goal is to keep it at about 10kb. It has no web fonts, no cookie banner, no tracking, no client-side JavaScript, no external CSS, no CMS and no costs.

The reason it’s free is that vercel has a generous free plan for personal use. Considering it has super fast performance, great documentation and the best GitHub integration I’ve seen so far, it was a no-brainer to use it for my personal site.

#No to client-side JS means no to Next.js

Since my goal was to reduce the page weight to a minimum I had to drop Next.js as well. Although it can export websites to static versions, it still loads React and other JavaScript files. Luckily vercel supports a bunch of static site generators. Sadly it also meant I had to spend time evaluating which one is the simplest.

To keep it short I ended up using my own static generator, which I had actually built five years ago! Turns out I did a pretty good job back then. The CLI tool takes a folder with markdown files and passes them to a JavaScript function, which receives the unprocessed markdown, meta information from frontmatter and file infos like the path.

The only thing this function needs to do is resolving a Promise with the final HTML. It could use React or some other library to render the HTML and load some additional data from a server. It also has no opinion about which markdown compiler to choose. I ended up using plain JavaScript string templates and very few functions for things like formatting dates.

It doesn’t get much simpler than that and that’s what I’m after. I don’t want to reimplement my website at some point again. It should work for years to come without me having to update libraries or packages.

#remark and rehype

Nonetheless to compile markdown I needed a dependency. Via vercel’s documentation I quickly stumbled upon remark, which has a couple of great plugins to support additional Markdown features like footnotes, auto-linked headings and automatically adding the rel=nofollow attribute to external links.

Once markdown is compiled I pipe the final HTML through rehype, which is built by the same community and offers further transformations like minifying HTML and highlighting code blocks on the server instead of the client.

#Conclusion

Performance on the web is still heavily underrated. My takeaway from this is that all websites we build at diesdas.digital should get a performance budget. I will also set up speedlify to automatically measure their performance over time.

We need to stop putting so many barriers between people and the content they want to read. Move as much logic as possible to the server, remove all JavaScript from the client and let designers get creative with system fonts and SVGs.

Content first!

@max_hoffmann