Publish Free Static Websites With Firebase, Hugo and Google Cloud Builder -- Part 1

Static site frameworks like Hugo allow you to manage content with Markdown and publish content via scalable hosting platforms like Firebase hosting. Uptime, performance and operations cost per user can't be beat -- you can easily hit millions of pageviews for less than $10/ month

In this tutorial we'll make a production-ready personal website site, that supports multiple collaborators, built using Hugo. Moreover, we'll publish with the free-to-start Firebase Hosting CDN, and build automatically using Google Cloud Builder.

Prerequisites

1. A Google Cloud Platform Account & Project -- You can use the free tier
2. A Firebase project -- also free
3. Access to the Google Cloud Shell -- Part of Google Cloud, this is a web-based shell which allows you to build and publish your site

Accessing the Cloud Shell Editor

We'll do our installation and editing in Google Cloud Shell, so the site can be edited from any device. It also simplifies credential management since your cloud shell automatically inherits your logged-in user permissions to write to the Repository, Docker Registry and publish to Firebase.

See the Quickstart for complete instructions

Installing Hugo

$ mkdir dl ; cd dl
# download the .deb
$ curl -LO https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_extended_0.54.0_Linux-64bit.deb
$ sudo dpkg -i hugo_extended*.deb
# test
$ which hugo
/usr/local/bin/hugo

Create a site and Preview Within Cloud Shell

$ cd $HOME
$ mkdir sites; cd sites
$ hugo new site mysite; cd mysite
$ git init && git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
$ hugo server -D --port=8080

Hit the "preview" button in the upper-right corner. At this point you can edit your site and reload the preview to see changes

Push Your Site to Google Cloud Repo

Google Cloud Repos are a good start for CI since GCP manages credentials and access. Later your site can be pushed to Github / Gitlab / Bitbucket as needed

# create the repo
$ gcloud source repos create mysite
# get the repo remote URL
$ gcloud source repos list
# this will list the repo URL .  Replace URL below with yours
$ git add remote google https://source.developers.google.com/p/...
$ git push --mirror google HEAD

Now your site source is pushed to the GCP Repo. Visit your Cloud Repo to see your files

Next Steps

At this point you have hugo, a test site and a repository set up so you can collaborate and contribute content from anywhere.

In the next article, we will set up hosting and then create build platform to remotely build and deploy the site whenever changes are pushed to the repository.