Hosting a Hugo generated site on a remote server

Summary

Use rsync to copy the /public folder generated by Hugo to public_html on your website server.

The problem

I had my Hugo site displaying nicely on my own PC. How do I upload it to the remote server that hosts my website?

Unnecessary background

I generated a website using Hugo to replace the site I built using Wordpress. I find it easier to generate content using Hugo. Each post is a simple text file with a folder where I put images. I put links for each image into the text file. Then I type ‘hugo’ and the files that create the website display are automagically generated into a folder called /public. This suits me. May not suit you. Different tools for different folk.

Somehow, my Wordpress database with the same content was 10 times larger than the Hugo site. I suspect that one of the plugins I use to resize images on Wordpress was generating spurious copies of the images. That’s one of the problems - I don’t really know what’s happening inside the black box that Wordpress is.

Backing up my Hugo content is straight forwards. I sync it to a private GitHub repo. I feel like I control the content more than I did with the opaque Wordpress database.

The solution

I host my website through Verpex. The files that are used to generate my website display are in a folder on my remote server, in my home directory, called:

public_html

I renamed this folder to public_html_wordpress. Now my website doesn’t work.

Hugo generates the files I need to display my website to a folder on my PC called:

\public

I upload this to a folder on my remote server in my home directory called:

public_html_hugo

using the command:

rsync -avz --delete public/ myusername@remoteserver:public_html_hugo

-a is archive mode. -z compresses files during transit. -v is verbose mode. –delete deletes files on the target folder that are not in the source folder.

To enable rsync to run, I need to be able to ssh into my remote server using a token and to load this token using ssh-add. How to set up a token to enable ssh is covered in many other blog posts better than I can explain it. You need to check your remote server’s help documentation to see how to enable ssh login with a token. In my case, there is an option to import ssh tokens through the cpanel.

I create a soft link to my Hugo generated folder on my remote server using the command:

ln -s public_html_hugo public_html

Now, when I go to my homepage, I see the content generated by Hugo.

Success!

Script

Here’s a simple script to automate generating your Hugo website then use rsync to upload it to your remote server. You’ll need to enable ssh login and load your token using ssh-add prior to running this.

#!/bin/sh
USER=username
HOST=host_ssh_address
DIR=/public_html_hugo
hugo && rsync -avz --delete public/ ${USER}@${HOST}:${DIR}
exit 0