Hugo - Deploy Hugo website on Google Cloud Platform

By xngo on April 28, 2020

Recently, I discovered that hosting low traffic website on Google Cloud Platform is almost free. When I said low traffic, I meant websites getting less than 100K hits per month. Since I'm currently learning how to generate website using Hugo, I decided to deploy my statically generated Hugo website to Google Cloud Platform. Here is my journey.

VM creation

Create Google Cloud VM instance.

  1. On Google Cloud Platform, from the left side menu, scroll to COMPUTE section and select Compute Engine > VM instances.
    GCP - Compute Engine > VM instances
  2. Click on CREATE INSTANCE to create a new VM.
  3. I left every input fields with their default values except for:
    • Machine type, I select f1-micro(1 vCPU, 614 MB) so that the cost is almost free or near free.
    • Firewall, I check to allow both HTTP and HTTPS traffics.
      GCP - Compute Engine > VM instances - CREATE INSTANCE

Setup the VM

  1. I access the VM through SSH from the browser.
    GCP - Compute Engine > VM instances - SSH
  2. I setup the root password and install apache2.
# Setup the root password.
sudo passwd
 
# Switch to root user 
#   to make it easier to install other packages.
su
 
# Update repositories.
apt-get update
 
# Install Apache2
apt-get install -y apache2

Test VM and Apache2

Modify the /var/www/html/index.html file and check the result from the browser using the VM's External IP.

echo "hello" > /var/www/html/index.html

For my case, I opened the browser to http://35.224.216.141 and it is showing hello.

GCP - Compute Engine > VM instances - Test

Note: HTTPS will not work for now. We will set it up later.

Setup Cloud DNS

  1. From Google Cloud Platform, scroll down to NETWORKING section and navigate to Network services > Cloud DNS.
    GCP - Network services > Cloud DNS
  2. Create a zone. Ensure that the DNS name is your domain name, e.g. pscdoc.com.
    GCP - Network services > Cloud DNS > Create zone
  3. Add an A record set to associate it to your VM's external IP, e.g. 35.224.216.141.
    GCP - Network services > Cloud DNS > Create zone > Add A record set
  4. Write down the DNS servers generated by Google Cloud Platform. We are going to need them later on.
    GCP - Network services > Cloud DNS > Zone details

Transfer GoDaddy DNS to Google Cloud DNS

I bought my domain name from GoDaddy. Now, I have to ask GoDaddy to use Google Cloud DNS servers for my domain name instead of their own DNS nameservers. I logged in to GoDaddy website and change the DNS servers to Google Cloud DNS servers.

GoDaddy > DNS > Use my own nameservers

Note: It is important to remember that name server changes usually take 24 to 48 hours to fully propagate throughout the internet. So, before, testing out your domain name, wait for at least an hour.

Test domain name

For my case, I opened the browser to http://pscdoc.com/ and it is showing hello.

GCP - Domain name test

Setup HTTPS

When we created our VM instance, we already set it to allow HTTPS traffic. But, the Apache server is not reacting to it. So, if you are opening https://pscdoc.com, you will get the message "This site can’t be reached". To enable HTTPS for our website, we have to get a SSL certificate and tell Apache server to handle HTTPS requests properly. The easiest way to do this is to use Certbot. It provides free certificates and automatically configure Apache for us.

Setup free SSL certificate

To generate a SSL certificate, we are going to install the free open source tool called Certbot. During the setup, it will ask you to redirect HTTP traffic to HTTPS. Choose option 2: Redirect - Make all requests redirect to secure HTTPS access..

# Install certbot.
apt-get -y install certbot python-certbot-apache -t stretch-backports
 
# Run certbot and answer the questions.
certbot --apache
 
# Restart Apache server.
service apache2 restart

Certbot - Questions - 01 Certbot - Questions - 02

Unfortunately, certificates created by Certbot expire within 2 or 3 months. But, you don't have to worry. When you installed Certbot, it created a cronjob to automatically renew the certificates. The cronjob is located at /etc/cron.d/certbot.

Test HTTPS

For my case, I opened the browser to https://pscdoc.com/ and it is showing hello.

HTTPS example for pscdoc.com

Upload Hugo

The easiest way that I found to upload Hugo website to Google Cloud VM is to first compress public/ folder and upload it to some server. Then, from Google Cloud VM, download it and unpack it.

# Build your Hugo website
hugo -D
 
# Compress ./public/ folder.
tar -vxzf public.tar.gz public
 
# Upload public.tar.gz to a server.
 
# From Google Cloud VM, download public.tar.gz.
wget https://some/server/public.tar.gz
 
# Unpack public.tar.gz
tar -xvzf public.tar.gz
 
# Move ./public/* content to /var/www/html/
mv ./public/* /var/www/html/

pscdoc.com example

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.