Hosting a Hugo Site in a Google Bucket

Jul 3, 2018 16:47 · 652 words · 4 minute read Hugo Google Cloud

You’re reading a Hugo site right now. It’s not hosted in a Google Bucket, but it should be, because Google Bucket hosting costs next to nothing. If I didn’t have an existing server to reuse, I would have used a Google Bucket. For anyone starting out, this is a great way to host a site for almost nothing.

Hugo is a static site generator. It takes some local files on your computer and converts them into HTML files in a directory structure that allows pretty URLs without custom routing. This costs almost nothing to host because it doesn’t have a database, and it doesn’t require custom computation.

As far as Hugo hosts go, you can pick any static file host. Some people host it on S3, some people host it on GitHub, some people host it on a cheap web service. I’ve chosen to host it in a Google Cloud Bucket. This costs pennies per month, and it’s extremely easy to setup, so let’s get started!

Prerequisites

Make sure you have the following software and services installed and configured:

All of the commands in this blog post assume you’re using a Mac or Linux. These commands will probably work on Windows, but they’ll may require some modifications.

Step 1: Create a Hugo site

Run the following in a Terminal:

hugo new site incredible-blog
cd incredible-blog

This creates a folder named incredible-blog and populates it with a default website.

Next, pick a great theme for your Hugo site. You have quite a few options at https://themes.gohugo.io/. I like Casper Two, so I’ll use that one:

git clone https://github.com/eueung/hugo-casper-two.git themes/casper-two
cp themes/casper-two/exampleSite/config.toml .

After this, you can modify config.toml as much as your heart desires. This will change your site to have a different title, subtitle, description, social handles, etc…

Now let’s create a post:

hugo new post/hello-world.md

Open up your new post located at content/post/hello-world.md in your favorite text editor, and change draft: true to draft: false. It should look something like this:

---
title: "Hello World"
date: 2018-07-03T17:39:50-04:00
draft: false
---

Build your website with:

hugo

Take a look at your site by running the default Hugo server, and then opening a browser to http://localhost:1313/:

hugo server -D

And you’re ready to go! Let’s host it.

Step 2: Create your Google Bucket

Let’s create your Google Bucket. The name of this bucket should be the website domain where you want to host it. In this case, I want to host it at http://example.stephenmann.io, so I’m going to name my bucket example.stephenmann.io.

Run the following to create your bucket:

gsutil mb gs://example.stephenmann.io/

By default, this bucket doesn’t let anyone read the contents. Let’s update its default permissions:

gsutil defacl ch -u allUsers:READER gs://example.stephenmann.io

Now let’s tell it to resolve directories to index.html and resolve missing pages to 404.html:

gsutil web set -m index.html -e 404.html gs://example.stephenmann.io

And let’s push our website!

gsutil -m rsync -R public gs://example.stephenmann.io

Step 3: Point domain at Google Bucket

The last step depends on your domain host. You have to add a CNAME record for your website address and point it at c.storage.googleapis.com.

My configuration is through Google Cloud DNS. It looks like this:

Figure 3

Create a similar record under your domain, hit create, and then visit your site in a browser:

open http://example.stephenmann.io

Step 4: Build a deployment script

I have a difficult time remembering all of these commands, so I usually create local scripts that execute them for me. If you want to make this easier, create a file named bin/deploy with the following contents:

#!/bin/sh

# Build site files.
hugo

# Upload site files to Google.
gsutil -m rsync -R public gs://example.stephenmann.io

echo Deployment completed!

You won’t be able to execute this until you give it an execute permissions:

chmod +x bin/deploy

Try running it:

bin/deploy

You should have a fresh new site deployed.

And that’s it. Happy coding!

Tweet Share

Looking for graphic design help?

I partner with designers at Handshake Studios to provide graphic design feedback to freelancers and early-stage startups.

Sign up at DesignSavior.com!

Subscribe to my newsletter to receive updates about new posts.

* indicates required