nsg's blog

Migrate to Zola with a new design


I had some time to thinker with the blog over the last days. There has been a lot of interesting things invented since I last looked deeper at CSS, like flex and grid layouts, animations. Yeah, I have been out of the loop since forever.

I have had the current theme since 2017, that's five years. I picked the old one because I wanted something clean with focus on the content. This was the second iteration of the hugo based blog that I have been running since 2016.

I have been using Zola on another site and I find it really nice to use. It's made by a old Hugo user so it's quite similar. Different language, frameworks and template engines ... but still they are really similar and easy to understand. Maybe not a huge improvement compared with Hugo but it's a fun thing to do, so let's port this site over to Zola!

The old design

The old design is based on blackburn. It's a simple design with monochromic colors and an out of the way design with a focus on the text. I did not write this and I never understood Hugo templates that deep so I had only done minor adjusments.

I actually started writing this blog post in Hugo, and now I finish it under Zola. Zola actually renders the markdown unmodified from Hugo, just a few minor adjustments where needed for full functionality like tags. The sharp eyed notice that I have rewritten some of the text, feel free to read the screenshots if you like to read the first draft of this post.

I also liked the yearly list of posts showing off the blogs age with posts going back all the way to 2005. I will probably try to keep some of these aspects in the new blogs design.

Zola & the new design

The entire site it written from scratch, HTML, CSS, JS and Zola Templates (Tera). I tried to replicate the pattern from Hugo that I liked, I also took the time to improve a few things when I changes things anyway.

It felt like a good idea to start with light and dark mode. I have never written this before so I ended up with a non-optimal solution that needs to be improved later.

I picked the color scheme that the old site used. The site is centered with a much larger font size with a lot of space between the elements. The screenshot above is the first page after my first coding session.

With a lot of inspiration from the old site I continued to implement the first page. A new thing that I wrote is image thumbnails. They are also gray scale like the rest of the site.

I replicated the clean feeling of "just a list of posts" under the archive section. Just a simple formatted list with dates. I used the same type of layout for the "all tags" page.

I also added a nice little message telling visitors that posts before this point in time is written in Swedish. One of the nice things by having full understanding of the template language.

I have also added a lot of minor adjustments like a warning message that shows on old blog posts that the information may be out of date. I also added a search function to the site, Zola can generate a search index for Elasticlunr that I then can write some JS for.

There are some minor tweaks and adjustments I need to make. I will now declare victory and say "good enough" and release this new design to the world!

See you!

All these 667 words are written by Stefan Berggren, feel free and contact me if you like.