Install Hugo on Linux Mint 20 - Step by Step Process ?

Docker

Hugo is a powerful static website generator. It works by taking the content of your website and the desired templates as input from the user and converts them into a full-fledged HTML website. This tool is written in the Go programming language. It is very famous for the speed and flexibility that it offers.

Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to perform related Open Source Software Installation queries on Linux Systems.

In this context, we shall look into install and use Hugo tool on a Linux Mint 20 system.

Steps to install Hugo on Linux Mint 20

If you want to install Hugo on your Linux Mint 20 system, then you need to perform the steps outlined below.

1. Update system apt

Start by performing a system update with the following command:

$ sudo apt update

2. Install Snap Daemon Package Manager

Now, you need to install the Snap Daemon on your system with the command shown below:

$ sudo apt install snapd

3. Install Hugo

Now, you can install Hugo on your system while making use of the Snap Package Manager with the command that follows:

$ sudo snap install hugo

4. Create a Website Using Hugo

First, create a new website named web1.doamin.com using the hugo command, as shown below:

$ hugo new site web1.domain.com

You should get the following output:

Congratulations! Your new Hugo site is created in /root/web1.domain.com.
Just a few more steps and you're ready to go:
1.Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.

You can see the list of all files and directories generated by Hugo with the following command:

$ ls web1.domain.com

Output:

archetypes  config.toml  content  data  layouts  static  themes

5. Create Your First Page

Now, change the directory to your website and create a new page named main.md with the following commands:

$ cd web1.domain.com
$ hugo new main.md

You should get the following output:

/root/web1.domain.com/content/main.md created

Next, edit the main.md page and add some content:

$ nano content/main.md

Add the following lines at the end of file:

# Test Page
This is my first test page.

Save and close the file when you are finished.

6. Download and Install a Theme

First, change the directory to themes and download the Hugo theme with the following command:

$ cd web1.domain.com/themes
$ wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Once downloaded, unzip the downloaded file with the following command:

$ unzip master.zip

Next, rename the extracted directory with the following command:

$ mv hugo-strata-theme-master hugo-strata-theme

Next, copy the sample content from the config.toml file located inside themes directory to the default config.toml file:

$ cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Next, edit the config.toml file with the following command:

$ nano ../config.toml

Change the base URL and define your page name as shown below:

baseurl = "/"
[[menu.main]]
name = "main"
url  = "main"
weight = 5

Save and close the file, then create a landing page layout file with the following command:

$ nano /root/web1.domain.com/layouts/index.html

Add the following lines:

{{ define "main" }}
{{ if not .Site.Params.about.hide }}
{{ partial "about" . }}
{{ end }}
{{ if not .Site.Params.portfolio.hide }}
{{ partial "portfolio" . }}
{{ end }}
{{ if not .Site.Params.recentposts.hide }}
{{ partial "recent-posts" . }}
{{ end }}
{{ if not .Site.Params.contact.hide }}
{{ partial "contact" . }}
{{ end }}
{{ end }}

Save and close the file.

7. Build Your Website

Now, change the directory to your website and build your Hugo website using the following command:

$ cd /root/web1.domain.com
$ hugo

You should get the following output:

Start building sites …
WARN 2020/12/06 09:21:44 Page.Hugo is deprecated and will be removed in a future release. 
Use the global hugo function.
WARN 2020/12/06 09:21:44 Page.RSSLink is deprecated and will be removed in a future release. 
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages            |  7
Paginator pages  |  0
Non-page files   |  0
Static files     | 26
Processed images |  0
Aliases          |  2
Sitemaps         |  1
Cleaned          |  0

Next, start the Hugo server by specifying your server IP as shown below:

$ hugo server --bind=0.0.0.0 --baseUrl=http://your-server-ip -D -F

You should get the following output:

Start building sites …
WARN 2020/12/06 09:22:02 Page.Hugo is deprecated and will be removed in a future release. 
Use the global hugo function.
WARN 2020/12/06 09:22:02 Page.RSSLink is deprecated and will be removed in a future release. 
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages            | 11
Paginator pages  |  0
Non-page files   |  0
Static files     | 26
Processed images |  0
Aliases          |  3
Sitemaps         |  1
Cleaned          |  0
Built in 35 ms
Watching for changes in /root/web1.domain.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/web1.domain.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://69.87.216.179:1313/ (bind address 0.0.0.0)