With my last article I also changed the appearance of the website. What you can see is a new look of the website. Behind the scenes, I moved from Ghost to Hugo. During the process I also noticed an easy way to improve the page loading times.
Moving from Ghost to Hugo
I have been really happy with Ghost so far since I first started building a website.
It was relatively easy to set up and there are many good looking themes to choose from.
In fact, I am really fond of the theme I used (a theme called phantom which has been discontinued).
But in some ways the Ghost editor felt like there was too much going on beyond my control.
What can be a huge advantage for others bothered me.
I am invested in details.
I wanted to set the filenames of the pictures I was using, place files in specific folders on the server instead of being dependent on the system, and so on.
In addition, Ghost is based on node.js and needs to run as a service (which can fail) that I have to take care of.
Hugo is a static website generator. In contrast to a dynamic website built with Ghost, Hugo uses Markdown files (everything is file-based in Hugo) which are converted to simple HTML files which in turn can be loaded and displayed blazingly fast. But having simple HTML files does not mean you can’t customize the appearance. To the contrary!
The agony of choice
And there is much more where these came from!
The first and probably most influential step you have to take is choosing a theme. The sheer number of high-quality themes can make it very hard to select the one you want to use. And since full interoperability between themes is not a given, you may need to spend some time converting your content from one theme’s structure to another one’s if you change your mind. For me, this was the part I found most difficult. I really liked the clean and minimalistic look of my old blog.
But I am also a visual person who enjoys images next to the content and eventually I settled on the Nederburg theme (after experimenting with tracks). I probably will continue tweaking how the page looks but that is part of the fun, I guess.
Working with the new site
I won’t go into detail how to configure and set up the website since there are so many good resources out there. What I really liked about how Hugo handles the content is that all the settings are exposed via a configuration file so that I can directly tweak them either for the overall page or for just one piece of content, be it an article or something else. I can also manage the website in a git repository to save the current state. Writing only requires a text editor. When I want to publish new content I only have to copy the changed and new files to the webserver and that’s it. Even better, the process can be automated using git hooks so that the site gets updated whenever changes arrive in the git repository.
Saving precious bandwith
During the conversion of the website I also noticed that the images I previously uploaded via the Ghost editor were really big.
In order to reduce the amount of bandwith that is needed when loading the page I scaled all the header images for the articles down to a width of only 1280 pixels.
Additionally, I saved them as .webp files.
You can read more about the file format in the webp Wikipedia article.
I hope this helps bringing you a satisfying experience on the site.
Cover image by Sushobhan Badhai
