Bye bye Wordpress... Welcome Hugo!

2022-02-06 3 min read fud0

Finally, after a long time, I am back to post with a simple but important news. The dismiss of Wordpress for blogging and the migration towards something faster and simpler like Hugo. On the one hand the desire to abandon a framework perpetually “under attack”, on the other the desire to try something new. In fact, in recent months I have heard from more than someone about Hugo and its ease of use.
Mostly chosen by people like me, who likes to use often Markdown language to write their own documentation.

This blog will basically be a static site so I said to myself, why not choose it?

In the past few days, I have therefore started working on the transition. Not that I had written many articles, but I still had to “bring them” and do the due experiments with the chosen theme. A few small adjustments with the theme and here we are, “again” online.

Here is a quick recap of the most important things that emerged during the working sessions with Hugo in this initial phase:

Main Page: https://gohugo.io/
Hugo Installation: https://gohugo.io/getting-started/installing/
- Tip: as suggested in the guide if you are in some Linux Ubuntu-based distro (PopOS! in my case) go directly to the release page.
  Avoid installing using apt-get. You will end-up with an obsolete version (i.e 0.80 vs 0.92.1). I personally noticed it during the tests with the shortcode Twitter facing issues.
- Choose a theme that is right for you but above all that supports the features you need and is up to date and well documented. In my case, I choose the theme Bilberry.
Configuration File: Hugo main one is config.toml inside your project root folder.
- The file is well documented with instructions on what every option does.
- It’s important to configure the following flag whenever the baseURL it’s not the website root:
```
canonifyURLs = true
```
The themes usually contain a folder with examples of pages, articles and more other snippets useful as starting point when creating your own project.
In case of the Bilberry theme, there is a folder called “exampleSite”.

Most important Commands:

# start an internal webserver allowing to test live the modifications 
hugo server
# generate all the stuff to produce the final web site version
hugo

Simplified i18n support:
- languages supported must be configured in th proper file config.
- files must be properly created, using the sub-extensions. For example: mio-articolo-sul-blog.it.md
- verify the support for i18n provided by the theme and how it can be properly configured
Modifications to layouts and CSS:
- it might be necessary to edit special “partial templates” to modify the behavior of header, footer or any other page
- verify how the theme related CSS files can be edited. It might be necessary to re-compile .scss files using npm.
Adding Favicon to your own website/blog:
- find folder layouts/partials/favicon.html
- check, as suggested, the website https://realfavicongenerator.net/ and follow instructions, maybe uploading a personal photo
- copy the content generated by the hugo (server option) tool. Look at folder static
- replace in the file favicon.html some tags, links and meta previously generated

For any further details and insights it is always important to consult the official guide of both Hugo and the chosen theme.

That’s all, so see you next post!