Blog It Yourself - Hugo

First and foremost, it is important to understand that this is not just a technical solution change, but a change in mindset. WordPress or Ghost are software that expose a website along with writing and administration tools. In contrast, Hugo is just a site generator. It takes a theme and a list of content and generates HTML pages …​ that’s it!

In other words, all the creation, management, and writing of the site is done on the owner’s computer. In return, the generated pages do not require an API or any server to feed them. So, the site is not "hackable" as such. It all depends on how these HTML pages are hosted, of course.

Whereas WordPress and Ghost provide real-time publishing of the modifications that are made and thus lose the previous version, Hugo simplifies things greatly: it is very easy to version the "text" files that make it up, via Git.

Therefore, you can version the site’s content (blog posts, etc.), as well as the site’s theme itself. This allows you to revert back after an unfortunate update, for example, without having to remember the 36 modified options in a WordPress installation.

It should be noted that there are dozens of static site generators with different characteristics, written in different languages, etc. I invite you to check the list on the [JAMStack website](https://jamstack.org/generators/) (and also learn about JAMStack, although it is not precisely the topic here).

Among its direct competitors (Jekyll and Gatsby), Hugo stands out by a small margin in terms of GitHub stars, if that is an important indicator when making your choice…​

Let’s say you decide to go with Hugo. Once the tool is installed on your computer, you still need to find a theme that fits your needs and tastes. Fortunately, everything is provided on the [official themes page](https://themes.gohugo.io/). With good theme categorization and demonstration sites, it is quite easy to find what you’re looking for.

That’s how I found the theme created by [Eddie Webbinaro](https://webbinaro.dev/), aptly named [Resume](https://themes.gohugo.io/themes/hugo-resume/).

Can’t find what you need? Don’t panic! While you can create your own theme (as described in [this post](https://retrolog.io/blog/creating-a-hugo-theme-from-scratch/), for example), know that many themes are not listed on the official page, so you can do your own research.

For example, I found a Hugo version of Ghost’s default theme with a quick search. That’s how RoxTheCasbah didn’t even change its appearance when it migrated from Ghost to Hugo! And if you’re interested, this theme (Casper 3) is available here.

Similarly to creating your own theme, it is also possible to modify an existing theme. However, be mindful of the license attached to it!

For example, I didn’t need certain sections offered by the Resume theme I mentioned earlier, so I removed them and added other pages, etc. The same goes for improving the display of a blog post according to my preferences.

However, it should be recognized that modifying the theme can quickly deviate from its original version and make it impossible to update locally if the author modifies it on their end.

Additionally, Hugo comes with very handy default behaviors, but they can also be quite restrictive. For instance, by default, Hugo uses the description front matter entry in a Markdown document to generate the <meta name="description"> tag, which represents your page on search engines. Be careful if you named it something like extract (which can be very logical) because the page will simply have no description, which is highly detrimental to SEO on Google!

Is your theme in place? Now it’s time to add content to your site!

And for me, this is the best moment to realize the power offered by Hugo: everything can be "markdownified." In other words, all the content of your site can be written in text files in the default Markdown format. This means that to modify the content of your "Home" page, there’s no need to search for which HTML file contains the information. Simply find the home.md file, which is likely located at the root of your project.

I mentioned this in an article back in early October 2021, where I discussed how it’s possible to go beyond Markdown and use the AsciiDoc language. It’s also possible to have part of the content in Markdown and the rest in AsciiDoc, which is convenient when starting with an existing site.

The Hugo documentation is very well done, and the large community maintains a help forum with valuable resources. For example, you can find the necessary information on implementing a tagging system to categorize your articles or the code required to embed YouTube videos on a page.

The site generation is incredibly fast, taking only a few seconds for a site with several hundred pages. This is a selling point emphasized by Hugo and is very practical when writing an article or modifying the structure of a page since changes are displayed instantly.

As mentioned, Hugo only generates HTML pages, so you need to take care of hosting them. If you have a server at home, this can be done without any issues, especially since you don’t need a high-powered machine to serve such resources. For others, there are free solutions!

Let’s first talk about GitHub Pages (and its counterpart on GitLab, GitLab Pages). These services are provided for free by your favorite source code management platforms.

There are differences between the two; the configuration is not exactly the same. However, the end goal remains the same: having a web page (or a complete site) hosted on a remote server accessible from anywhere.

At the same time, you benefit from the performance and reliability of these major companies. If our page becomes inaccessible, there’s a high chance that many other sites are also inaccessible at the same time.

As an example, my site and RoxTheCasbah are hosted on GitHub Pages.

We can also mention Netlify, which offers a hosting service dedicated to static sites. They provide a free version that is sufficient for hosting a site, and a paid version for more advanced features (team collaboration, etc.). By integrating with your GitHub repository, for example, Netlify can detect changes, build the new version of the site, and deploy it immediately.

Note that automatic deployment is not always a good idea, as you may end up with an unfinished article published for everyone to see. Therefore, consider manual deployment for your production site while keeping automatic delivery for a staging version, for example.

I use Netlify to deploy different versions of my site, such as versions with new features to test under real-like conditions or articles still in draft. However, I can also easily switch the "production" version from GitHub to Netlify with a simple DNS redirection change, in case the former service becomes paid or experiences a major outage.

Once deployed on GitHub Pages, the site is available at the username.github.io address, such as alainncls.github.io in my case. It’s not yet very personalized…​ And let’s not forget about the default Netlify addresses that look like stoic-franklin-0f67b8.netlify.app or reverent-stonebraker-e22885.netlify.app!

Therefore, it’s necessary to "mask" these addresses with a cleaner domain name, which is a paid operation. By the way, be cautious of offers that seem too good to be true—don’t purchase your domain name from just anywhere! Personally, I use Google’s service, Google Domains.

To summarize the positive aspects of Hugo, we can mention:

However, it’s important to consider some downsides:

Now that we have explored various technical solutions for creating a blog, the next article will cover how to write posts, even when you feel like you have nothing to say, in the next article.