Building a Hugo web site & Hosting on Google Cloud
Note: This example uses Windows 10, git bash, Google Cloud SDK (gsutil), the Google Cloud console, and the Hugo static site builder. Familiarity with each will help. Hugo is beautiful and elegant if you are a skilled tinkerer. If you are not, or if you fear the command line, just head over to WordPress right now.
For the past two years, my personal web site has (embarrassingly) been on Squarespace – due to 1) laziness and 2) a temporary lapse of reason due to effective marketing. They told me it would be “easy” and so I gave them my money, only to have my personal bias that WYSIWYG editors are the work of the devil confirmed many times over. I’ve been wanting to atone for my sins, but haven’t had the time to think about it because 2020.
But it’s holiday season! And, inspired by datalorax and his new data science teaching site, and with the breezy unencumbered mental space of almost 10 days away from work, I decided it was time to get to work and learn Hugo, the “world’s fastest framework for building websites.” It’s a templating system you can use to generate static websites, and it reminds me a lot about the “object oriented web design” program we built in Perl in 1996 to generate e-commerce product catalogs. As a result, the nostalgia was kind of motivating.
I decided to rebuild my personal web site with Hugo, on Windows 10, and deploy to a GCS bucket that one of my Google Domains would point to, and thus serve my web site. This post talks about the big picture, and I’ll drill down into the more detailed steps at the end of this page so you can follow along if you want to build one too.
After spending two days with Hugo, I give it three (out of five) stars:
- It produces super sharp, super clean web sites and there are lots of themes to choose from
- Unlike WordPress, all the themes appear to be free
- You better be comfortable on the Unix/Linux command line though. (This is for people who want to build a car from scratch rather than going to a dealership and paying full price. Granted, they have turned this process into more of an assembly, where you just have to connect five or six different big pieces to make it all work. But the end product will not be a web site that mere mortal business leaders and content owners can make frequent updates, like they might do on a company web site powered by WordPress.)
- You’ll be happier if you know a little HTML, CSS, YAML too
- You also need to come prepared with your patience. The giant pieces to assemble are pretty much the same from theme to theme, except for where they’re not, and that’s where you may pull your hair out
- If it’s the world’s fastest framework, then there is a huge market opportunity open to deliver on that promise, both for developers and content owners. I’d say WordPress is a faster framework, if you’re willing to put up with its (not ubiquitous) performance problems.
Here’s what you need to do before you start:
- Install git bash – you’re going to need a command line that’s more useful than the Windows default
- Install the Google Cloud SDK – this is for deployment later
- Make sure you can get into Google Cloud Platform via your personal http://console.cloud.google.com link
- Buy a domain name from Google Domains
Here are the steps to building and deploying your Hugo web site. Each of these steps will go to its own blog post, so if you don’t see links here, I’m still working on those posts.
- Download Hugo, get it in your Windows PATH, set up a Hugo directory & check git bash to make sure it worked
- Build your Hugo site locally by creating a new site, pulling down a theme, and copying files in unexpected ways
- Build your public Hugo site, set up a GCS bucket to host it that has to have the name http://www.yourdomain.yourtld, make that bucket public, tell that bucket a web site will be in the bucket (ie. that the default page is index.html and errors go to 404.html), and then push the built site into the bucket
- Set up a CNAME record in Google Domains (no naked domains!) that points to c.storage.googleapis.com.
- Enjoy the hard earned fruits of your labor.
The fruits of mine are at http://www.nicoleradziwill.com
Thanks for sharing this. I’ve been meaning to move off of WordPress onto a static site, like Hugo. The maintenance of WordPress has become a drag.
Pingback: Building Your Hugo Site Locally (PART 2) ⋆ Quality and Innovation