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 nginx 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 theme.

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 other basic things you should know about setting up a web server, you can read about those in another article.

Dependencies

sudo apt install nginx

Configure ufw

sudo ufw allow http

sudo ufw allow https
sudo ufw reload

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 IP address instead.

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.

sudo nginx -T

Add a file 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 && echo "Hello World!" >> /var/www/html/index.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.