A fresh new look for this site

Want to help support this blog? Try out Oh Dear, the best all-in-one monitoring tool for your entire website, co-founded by me (the guy that wrote this blogpost). Start with a 10-day trial, no strings attached.

We offer uptime monitoring, SSL checks, broken links checking, performance & cronjob monitoring, branded status pages & so much more. Try us out today!

Profile image of Mattias Geniar

Mattias Geniar, November 06, 2019

Follow me on Twitter as @mattiasgeniar

It took a bit longer than I expected but I’m happy to say I’ve migrated this website from WordPress to Hugo and introduced a new layout.

New layout for this site

My design philosophy

I’ll start by saying I’m no designer and have only limited skills with CSS or modern frontend development.

But I do love tinkering and I had a general idea of what I wanted to build. My primary goals were:

  • Speed: I want a very fast site
  • Recognisable: it can have something unique to it, not just another WordPress theme
  • Readability is key: sufficient whitespace & a nice looking font

With those three things in mind, I’m happy with the result. Since there’s always room for improvement, do reach out when you see things I can do better!

Wait, am I a “brand”?

Something interesting happened when I teased the new design on Twitter. It was still very much unfinished, but a former colleague hit a nerve when he said:

I miss the colors of the banners from your old site. It was always immediately clear that I was on a Mattias page.

What the heck is a Mattias Page?

This got me thinking about the message I wanted to convey to readers and how I position myself online. I started to think of this blog (and my online “presence” 🤮) more as a “brand”, something to pay attention to - not something that randomly happens.

With that in mind, I wanted a recognisable design/layout. I hope to achieve that with the rounded borders in the header. Every sub-category (blog, my projects, …) will keep the same layout idea, but introduce unique colors to give each section its own identity.

New site header curves

I’m probably overthinking things, but it was fun to build & brainstorm about. 😄

Fun fact: the border in the header is pure CSS, using border-radius. No images or SVGs needed!

Consolidating different sites to this one

Over the years, I’ve started many projects and websites. Each on its own URL and domain name. My idea was to make each a brand that I could promote and market separately.

I’m now moving away from that. It takes too much effort and energy to maintain every brand. Since I introduced a color scheme on this site, I could now bring each project back to this domain.

New site header curves

This is still very much a work-in-progress, but all the content from Cron Weekly, the podcast, my old domains, … will be redirected and migrated to this site.

I’m confident this is a good move for the SEO of this site, too.

Speeding things up

I started this blog in 2008 on WordPress and have been a loyal user ever since. But no more.

All content has now been migrated away from WordPress to Hugo, a static site generator. No more PHP, database or high server load. Every page loads quickly and is served by Caddy.

I was already using static page caching with WordPress, but nothing beats a pure static site. The speed improvements are noticeable.

New site speed improvement

The average response time went from 280ms down to 25ms, that’s a 10x improvement! With it, the download speed went up significantly too.

One improvement I’ll consider, if just for the technical challenge, is to introduce a CDN (or build one myself). Since the site is static, it’s easy to deploy this on a few small servers worldwide and use a DNS provider with GeoIP options to route the user to the nearest server.

I was also obsessive about keeping the number of network requests to a minimum. If you load the blog overview, you’ll see just 5 HTTP calls.

Overview of network requests

This was achieved by:

  • Dumping webfonts, native fonts (available to your system) only
  • Where possible, inline the SVG icons (*)
  • PurgeCSS to strip the Tailwind CSS framework to a minimum

(*) Trade-off is that there’s no HTTP caching for those assets, but I’m counting on gzip compression and the fact that SVGs are generally pretty small to make up for that.

If you’ve ever used WordPress, it’s pretty common to see at least 30+ requests being loaded. Every plugin has some custom CSS or Javascript or loads an additional font/image/asset/… With my new setup, I have everything 100% under control.

Losing the comments

One major downside to a static site is, of course, that it’s static. No more comments!

I’m not yet sure about that change, I might look into webmentions as an alternative to comments. I won’t use Disqus (too bloated) but I’m open to alternatives. For now, I’ll just point everything to my twitter account for feedback. I realize I’ll alienate some users that aren’t on that platform.

What do you think?

I think this new site is sort of finished. I’m looking for feedback: do you like it?

If not, what bothers you? What should be improved? Do you spot layout bugs?

You can’t let me know in the comments (there are none 😂) but I’d love to get feedback on Twitter.

Want to subscribe to the cron.weekly newsletter?

I write a weekly-ish newsletter on Linux, open source & webdevelopment called cron.weekly.

It features the latest news, guides & tutorials and new open source projects. You can sign up via email below.

No spam. Just some good, practical Linux & open source content.