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 .
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://imaginelinux.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 ---
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
And the output screen will tell us that we have to access http://localhost:1313 to access our site.
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.
