How to Self-Host Your Static Website: A Step-By-Step Guide

In the current internet age, having your own website is an essential tool for personal branding or showcasing your work. One of the popular ways to create a website is through static site generators, and Hugo is one of the best examples of this. Unlike dynamic sites, static sites are straightforward, faster, and more secure.

In this blog post, we will guide you on how to self-host your static website, with a step-by-step guide divided into two parts: the setup process and the publishing process. Remember, once you’ve done the setup, you’ll only need to follow the publishing process for subsequent deploys.

Setup

Step 1: Create a VPS Server

In order to host your website, you’ll need a server. Let’s use Hetzner as an example of how to create a small Virtual Private Server (VPS).

1. Visit the Hetzner website and create an account.
2. Once logged in, navigate to the “Servers” section and click “Add Server”.
3. Choose the small CX11 server type in your desired location.
4. Confirm your selection and wait for the server to be created.

After your server is ready, you’ll receive an email containing the IP address, username, and password. Make sure to keep these details secure.

Step 2: Install Web Server

Next, you’ll need to install a web server on your VPS. We’ll use Caddy, a modern web server that includes automatic SSL certificates.

1. Log into your VPS server using SSH.
2. Download and install Caddy by running the following commands:

   wget https://getcaddy.com
   chmod +x getcaddy.com
   ./getcaddy.com personal http.filemanager,http.ipfilter
   

3. After installation, let’s create a simple configuration file. Use the nano text editor to create a new file:

   nano Caddyfile
   

4. In the editor, enter the following, replacing yourdomain.com with your actual domain:

   yourdomain.com {
       root /var/www/html
       gzip
       browse
   }
   

5. Save and exit the editor.

Step 3: Configure Domain Name

The final step in the setup process is configuring your domain name. You need to set an A record in your DNS settings to point your domain name to your VPS’s IP address.

1. Log into your domain registrar’s panel.
2. Navigate to DNS settings.
3. Add a new A record, set the host to www (or @ depending on your registrar), and point it to your VPS’s IP address.

Publishing

Step 1: Build Your Site

With your server ready, it’s time to build your website. We’ll use Hugo, a popular static site generator.

1. Navigate to the site directory, then build the site with hugo. This will create a public directory containing the static files for your site.

Step 2: Publish Public Folder

The final step is to publish your site by transferring the public directory to your VPS.

1. Use rsync to copy the public directory to your VPS, replacing user, yourdomain.com, and path_to_hugo_site with your details:

   bash
   rsync -avz --delete public/ user@yourdomain.com:/var/www/html/path_to_hugo_site
   

2. Check your website at www.yourdomain.com to ensure everything is working correctly.

Remember, for subsequent deployments, you only need to repeat the publishing process: rebuild your site with Hugo and use rsync to update the files on your VPS.

Alternatives

If you prefer a solution that automatically publishes your site directly from a git repository, consider using a platform like statichost.eu. This can be a time-saving option, especially if you’re frequently updating your website.

With this guide, you should now be able to self-host your static website. Enjoy the freedom and control that comes with hosting your own site!