In this tutorial, we will learn how to deploy a Hugo blog to Google Cloud Storage. And create a load balancer to serve the static content.

Let’s first start with the dummy way to deploy the Hugo blog to Google Cloud Storage. After that, we will use the Google Cloud Build to automate the deployment process.

Let’s get started!

Prerequisites

• A Hugo site
• Google Cloud account
• Google Cloud SDK

TL;DR

1. Install Hugo: Follow the Hugo installation guide.
2. Create a new site: Run hugo new site myblog.
3. Add a theme: Choose a theme from the Hugo themes and add it to your site (I used PaperMod).
4. Install the Google Cloud SDK: Follow the installation guide.
5. Authenticate: Run gcloud auth login.
6. Create a bucket: Run gsutil mb gs://your-bucket-name.
7. Update the hugo config file: Add the following configuration to your hugo.yaml file:

deployment:
  targets:
    - name: gcs
      url: gs://your-bucket-name

8. Deploy your site: Run hugo deploy --target=gcs.
9. Make the bucket public: Run gsutil iam ch allUsers:objectViewer gs://your-bucket-name.
10. Register a domain: Register a domain name with a domain registrar.
11. Create a load balancer: Follow the Google Cloud Load Balancer guide.
12. Add a A, CNAME record: Add a A, CNAME record to your domain pointing to the load balancer.
13. Test your site: Open your browser and navigate to your domain.

Okay, let’s go further the details

I assume you have already set up your Hugo site and have a Google Cloud account. Now, let’s deploy your Hugo site to Google Cloud Storage.

Using Google Cloud Interface to create a bucket

1. Go to the Google Cloud Console.
2. Click on the hamburger menu in the top left corner.
3. Click on “Storage” under the “Storage” section.
4. Click on “Create bucket”.

After fill in the bucket name, location, and other settings, click “Create”.

Using Google Cloud SDK to create a bucket

Run the following command to create bucket with the settings:

Storage class: Standard
Location: US

gsutil mb -c standard -l us gs://your-bucket-name

Update the Hugo config file

Add the following configuration to your hugo.yaml file:

deployment:
  targets:
    - name: gcs
      url: gs://your-bucket-name

Deploy your site

Run the following command to deploy your site to Google Cloud Storage:

hugo deploy --target=gcs

Make the bucket public

Run the following command to make the bucket public:

gsutil iam ch allUsers:objectViewer gs://your-bucket-name

or using the Google Cloud Interface:

1. Go to the Google Cloud Console.
2. Click on the hamburger menu in the top left corner.
3. Click on “Storage” under the “Storage” section.
4. Click on the bucket you created.
5. Click on the “Permissions” tab.
6. Click on “Add members”.
7. Add “allUsers” with the role “Storage Object Viewer”.

Register a domain

Register a domain name with a domain registrar. I used cloudflare.com to register my domain.

after inserting personal information and payment, you will get the domain.

Create a load balancer

Follow the Google Cloud Load Balancer guide.

1. Go to the Google Cloud Console.
2. Click on the hamburger menu in the top left corner.
3. Click on “Network services” under the “Network services” section.
4. Click on “Load balancing”.
5. Click on “Create Load Balancer”.
6. Choose “HTTP(S) Load Balancing”.
7. Click on “Start configuration”.
8. Fill in the details, configure backend, frontend and click “Create”.

Add a A, CNAME record

Add a A, CNAME record to your domain pointing to the load balancer.

1. Go to the domain registrar.
2. Click on the domain you registered.
3. Click on “DNS”.
4. Add an A record pointing to the load balancer IP address.
5. Add a CNAME record pointing to the load balancer domain name.

Test your site

Open your browser and navigate to your domain.

Conclusion

You have successfully deployed your Hugo blog to Google Cloud Storage!