Ubuntu 22.04

This tutorial will guide you through the steps necessary to build your own statically generated website using Hugo. It will guide you through the deployment of two servers, one for building your website, and another for hosting it. The first server will provide a test-bed to build your website on, the second will allow you to host the website.

I think it is best to first describe why two servers are needed and what each of them are going to be doing in more detail so that even a beginner will have an idea of what is going on.

Hugo itself is a static site generator, meaning it takes relatively simple input in the form of markup files and outputs working html code. The webserver, in this case nginx, will be used to host these files on the internet. Web hosting requires some understanding of how DNS works and a domain name, which I will not be going over in this guide, but will describe briefly, enough for most people to figure it out.

Dependencies

sudo apt install git golang

Install hugo from snap because why not make life a bit easier?

sudo snap install hugo

Initialize a new site with a name, cd into dir, initialize git, install and set a theme. The theme can be anything you want, in this case we are going with the default theme found in the Hugo documentation.

hugo new site <site_name>
cd /<site_name>
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

There are some basic things you should know about setting up a web server.

First things first, install nginx.

sudo apt install nginx

Uncomplicated FireWall or ufw needs to be configured, and started if it isn't already running. This will allow incoming connections on port 80, the default port for http traffic. If you want https, you can add that now, but it will be covered later.

sudo ufw allow http
sudo ufw reload
sudo ufw enable

Remove default nginx config. This will cause issues if you don't remove it.

sudo rm /etc/nginx/sites-enabled/default

Remove the default html files

sudo rm -rf /var/www/html/*

Create a new nginx config in the location and format of /etc/nginx/conf.d/subdomain.domain.tld.conf

sudo vim /etc/nginx/conf.d/subdomain.domain.tld.conf

Copy in a basic http config. If you don't have a domain yet, you can just substitute the server_name (subdomain.domain.tld.conf) with the IP address of the server. This way you can test this in a lab enviroment.

server {
    listen 80;
    server_name subdomain.domain.tld;
    root /var/www/html;
}

With an IP address.

server {
    listen 80;
    server_name 192.168.1.4;
    root /var/www/html;
}

Test the config to make sure that everything works before you move on. If it throws any errors, it will tell you at which line(s) they occur in the config file.

sudo nginx -t

Add a file to the web root to make sure that everything works in your web browser before moving the actual website to the server.

sudo touch /var/www/html/index.html && sudo echo "Hello World!" | sudo tee -a /var/www/html/index.htm
sudo chown -R www-data:www-data /var/www/html

Start/restart the nginx service.

sudo systemctl restart nginx

Navigate your web browser to your domain or IP address and it should produce a white background with Hello World in the top left corner.

For this all you need to do is copy your published hugo website to the web server. To publish your website and generate the necessary html you need to run hugo server without any flags. This will tell hugo to build the published your site, only generating html for the pages which are not marked as draft. After that is done, you can continue on to move those files to the web server.

On the Hugo server, navigate to your site directory with your website configuration files and folders in it.

cd /<site_dir>

From the hugo directory start an sftp connection to your web server and copy the publish folder to the web server using put with the R flag to copy recursively. When done exit.

sftp <user>@<web_server_IP>
put -R /publish

Disconnect from the hugo server and ssh into the web server. The files that were just transferred to the web server need to be placed into the /var/www/html directory or any other directory of your choosing, just remember to change the web root in the nginx config to match.

Move the files in the publish directory to /var/www/html and set the permissions

mv ./publish/* /var/www/html/
chown -R www-data:www-data /var/www/html

Restart nginx

sudo systemctl restart nginx

If everything went as expected, your hugo website should be available at your domain or IP, albeit without encryption.