Hugo

What is Hugo

I created this site using "Hugo"

As we read on the official reference site, “Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again..”.

Several months ago, while surfing the web, I found this resource and immediately wanted to try it out.

I was very impressed with the idea of being able to work - in a simple way - locally and then make the “deploy” (the transfer) of the content elsewhere (a server, AWS S3, etc.).

Why Hugo

The choice of Hugo is related to several factors.

1. Creating a website in a few steps is simple, and the speed of execution in both the creation and deployment and use phases;
2. Writing posts using the language Markdown (at this link, you will find some links to deepen) or even Multimarkdown (more extended version created by Fletcher Penney). This type of language allows you to use pure text adding markups (e.g., for formatting with bold, cursive, etc.). I’ll talk about this in a future post anyway.
3. The advantage of being able to configure the site directly from the config file, allowing - for example - to add or not in the posts HTML code (for obvious security reasons);
4. The advantage of customizing the site template, if you know HTML or Java.
5. The advantage of not having cookies since it is a static site.
6. So many others that it would be too long to list here now …

How to install Hugo

The Hugo site contains sufficient documentation and, of course, also instructions for the installation.

In my case (Mac) I preferred to use the Hugo installation via Homebrew with the following command:

brew install hugo

Those who have not yet installed Homebrew on their Mac can do it by following the instructions on the site. In particular, opening a Terminal window is sufficient to paste the string on the site of Homebrew, and that is:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

At this point, Hugo is installed locally.

To create a new site, always from the Terminal window is sufficient to digit:

hugo new site sitename

Where sitename is just the name that you want to use for the site, specifying that it does not affect the site’s configuration; thus, you can indicate instead of sitename any word, even a fancy one.

It’s good to know that Hugo creates locally (i.e., on your P.C. or Mac) precisely in the folder where you execute the command a folder called sitename, which contains other files and folders.

So, as I said, you could use a word instead of sitename (usually the name of the site you intend to build).

I suggest saving the folders of each created site inside the main folder (I made the main folder in Documents that I called Hugo; in this way, the folders of the sites will be inside Documents/Hugo/).

How to use Hugo

Once installed locally, Hugo generates six folders.
Running the command ls -la we can see the list of files. In summary we will find the 6 folders:

1. /archetypes
2. /content
3. /data
4. /layouts
5. /static
6. /themes

And the configuration file, which is called config.toml.

However, it is necessary to use a theme to choose among the many free available ones.
Once we have chosen the theme that we like, it is sufficient to execute the commands - always from the Terminal - indicated by who has developed that theme.
As indicated on the Hugo site, supposing we want to install the theme ananke that is on GitHub, we’ll have to type from the Terminal:

cd sitename

git init

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

In the end, in the themes folder, the system will create another one related to the theme you have chosen.

Next, you need to edit the config.toml file to configure your site by adding the necessary parameters.

Once the configuration is complete, you can run the command from the Terminal

hugo server

and with your browser, reach the URL http://localhost:1313/ to view your site locally.

Please refer to the Hugo website for more detailed instructions.

Follow us on Mastodon

Stay tuned!