Self-host a static site in the cloud

This article serves as a practical guide for hosting a static website on a cloud service provider. The description particularly focuses running the site on a virtual private server (vps). The primary objective of this guide is to act as a reminder for my future self, but cheaper or even free alternatives do exist (for example, GitHub Pages).

Overview - the most important steps

1. Create ssh keys
2. Set up vps instance (using ssh key)
3. Create and and configure your server
4. Configure DNS record

Prerequisites

In order to follow through with this guide, you need to own a domain. Before buying a domain consider that some domains (e.g. *.dev) require the TLS certificates. Caddy does this out-of-the-box, but it is also possible to use another web server. More on how to automatically update TLS certificates with Let’s Encrypt.

You need an account at Hetzner or another cloud service provider. Any provider will do, as long as you can buy a server instance, e.g. a vps or dedicated server. I will skip a description on how to buy a domain and how to set up an account at Hetzner.

Create ssh keys

In order to connect with your vps via ssh, we need to create a set of ssh keys. This can be skipped, if you do not want to use ssh keys for authentication (in that case the password for your root-login will be sent to your email-address by Hetzner).

Linode’s documentation describes step-by-step what to do. So I am only going to summarise the commands:

cd ~/.ssh # create directory if it does not exist
ssh-keygen -t rsa -b 4096 -f awesome-ssh-key

Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/metters/.ssh/awesome-ssh-key
Your public key has been saved in /Users/metters/.ssh/awesome-ssh-key.pub
The key fingerprint is:
SHA256:eSxXEnXyxXy0BXdsI6XXunG/rmXxETtFTUpxxXv8i3A metters@metters-mac.local
The key's randomart image is:
+---[RSA 4096]----+
|       o+oo...o..|
|   .    =.o+.+ oo|
|       .o+ooo ++.|
|  .  . .=X.E +   |
|      +*S.. + .  |
|  .    +*o.o .   |
|      .o.+ .     |
|       .+ . .    |
|         .oo   ..|
+----[SHA256]-----+

Set up vps instance (using ssh key)

Create and configure your server

Create a new project

Set up a new project and a new server using Ubuntu as operating system. You are going to be asked to add a ssh key. It is possible now to configure firewall rules either with the GUI or using cloud init config. I configure ufw directly on the Ubuntu instance (further below), but of course there’s no reason to not configure the server with the help of those two other options.

The GUI will display the ip address of your server, as soon as it is set up.

Update ssh config

The next step is to set up the ssh config on your local machine. Open the file via:

vim ~/.ssh/config

Add the following entry

Host awesome-vps
  Hostname 5.75.228.235 # change to your ip address
  User root
  IdentityFile ~/.ssh/awesome-ssh-key

# with configured ssh config:
ssh awesome-vps
# without configured ssh config:
ssh root@5.75.228.235 # change to your ip address

adduser metters

su - metters
usermod -aG sudo metters
mkdir ~/.ssh
chmod 700 ~/.ssh
touch ~/.ssh/authorized_keys

chmod 600 ~/.ssh/authorized_keys

Host awesome-vps
  Hostname 5.75.228.235 # change to your ip address
  User metters
  IdentityFile ~/.ssh/{name of the private ssh key}

ssh root@awesome-vps

Now you can connect via ssh as root (or user metters, if you followed the previous optional steps):

ssh awesome-vps

The following steps assume you are connected as non-sudo user. Therefore, the sudo keyword is required for many commands.

Set up Firewall (UFW)

Execute the following commands, one after another:

sudo ufw disable # turn off firewall
sudo ufw default deny incoming # block all incoming traffic
sudo ufw default allow outgoing # allow all outgoing traffic
sudo ufw allow ssh # allow incoming traffic on port 22
sudo ufw allow http # allow incoming traffic on port 80
sudo ufw allow https # allow incoming traffic on port 443
sudo ufw enable # turn on firewall

To check the firewall configuration execute sudo ufw status or sudo ufw status verbose to check the ufw configuration. It should print something like this:

sudo ufw status

Status: active

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere
443                        ALLOW       Anywhere
22/tcp (v6)                ALLOW       Anywhere (v6)
80/tcp (v6)                ALLOW       Anywhere (v6)
443 (v6)                   ALLOW       Anywhere (v6)

Set up web server: Caddy

Download and install

First, run sudo apt update && sudo apt upgrade, in order to install available updates.

After this install Caddy. The vps is an Ubuntu instance, there is a section about the installation on Ubuntu.

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

Regularly used commands to manage Caddy

sudo systemctl status caddy # print the current status of Caddy
sudo systemctl start caddy # turn Caddy on
sudo systemctl stop caddy # turn Caddy off
sudo systemctl reload caddy # restart Caddy (necessary after editing the Caddyfile)

Configure Caddyfile

Edit the Caddyfile in order to configure Caddy. You can find it under /etc/caddy/:

sudo vim /etc/caddy/Caddyfile

This is nearly the most basic setup for your site

blog.metters.dev, www.metters.dev {
  root * /var/www/html/metters.dev
  file_server
}

Do not forget to restart Caddy after editing the Caddyfile with the reload command!

Add a static site

In order for Caddy to serve your site, you must create a folder which contains the build artefact or contents of the website (which can also be a simple html file):

sudo mkdir -p /var/www/html/metters.dev # the name of the last folder does not have to match the domain/url, but it is helpful, when hosting several sites
sudo echo '<h1>Hello World!</h1>' > /var/www/html/metters.dev/index.html # this is where the build artefact is stored, in this case a single html file

Configure DNS record

Add an A record for every domain/subdomain that you need. With a Caddyfile as the one shown above that would be three entries: @, www, and blog, with the latter two as subdomains.

@       IN  A    5.75.228.235 // change to your ip address
www     IN  A    5.75.228.235 // change to your ip address
blog    IN  A    5.75.228.235 // change to your ip address

NOTE: Saving the file, does not immediately take effect. Propagating edited DNS records to the nameservers may take up to a few hours!

Use the following command to find out what ip address the domain refers to. As soon as the displayed ip address matches the one you configured in your DNS record, open the previously configured domain in your browser.

dig +short blog.metters.dev. # do not forget the dot at the end

5.75.228.235 # the ip that was configured in your DNS record

Resources

• Set up Caddy on Ubuntu 18.04
• Documentation: ufw - Uncomplicated Firewall
• Documentation: Caddyfile Concepts