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!
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:
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
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
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
My configuration is through Google Cloud DNS. It looks like this:
Create a similar record under your domain, hit create, and then visit your site in a browser:
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:
You should have a fresh new site deployed.
And that’s it. Happy coding!