How to quickly deploy a static website with Hugo

There are several reasons why your business might want to start employing a static website generator. One reason is because you need to be able to quickly roll out websites without having to bother coding them. Or, you might want to eventually get to the point of automating this process for regular static site deployment. 

With tools like Hugo (which has been around for nearly 10 years), you can use pre-defined templates to generate a full static website. The pages are served very fast, so if speed is what you’re looking for, this might be the tool you need. One thing you must know about Hugo-built sites is that there’s no database backend or plugins to expand the feature set. These are static sites at their heart.

However, with the right developer magic, you can use these types of sites to bolster your companies online presence, using them in kiosks, embedded systems or just about any use-case that could benefit from lightning-fast static sites.

If this sounds like something you might want to try, you’re in luck, because I’m going to walk you through the steps of deploying your first site with Hugo.

SEE: Checklist: Server inventory (TechRepublic Premium)

What you’ll need

Hugo can be installed on both Linux and macOS. I’ll be demonstrating this process with Ubuntu Server 20.04, so you’ll need a running instance of the open-source operating system and a user with sudo privileges.

How to install Hugo

Hugo can be found in the standard Linux repositories, so installation is but a command away. Log in to your Ubuntu Server instance and issue the command:

sudo apt-get install hugo -y

Hugo also depends on Git, so let’s get that installed as well (in case it’s not already installed):

sudo apt-get install git -y

That’s it for the installation.

How to create your first site

The first thing you’ll want to do is browse through the Hugo Themes repository and find a theme you want to use for your site. Once you’ve found a theme you like, make sure to copy the GitHub CLI download link.

We’ll use the hugo command to generate the foundation for our new site (let’s call it test), with the command:

hugo new site test

Change into the newly-created directory with the command:

cd test

Next, you need to initialize the new site for git with the command:

git init

Now we’ll download the theme from the repository. Change into the themes directory with the command:

cd themes

Now, download the theme with the command:

git submodule add URL

Where URL is the URL for the theme you want to use. For example, I’ll deploy a site based on the DPSG theme, so the command would be:

git submodule add https://github.com/pfadfinder-konstanz/hugo-dpsg

You should now see a new sub-folder for the theme. Change into that folder with the command:

cd FOLDER

Where FOLDER is the name of the new folder.

Copy all of the content into the root directory with the command:

cp -rf * ../../

Change back into the root directory with the command:

cd ../../

Next, we need to copy the config.toml file (from the exampleSite directory) into the root directory of our test site with the command:

cp exampleSite/config.toml .

Now, let’s launch our first Hugo site with the command:

hugo server -D

Hugo is now serving the static site. The only problem is, you can’t reach it because it’s only serving the site to localhost. Although you can change the baseURL option in the config.toml file, it won’t help. Instead, you need to launch the Hugo test site with the command:

hugo server --bind=SERVER --baseURL=http://SERVER:1313

Where SERVER is either the IP address or domain of the hosting server. When you launch the Hugo test site with the above command, you can then point a web browser to http://SERVER:1313 (where SERVER is the IP address or domain of the hosting server) and see the theme for your new site.

How to modify a theme

This is where it gets really impressive. Keep the site running and log in to your Hugo server with another terminal window. Change into the test folder and open the config.toml file for editing with the command:

nano config.toml

In that file make an edit, such as changing the line:

title = "Hugo DPSG"

To:

title = "TechRepublic Test Site"

As soon as you save and close the file, the Hugo server will detect the change and rebuild the site automatically. If you refresh the page in the web browser, you’ll see the change. You can go through the config.toml file and customize it to perfectly fit your needs.

When you’re finished with the test, stop the Hugo server (in the terminal where you ran the hugo server command), by hitting the Ctrl+c keyboard shortcut.

And that’s all there is to deploying your first static site with Hugo. You can now start deploying static sites or work Hugo into your website development cycle to create a system for the automatic deployment of lightning-fast static sites.

Subscribe to TechRepublic’s How To Make Tech Work on YouTube for all the latest tech advice for business pros from Jack Wallen.

Developer Essentials Newsletter

From the hottest programming languages to the jobs with the highest salaries, get the developer news and tips you need to know.
Weekly

Sign up today

Also see