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:
- it should just work™️
- it should be super fast
- it should be cheap (or free)
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.
about how he started optimizing his website and ended up with about
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
10kb. It has no web fonts, no cookie banner, no tracking, no client-side
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
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.
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.