How to install Hugo website generator on Ubuntu 20.04

Writing websites from scratch can be beneficial for learning but it is time-consuming. And there are simple or personal projects that need to be done quickly. To solve this problem is that there are static website builders. Today you will learn how to install Hugo on Ubuntu 20.04 which is perhaps one of the most popular website builders out there.

Introducing to Hugo

Hugo is a static website builder, that is, it does not include PHP or any programming language to process data, it is open source and created in GO language.

Thanks to Hugo and its large number of themes, we can deploy a static website very quickly. Hugo allows you to write content in a lightweight markup language like Markdown and get websites that can be published on any server. The interesting thing is that once the web documents are generated, no special application is needed to read them. They are static contents.

As easy as it is to use, with Hugo we can create very good websites with a minimum of effort. As it is created in the Go language, the time in which the pages are built is ridiculously low which makes it possible to generate large sites without any problems.

So, let’s install it.

Install Hugo on Ubuntu 20.04

Fortunately, Hugo is available from the official Ubuntu 20.04 repositories.

So, to install it, all we have to do is run this pair of commands in the terminal.

sudo apt update
sudo apt install hugo

This will install the hugo package which is enough to get the job started.

However, this process although too easy does not provide us with the latest stable version of Hugo, so we would be missing out on many of its new features and bug fixes.

The alternative to this is to install the version of Hugo from the official repositories.

sudo apt remove hugo

And then install the snap version which will give you the latest stable version without too much trouble-

sudo snap install hugo

Now you can have an updated version of Hugo on your system. This process is safe because snap is Canonical’s own technology so the integration with the system is guaranteed.

So, check the installed version of Hugo with the following command

hugo version
hugo v0.88.1 linux/amd64 BuildDate=2021-09-04T13:52:29Z

First steps with Hugo

Creating a new website with Hugo is quite easy. To do so, just run the following command

hugo new site [site-name]

In this case, I will create a site called atechexample.

hugo new site atechexample

This will generate an output screen similar to this.

This will generate a new folder with the name of your website, in this case, atechexample which we will need to access.

cd atechexample

Using the tree command we can have the directory structure of the site that has been created by hugo.

tree .
Hugo site structure
Hugo site structure

One of the things that make Hugo so popular is the large number of themes available that we can quickly add a touch to our site. So the next step is to download a theme for your site.

So, with the help of git start a repository of our website.

git init
Initialized empty Git repository in /home/user/atechexample/.git/

Install a new theme and creating a new post on the site

Then, take a look at the huge amount of themes available for Hugo. In this case, I will choose tale.

git submodule add https://github.com/EmielH/tale-hugo.git themes/tale

And now we need to edit the configuration file config.toml to specify the language, title, and theme.

nano config.toml
baseURL = "http://atechtown.com/"
languageCode = "en"
title = "Example"
theme = "tale"

Save the changes and close the editor.

Now we need to add some information to the new site. Creating a new post with Hugo boils down to just this command

hugo new posts/[postname.md]

For example

hugo new posts/sample.md
/home/user/atechexample/content/posts/sample.md created

Of course, you can replace post with another menu you want to create.

This will generate a file that we have to modify and add content to in markdown format.

nano content/posts/sample.md

First, set the file information

title: "Hello world"
date: 2021-09-10T12:07:37-04:00
draft: false
---
Creating a new post with Hugo
Creating a new post with Hugo

And below the content. Remember that the value draft: false states that the post is not a draft and can be published.

Save your changes and close the editor.

Now let’s look at the results. To do this we are going to launch the website with the command

hugo server -D
Hugo building the site
Hugo building the site

And the output screen will tell us that we have to access http://localhost:1313 to access our site.

A new site created with Hugo on Ubuntu 20.04
A new site created with Hugo on Ubuntu 20.04

As you can see we can quickly get our site up and running.

To put it into production, run the command

hugo -D

And it will build everything you need. Especially the public folder that you can upload to your server and put into production.

Note that documents with draft: true are considered drafts and are not published.

Conclusion

Hugo is a reliable and fairly easy-to-use static website builder. Installing Hugo on Ubuntu 20.04 is a simple process as is creating a website with it. Now that you know about it you can try it for your projects.

Share our posts and help us to grow.