Building This Website with Hugo, VSCode, and Google Cloud

My website is built using the Hugo framework and hosted on the Google Cloud Storage bucket. I build my pages and content through VSCode.

I got inspired to build my website in this way from Nick Lafferty, who had mentioned in one of his posts about the benefits of a static website vs WordPress. I’ve been using Wordpress for the entire time that I’ve been an SEO, and it works well, but after going all in on the product management career and my computer science masters (with an MBA), I figured I need to really know what it’s like to code up a website from scratch.

Plus, I didn’t want to deal with monthly subscriptions and hosting. You know, gotta save $20/month.

And, how hard could it be, now that I’ve got ChatGPT to help me through the build.

Turns out, VERY HARD.

I had been wanting to publish my website very badly ever since starting the MBA (most job applications ask for your ‘personal site’) and plus, I had had a lot of opinions over the past few years that I wanted to store somewhere.

But, for some reason, I had mentally blocked myself from doing it, because something about working with these dynamic websites always felt slow and sluggish.

Loading up WordPress, you have to login, you have to have internet, you had to copy & paste your content from Google Docs into the editor (who writes directly in WordPress?), and the editingn plugins like Elementor and WP Bakery always felt a bit slow.

The concept of a static website that was very minimalistic really appealed to me.

Last week, I purchased my domain and then looked up how to do this on Hugo.

Setup

It’s good to be somewhat familiar with code because you’ll need to work on it if something breaks.

To start, I needed the following:

  • code editor like VS Code
  • folder for your project

Install Hugo and Git

Head on over to download and install Hugo on your machine. Additionally, make sure that you’ve installed Git on your computer.

I used the following command: scoop install hugo

Then, I navigated to my folder using cd and then issued the following command: hugo new site mason-yu.com

This then created a new folder for my site files named “mason-yu.com”.

Add a Theme

I then installed a theme for my site. I didn’t really know what I wanted so I made sure to choose a lightweight version.

I used the Sustain theme and installed it with the git clone command.

After I added the theme, I played around with the configurations to see how everything worked.

This was my first time working with a static website and hand-coding a web architecture, so I admit I was stumbling around a bit lost.

But, when in doubt, just ask ChatGPT.

Hosting

This was where it started getting tricky. I wanted to spend $0 on my website so searched for options where I could host my files for free. Again, I asked ChatGPT for ideas. Of the few options, I decided to use Google Cloud because I had previously worked on a Google Cloud project so had an existing account.

Create a Cloud Bucket

I would not have made it through the Google Cloud forest had I not had ChatGPT help me through some steps.

Create a Service Account and Key

Adding SSL

Using Terminal Commands to Push Updates

Workflow

Once this is set up, you just need to know 4 basic executions every time you want to update your website content.

First, fire up VSCode

  1. Initiate Google Cloud connection

  2. Set Google Cloud key environment variable

  3. Push changes to Public folder

  4. Deploy Public folder to Google Cloud bucket

Mistakes I made

Installation was a little hard; so I backtracked and used the template example site to reverse engineer the components of hugo and its themes.

XML tree - didn’t set the index as the home page went down the rabbit hole of creating a load balancer and trying to host on Google’s machines when I was trying to add SSL

Benefits of Hugo

So far, hosting this content in Cloud Storage hasn’t costed me a penny yet, but we’ll see (I accidentally spent $0.15 on unecessary Cloud CDN at this early stage).

Much easier for me to build content. It feels much easier to write with a notepad-like interface (VSCode) and Markdown format is quite intuitive to adopt.

Very good page speed scores