What is Hugo

In this tutorial, you will learn what is Hugo and how to use it. Hugo is an SSG and framework written in Go. A construction tool that creates static sites is known as a static site generator, or SSG. Its layouts are created using Go templates. Its ability to construct pages quickly distinguishes it from other SSGs as a major asset. It enables incredible content management, can be hosted almost anywhere, supports taxonomies, gives tables of contents production, and is compatible with different OS platforms. These capabilities are in addition to the live reloading during development, support for various content types, word-count functionality, and minutes-to-read functionality. These are but a few of the numerous features that Hugo has to offer.

Why Hugo

Hugo is the world's top static site generator in terms of raw performance.
Hugo was demonstrated by Forestry to be 35 times quicker than Jekyll.
Similarly, Hugo can render a 10,000 page website in 10 seconds, whereas Gatsby would need more than 30 minutes to do it.
Hugo is the quickest SSG in terms of construction times as well as installation speed.

Unlike Jekyll, Gatsby, and other SSGs that require installing dependencies through a package manager, Hugo comes as a self-contained executable.
This implies that you don't need to worry about programme requirements when downloading and using Hugo.

Prerequisites:

• Root user or Normal user with SUDO privileges.
• Internet must be running
• To test the site as a localhost you should have a browser in your machine or knowledge of any webserver
• Must have install git

Install Brew in CentOS-7

To install Hugo in CentOS, copy the below lines and paste them in /etc/yum.repos.d/CentOS-Base.repo or in any other repository.

[copr:copr.fedorainfracloud.org:daftaupe:hugo]
name=Copr repo for hugo owned by daftaupe
baseurl=https://download.copr.fedorainfracloud.org/results/daftaupe/hugo/epel-7-$basearch/
type=rpm-md
skip_if_unavailable=True
gpgcheck=1
gpgkey=https://download.copr.fedorainfracloud.org/results/daftaupe/hugo/pubkey.gpg
repo_gpgcheck=0
enabled=1
enabled_metadata=1

And then run the below command:

yum clean all
yum install hugo -y
hugo version

Congratulations! You have installed hugo on your centos machine

Build a site with Hugo-theme-Relearn

Step-1: Create a new directory with the hugo command

hugo new site 

Step-2: Now go to site name using cd command
cd sitename

Step-3: Download theme hugo-theme-relearn by git command

git clone https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn --depth=1

Step-4: Update the downloaded theme in hugo site's config file

vi config.toml

theme = ‘hugo-theme-relearn’

Step -5: To ensure there are no errors in building/ changing the site’s file run:

hugo serve
hugo server -D

Note: The above command will not create a actual site to deploy, it is more like a dry run of the site

Step-6: Now copy below text and paste it on config.toml file but make changes accordingly

—---------------------------------------------------------------------—
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'hugo-theme-relearn'

[markup] # Code highlighting
[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = false
hl_Lines = ''
lineAnchors = ''
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
noHl = false
style = 'SYSTEMD'
tabWidth = 4
[params]

Change default color scheme with a variant one.

themeVariant = [ "relearn-dark","relearn-light","blue","green"]
—---------------------------------------------------------------------—

Note: Please ensure that in config file, there must not be any tab used to give spaces

In above code, [Markup] indentation is used to highlight the code embedded in site, for example- as we did in this article for every command.

[params]
themeVariant
The above keyword is used to set the site’s theme, we can use ‘relearn-dark’, ‘relearn-light’, ‘blue’, ‘red’, ‘neon’ , ‘green’ or any custom theme as a value, for example:

• themeVariant = “Blue” #single theme
• themeVariant = [“Blue”,”Red”] # options of themes

Step -7: Now create a page to show the content on site

hugo new page/page1.md #.md is a compulsory extension 

Step -8: To reflect the changes in your site, please make sure that, the value of draft must be set as false like :

 vi /path_to_site/content/page/page1.md

---

title: "First"
date: 2022-05-10T03:41:08-04:00
draft: false

---

Here, we can edit the document to show the content

Heading, Bulletins, Fonts
Heading:
To add a heading use # before text, for example

This is Heading1 this will act as a h1 of html tag

**This is heading1      same as above
## This is heading2     this will act as a h2 of html tag

Italic:
Use * sign to mark a text as an italic, for example

• This is Italic Simple italic font
  *** This is italic with bold italic with bold fonts

Blackquotes:
Use ‘>’ sign before text/ para, and then the whole line will be shown as blackquotes

List/ Bullets:
Use ‘+’ for main list-item/ bullet and ‘-’ sign to make a sublist or sub-bullet

Overall Example:

Beware this is a nice example
Microhost Cloud
Server provider
Web - hosting
Docker

Code Highlighting:
To Embed the code or command in site to copy it
Step-1: Make entry of [mark] in config.toml file same as above

Step-2: use ``` operator( below esc button) and mention the language like below, for example,

``` systemd
systemctl restart httpd
systemctl enable httpd
```

Place the image in page
Step -1: Place the image either in ‘static’ directory or in sub-directory of static directory, like: //static/image.png

Step -2: Now place the below code in the desired place in the page


Here, in square brackets- [], a message will pass, which will be shown if anyhow image does not load in browser

And in curly brackets- (), first argument will be the path to the image, and content in quotes ‘’ will be the description of of the image

Notice: the path is omitting the ‘static’ name of the directory

Notice, Warning, Tip:
To show the notice, warning of any kind of tip in site use the below format and place the code on the desired position of the desired page

---

{{% notice ( note | info | tip | warning ) [ [ ] ] %}}
Some markup
{{% /notice %}}

Choose the option from note, info, tip or warning for example:

{{% notice note %}} # A Note

Message of the note

{{% /notice %}}

{{% notice warning %}} # A Warning message

Message of warning

{{% /notice %}}

Step 1: Open the .md page, in which you want to show the special message
vim content/page/page1.md

Step 2: Now edit the page:

---

title: "first"
date: 2022-05-10T07:45:11-04:00
draft: false

---

This is First page of the site

{{% notice note %}}

You should keep learning

{{% /notice %}}

In this tutorial, you have learned What is hugo and how to use it.

Also Read: How SSL Certificates Keep You and Your Business Secure from Cyber Attacks.Install SSL on Ubuntu server using Nginx