Hosting Hugo on your own webserver

Background

Hugo’s developers recommend hosting a Hugo website (such as this one) on Netifly. However, as I rent a Virtual Private Server (VPS) for all kind of serious and not-so serious reasons, I decided to host my Hugo website on my own server.

Below, I try to summerize the steps taken to deploy my website on my own VPS with links to the best tutorials I found for each step. This post hopefully helps me to memorize what to do in case my website crashes, but maybe it serves your needs too.

Note 1. There is a Hugo tutorial on this topic which I discovered only after I arrived at Step 3 and is, in my humble opinion, rather technical.

Note 2. My VPS runs on Ubuntu 18.04; I compile(d) this website on a Macbook using Rstudio and blogdown.

Prerequisites

  • You have access to your own VPS which is pre-configured to host a website;
  • You are able to compile your Hugo website locally (that is, on your own device at home).

Step 1: Configure the VPS

Log in on your VPS and create a new user (for example “miauw”) with administrator rights (has the privileges) to modify the content of the folder that serves the website (in my case “/var/www/html/”).

adduser miauw
sudo chown -R -v miauw /var/www/html

Step 2: Set up SSH Keys

For security reasons it is recommended to upload your website from your own device to your VPN through SSH. Follow the steps clearly described by Hanif Jetha on Digital Ocean.

Step 3: Get Rsync running

After a few frustrating evenings, in which I thought it was necessary to upload my complete website manually after I made some changes, I discovered the Rsync utility and found out how to program a small ‘program’ that, with one simple double-click, fires Rsync to upload only changed files (and thus saves a lot of time).

For people like me who are not used to work in a terminal, this Rsync utility can be set up as follows:

1) Open a new R-script file in Rstudio (a plain .txt file is even a better option), which you name deploy;

2) In this R-script file (or plain .txt file) copy-paste and adjust the following lines of codes.

#!/bin/sh

rsync -avz --delete /Users/peterkruyen.net/public/ miauw@peterkruyen.net:/var/www/html
  
exit 0

# Obviously, you need to change "/Users/peterkruyen.net/public/" to the folder in which your website is rendered;
# Obviously, you also need to change the username, the name of your VPS, and maybe the location of the website on your VPS;
# Do not forget to include the slashes!
# More on the Rsync parameters can be found here: https://www.computerhope.com/unix/rsync.htm
# Do not include the 'n' (dry-run) parameter as I did, but recommend it to people you do not like.

This script is a slightly adjusted version of the script proposed by the Hugo community (executing that script resulted in my Dropbox-folders being uploaded 😱, of course it was me who made a mistake). Also, they called HUGO in the script, which I do not need because I render my website in Rstudio.

3) Remove the file extention .R or .txt (for example by using the option ‘Rename’ in Rstudio)

4) Make the deploy-file executable. Likely, on a Mac the easiest way is to: I) open a Finder-window and navigate to the folder where the deploy file is located; II) In the ‘Finder’ menu in the upper-corner of the screen, select ‘Services’ and next ‘New Terminal at Folder; III) In the terminal that next pops up, enter the code

chmod +x deploy

If you double-click the ‘deploy’ program now, your website is updated.

Step 4: Get Rsync automatically running

To save even more time, I wrote a tiny package deployR that includes the deploy program. Once installed on Rstudio and properly formated, the package adds an ‘Addin’ to its main menu. Just push that button.

Happy DropboxingHugoing!