How did I create this site?

In this article, I explain how I created this website using Hugo framework. I also give the code of the Node.js script I wrote to publish my site content.

What is Hugo?

Hugo is a static site generator. It allows you to create a websites using the Markdown language. The site consists of pages containing text, like articles. It is also possible to:

• display highlighted source code
• add links within the pages
• embed videos, music, etc.

See https://gohugo.io/

What is a static site?

A static site is a website which can be displayed in the web browser directly. It means that no server is required to build your pages, or to get additional data. The server simply sends the HTML, CSS files and pictures to be rendered in the web browser.

You can create a static site using HTML and CSS only. However when you write articles and blog pages, you need to focus on the content of the page. Not on the HTML or CSS code. This is the purpose of static sites generators (SSGs) like Hugo to generate the HTML and CSS code for you, making it easier to publish hundreds of pages.

Markdown

Markdown is a markup language used to write text content, such as documentation or articles. It is very common in the software development field. For instance the Github and Gitlab platforms uses this language to display projects documentation in the web browser. Any developer can write its project documentation in a README.md file (.md stands for Markdown), and other project contributors can read it from the website directly.

This is how I discovered and begun to use Markdown in my work, through Github and Gitlab. I found it so useful and confortable, that I decided to use it to write any documentation or article. Since Hugo allows me to use Markdown, I decided to use Hugo to generate my website.

Generated static pages

As soon as you finished writing your article thanks to Markdown, you can generate your static site. Use the command line tool provided by your SSG. For instance with Hugo, this command will convert in a public folder the site source code to an HTML and CSS code readable by the web browser.

hugo

As simple as that! Now you can copy the entire public folder in your server www folder, and your site is online! A simple Apache HTTPD Server can serve your website. No other framework (e.g. PHP, Node.js, etc.) is required.

How to setup Hugo?

To use Hugo as your SSG, you’ll need to

• install it,
• pick a theme fitting your needs,
• configure Hugo:
  • the site name,
  • description,
  • author name,
  • etc.,
• configure your theme:
  • the author avatar,
  • the available languages,
  • the menu,
  • social networks links,
  • different theme options,
• create your first post.

Then you are ready to write in Markdown!

Everything in your Hugo site is source code though. So it’s more developer oriented. Your site source code can be versionned using Git. And depoyed automatically, as we will see at the end of this article.

Hugo vs others static site generators (SSGs)

They are other static sites generators like Jekyll, Gatsby.js or Gridsome.

If you wish more information about Jekyll and to compare it with Hugo, I advise you to read this article from John Wordsworth.

I tried Hugo first, and I’m happy with it. It fits my needs well. I was looking for a good theme to display source code in my articles, I found a good one. The advantage of using Markdown to write articles, is that you can change your SSG relatively easily, compared to classical CMSs like Wordpress.

Hugo vs Wordpress

A well known CMS alternative to Hugo is Wordpress (maybe the most famous one). Even if it’s not a static site generator, it is among the most used tools to create blogs and articles.

Themes

I tried Wordpress in the past. It was a good tool. However I felt like it was too complicated to customize themes and fine tune pages rendering. I found some gorgeous themes with a good rendering. But themes configuration can be so complex with Wordpress! And to render source code properly in your articles you need to install additional plugins, whereas it’s a built-in feature in SSGs.

With Hugo I feel like I’m having the full control of what I’m doing. And themes configuration is mostly well documented by theme creators.

Backups and database migration

In Wordpress, articles must be written in a user interface and they are stored in the Wordpress relational database. Which makes it difficult to backup articles and move the website physical location (if you need to change your website host for instance). Indeed if you must move a Wordpress site, you’ll need to export your current database, then import it in the new one. This is really a pain in the *ss and nearly impossible sometimes…

Hugo articles are written in Markdown and everything is ‘as code’, including the configuration files. So it makes it perfect for developers. It’s also so easy to backup the website content since everything can be stored in a Git repository. Is your server lost or did your host disappear? No problem! You have a copy of your work in Github, Gitlab, or any other platform. You also have a copy on your computer. You can republish your work anytime by just uploading the generated static site on any other web server. Cherry on the cake is that Git saves all your modifications history. So you can dig your Git history to find what and when you modified anything. It make it also easier to collaborate, since Git in done for that.

Hugo a tool made for developers

The biggest difference between Hugo and Wordpress is that Hugo is done by developers for developers, whereas Wordpress is more user-friendly and better for non-developers. Since I love source code, my choice is simple: Hugo! 🫶