How did I create this blog

 Posted on 23 Oct 2023  |  3 minutes  |  the_maxtor

A personal blog has been in my endless TODO list for years. For some reason, eventually I made it.

What triggered me was reading about Publii, a multi platform software to create web site, for my poor knowledge, quite similar to Wordpress, but with a big difference: the CMS software is installed on a PC/Mac and then the site is generated. No server side code to be executed. Interesting. I give it a chance. Sadly it lacks of themes choice, the one I tried (Simple) is not responsive, and does not work well with unconventional screen size.

I decided then to look into static web site generators and I came across Jekyll and Hugo. I tried the first, using clean theme, but I was unable to find a way to customise favicon. So I switch to Hugo, where I found the beautiful hugo theme, the one you are seeing right now, and I was able to change favicon and the logo on top. Just when I was writing these few lines, I realised, thanks to what was written in the footer, that the very same theme exists also for Jekyll.

I spent couple of hours try to understand how to change the font used by the theme. I did not find any official documentation, so I started looking around and finally I successed. I’ll recap here what I’ve done:

  1. Visit this very useful website https://gwfh.mranftl.com/fonts to download the fonts and generate the css i needed.
  2. Add the css lines at the bottom of static/css/fonts.css
  3. Find all the occureences of font-family within static/css/main.css and add at the beginning of the list the name of the font specify in the fonts.css file
  4. Add the fonts file in `static/css/fonts/`` folder
  5. Add the statement selfHosted = true into the config.toml file

For some reason I did not investigate, until I did step #5, the theme kept its standard font, downloading it from Google fonts.

One other change I did on the theme was the shape of the image on top of the website, called the avatar. I didn’t like it was rounded, I wanted it to be more of a logo than an avatar, so playing around with Google Chrome developer tools allowed me to understand which css line remove. And because I’m a good guy, I share which lines I removed from static/css/main.css:

  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

  border-radius: 50%;

  box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);

By the way, I leave here few links that I looked into when creating the website:

CMS  blog