Hugo on cloud storage

Here we are ! This is first article of my new blog, and as every new tech blog, I have to explain why and how this blog is configured. Since 2015, I started to use public cloud, specially AWS, for work, and I loved it ! Very quickly after, I started to learn and use Terraform. This kind of tool that make you fall in love with public cloud, automation, and DevOps philosophy.

Basically, the website is hosted on Google Cloud Storage behind a Google Cloud Load Balancer in order to provide HTTPS support for the blog.

First of all, we need to create the infrastructure - the resources where the Hugo static files will be hosted.

Terraform

Obviously, I use Terraform to create, manage, and handle public cloud resources.

Usage

You can find the complet source code up to date on my github repository:
https://github.com/priolix/blog.prioli.xyz-terraform

Terraform
- 00-variables.tf
- 00-variables.tfvars
- 01-terraform.tf
- 02-gcs.tf
- 03-lb.tf
- 99-ouputs.tf
- account.json

#Credetials
account.json

# Compiled files
*.tfstate
*.tfstate.backup
terraform.tfstate*
 
# Module directory
.terraform/

Update variables in 00-variables.tfvars

gcp_project_name = "spartan-studio-125417"
region = "us-west1"
hugo_bucket_name = "blog.prioli.xyz"
hugo_bucket_location = "us-west1"

terraform plan
terraform apply

01-terraform.tf

In 01-terraform.tf I describe which provider to use and where to find credentials.
I also lock and fix the Terraform and Google provider version, Terraform is still in “beta” and evolving quite frequently in terms of syntax. They often introduce breaking changes that,s why it’s a Good Idea to fix, and lock the versions.
Finally, I describe where to find the tfstate and I chose to use a bucket. Which is a great option specialy when you work as a team.

terraform {
  required_version = "= 0.12.26"
  required_providers {
    google = "= 3.27"
    google-beta = "= 3.27"
  }
  backend "gcs" {
    bucket      = "spartan-studio-125417"
    prefix      = "blog.prioli.xyz"
    credentials = "account.json"
  }
}
provider "google" {
  credentials = file("account.json")
  project     = var.gcp_project_name
  region      = var.region
}

02-gcs.tf

In 02-gcs.tf I create a bucket and set it up as public.

resource "google_storage_bucket" "blogpriolixyz" {
  name     = "blog.prioli.xyz"
  location = "us-west1"

  website {
    main_page_suffix = "index.html"
    not_found_page   = "404.html"
  }
  cors {
    origin          = ["http://blog.prioli.xyz"]
    method          = ["GET", "HEAD", "PUT", "POST", "DELETE"]
    response_header = ["*"]
    max_age_seconds = 3600
  }

  force_destroy = true
}

resource "google_storage_bucket_iam_binding" "binding" {
  bucket = google_storage_bucket.blogpriolixyz.name
  role = "roles/storage.objectViewer"
  members = [
    "allUsers",
  ]
}

03-lb.tf

In 03-lb.tf we describe the LoadBalancer and setting up our bucket as a backend for both HTTP and HTTPs.

resource "google_compute_backend_bucket" "blogpriolixyz" {
  name        = "blogpriolixyz"
  bucket_name = google_storage_bucket.blogpriolixyz.name
  enable_cdn  = false
}

resource "google_compute_global_address" "blogpriolixyz" {
  name = "blogpriolixyz"
}

resource "google_compute_url_map" "blogpriolixyz" {
  name            = "blogpriolixyz"
  description     = "a description"
  default_service = google_compute_backend_bucket.blogpriolixyz.self_link

  host_rule {
    hosts = ["*"]
    path_matcher = "allpaths"
  }

  path_matcher {
    name            = "allpaths"
    default_service = google_compute_backend_bucket.blogpriolixyz.self_link
  }
}

#HTTP
resource "google_compute_target_http_proxy" "blogpriolixyz" {
  name             = "static-http-blogpriolixyz"
  url_map          = google_compute_url_map.blogpriolixyz.self_link
}

resource "google_compute_global_forwarding_rule" "httpblogpriolixyz" {
  name       = "httpblogpriolixyz"
  target     = google_compute_target_http_proxy.blogpriolixyz.self_link
  ip_address = google_compute_global_address.blogpriolixyz.address
  port_range = 80
}

#HTTPS
resource "google_compute_target_https_proxy" "blogpriolixyz" {
  name             = "static-https-blogpriolixyz"
  url_map          = google_compute_url_map.blogpriolixyz.self_link
  ssl_certificates = [google_compute_managed_ssl_certificate.blogpriolixyz.self_link]
}

resource "google_compute_global_forwarding_rule" "httpsblogpriolixyz" {
  name       = "httpsblogpriolixyz"
  target     = google_compute_target_https_proxy.blogpriolixyz.self_link
  ip_address = google_compute_global_address.blogpriolixyz.address
  port_range = 443
}

resource "google_compute_managed_ssl_certificate" "blogpriolixyz" {
  provider = google-beta
  name = "blogpriolixyz"
  project = "spartan-studio-125417"
  managed {
    domains = ["blog.prioli.xyz."]
  }
}

Hugo

Hugo is a static site generator written in Go. Wikipedia

Instalation

I’m using ubuntu as main OS on my computer, so this is how I proceed to install Hugo

wget "https://github.com/gohugoio/hugo/releases/download/v0.72.0/hugo_0.72.0_Linux-64bit.deb" 
sudo dpkg -i hugo_0.72.0_Linux-64bit.deb

You can download the latest version here
Of course there are many ways, depending on your habits and prefered OS:
https://gohugo.io/getting-started/installing/

Theme

I’m using this theme on the current version of the blog :
https://github.com/zwbetz-gh/cupper-hugo-theme

Deployment

Configuration

Everything happen in config.toml file :

[[deployment.targets]]
# An arbitrary name for this target.
name = "blog.prioli.xyz"
# The Go Cloud Development Kit URL to deploy to. Examples:
# GCS; see https://gocloud.dev/howto/blob/#gcs
URL = "gs://blog.prioli.xyz"

Workflow

# Export the Google Cloud Platform credentials
export GOOGLE_APPLICATION_CREDENTIALS="./account.json"
# Generate the statics files
hugo -D
# Launch a local webserver to test and visualise the modification 
hugo server
# Deploy to the target source
hugo deploy

Conclusion

Hugo is a versatile tool that allows you to deploy static website via CLI on many services providers (AWS, GCP, Apache/Nginx….)
https://gohugo.io/hosting-and-deployment/
You can obviously use the power of the tool to setup a CI / CD especially if you publish content regularly and work with a few people.
Maybe I’ll implement that in a next version of this blog… stay tuned !

Hugo on cloud storage

Terraform

Usage

.gitignore

00-variables.tfvars

01-terraform.tf

01-terraform.tf

02-gcs.tf

02-gcs.tf

03-lb.tf

03-lb.tf

Hugo

Instalation

Theme

Deployment

Configuration

Workflow

Conclusion