‍Hugo is an exceptional open-source website framework developed in Go. It offers a reliable and modern static site generator that allows users to effortlessly create fast and simple websites. With pre-made templates and various features like SEO, commenting, and analytics, Hugo eliminates the need for expensive runtimes and databases. In this article, we will guide you through the process of installing and using Hugo on Debian 11.

Prerequisites

Before diving into the installation process, make sure you have a server running Debian 11 and have configured a root password for it.

Installing Hugo on Debian 11

Hugo is readily available in the default repository of Debian 11. To install it, simply execute the following command:

apt-get install hugo -y

Once the installation is complete, you can verify the Hugo version by running the command:

hugo version

Make sure you receive the following output:

Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate:2021-07-18T09:31:51Z(debian0.80.0-6+b5)

Creating a Website with Hugo

Let’s start by creating a new website called hugo.example.com. Use the following command to create the website:

hugonewsite hugo.example.com

You will see the following output:

Congratulations! Your new Hugo site is created in /root/hugo.example.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.

To list all the files created by Hugo, use the following command:

ls -l hugo.example.com

This will display the following output:

drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes
-rw-r--r-- 1 root root 82 Nov 13 09:27 config.toml
drwxr-xr-x 2 root root 4096 Nov 13 09:27 content
drwxr-xr-x 2 root root 4096 Nov 13 09:27 data
drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts
drwxr-xr-x 2 root root 4096 Nov 13 09:27 static
drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes

Creating an About Page and Sample Post

Let’s create an “About” page for your website. Change the directory to your website using the following command:

cd hugo.example.com

Next, create the “about.md” page with the following command:

hugo new about.md

You will see the following output:

/root/hugo.example.com/content/about.md created

Edit the “about.md” page using the following command:

nano content/about.md

Modify the file as shown below:

---
title: "About Us"
date: 2021-11-13T09:28:18Z
draft: false
---

This is the About Us page for this website.

Save and close the file when you’re finished.

To create a sample post, execute the following command:

hugo new post/sample-post.md

You will receive the following output:

/root/hugo.example.com/content/post/sample-post.md created

Edit the sample post page with the following command:

nano content/post/sample-post.md

Update the file as shown below:

---
title: "Sample Post"
date: 2021-11-13T09:29:29Z
draft: true
---

# Hugo Sample Post

This is my first Hugo website post!

Save and close the file.

Installing Themes on Your Website

Next, let’s download and set up a theme for your Hugo website. Change the directory to the themes folder using the command:

cd themes

Download the Hugo theme with the following command:

wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Unzip the downloaded theme using the command:

unzip master.zip

Rename the extracted theme with the following command:

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

Copy the content of the config.toml to your site’s config file using the command:

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

Edit the config.toml file using the command:

nano ../config.toml

Add or modify the following lines:

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

Save and close the file.

Create an index.html file for your website using the following commands:

cd ../layouts
nano index.html

Add the following lines to the index.html file:

{{ 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.

Building and Launching Your Website

Now, it’s time to build your website. Execute the following command to build it:

hugo

You will see the following output:

{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }} | EN
-------------------+-----
Pages              | 8
Paginator pages    | 0
Non-page files     | 0
Static files       | 26
Processed images   | 0
Aliases            | 2
Sitemaps           | 1
Cleaned            | 0
Total in 48 ms

To start the Hugo server and bind it with your server’s IP, use the following command:

hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F

You will receive the following output:

{{ 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 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.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://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

At this point, the Hugo server is up and running, accessible throughhttp://104.245.34.233:1313/. Open your web browser and visit the URL to see your Hugo website.

Conclusion

Congratulations! You have successfully installed Hugo and created a website on Debian 11. Hugo’s simplicity and efficiency make it an excellent choice for building secure and fast websites. With its extensive features and intuitive interface, Hugo empowers businesses to establish an online presence effortlessly. Explore the possibilities of Hugo and create your unique website today!

For more information and advanced cloud hosting solutions, visit Shape.host. Shape.host offers reliable and scalable Cloud VPS services, ensuring optimal performance and security for your website. Discover the power of Shape.host and elevate your online presence.