Day 1: The Static Foundation - Automating Hugo Like a Pro

The first step in the 100-day DevOps and Solution Architecture journey, is learning how to build and deploy static websites with a simple continous integration and continuous CI/CD pipeline in bash. Most Developers never launched a single website or managed a basic VPS in their entire careers. This is concerning.

I’ve been coding for 20 years so I’ve seen the web cycle through endless bloat HTML 3, HTML 4, Flash, and now JavaScript bloat. For this project, I’m returning to the most efficient stack possible. Static sites with Hugo. (Video walkthrough available)

Why Hugo?

Hugo is a static site generator written in Go. It’s a single binary you can copy and paste around. THis means no need for any dependencies, no npm install hell, no broken dependencies, and zero maintenance. Plug and play ready. It’s perfect for documentation, blogs, and even commercial sites that need to be lightning fast. If you deploy a site with Hugo it’s going to be almost 100% secure (unless you manage to somehow add a NPM cryptobot to your local environment :facepalm:)

It has image processing built in (convert, resize, crop, rotate, filters). Javascript bundling (tree shaking, code splitting), sass processing and also tailwindcss. Contains a built in embedded web server for local development. Everything in one single binary.

If you’re a software developer or devops engineer chances are at one point in your life that you will need to build a site for yourself, someone else, a project you’re passionate about or just a documentation for a work project. Hugo is perfect for this job. It renders a static site from markdown or asciidoctor content (but it’s configurable to other formats aswell). COnfiguration is done with TOML or YAML which is the default DevOps configuration nowadays. So by using it you’lll most likely have shareable skills.

With jamstack you can easily add a headless cms or basic web shop to extend hugo and add dynamic features to it. Adding a hugo repository to git or fossil and a CI/CD pipeline can simplify content creation.

What You will accomplished today:

Initialize the site using the Relearn theme, which provides the professional “Technical Wiki” feel I want for this journey. You’ll learn how to set hugo up, experiment with it and as a bonus I’ll give you a simple CI/CD bash script to take your hugo output and publish it as a static site. We’ll cover the details of setting a Linux virtual private server for your website in future days;). For now stick to the basics.

Download hugo and place it in your $PATH.

1. Site Initialization:

hugo new site fullstackdevops.eu
cd fullstackdevops.eu
hugo mod init fullstackdevops.eu

What the above does is create a new directory and initialize hugo modules. So it can automatically fetch the layout template from github in the next step, otherwise you’d have to manually download and copy it to the layouts folder. Which you can do as an exercise, using git submodules as layouts is also a good way to get the newest version of a layout template. Feel free to change the site name to something of your own;)

There is a plethora of documentation out there on how to configure and use hugo, I’m not going to go into the details. There are even some books on this

2. Configuration (hugo.toml):

I’m using Hugo Modules to manage the theme. It keeps the repository clean.

baseURL = 'https://fullstackdevops.eu/'
languageCode = 'en-us'
title = 'Full Stack DevOps'

[module]
  [[module.imports]]
    path = 'github.com/McShelby/hugo-theme-relearn'

3. The Magic CI/CD Deployment PipeLine using Bash

Most people spend hours fighting GitHub Actions or complex CI/CD pipelines doing over engineering. I spent 5 minutes writing a Bash script which acts as a basic CI/CD pipeline. It’s fast, reproducible, and requires zero external dependencies.

This script builds the site, minifies the assets, tars the public folder, and ships it via SCP to a virtual private server (VPS)virtual machine on any cloud.

It uses basic unix and linux tools which are available by default on any linux distribution. These tools have existed for the past 30 years and will continue to exist in 30 or more. (ssh, scp, tar etc;).

build.sh

#!/usr/bin/env bash

# Build the site with garbage collection and asset minification on
hugo --gc --minify

# Package the public output folder as a gzipped tar - you can use lz4 or whatever yo uwant
tar -czvf fullstackdevops.eu.tar.gz public

# Ship it to the VPS (Custom SSH port for security)
scp -P 2327 fullstackdevops.eu.tar.gz fullstackdevops:~/

# Remote extraction into the web root
ssh fullstackdevops "tar --strip-components=1 -xf fullstackdevops.eu.tar.gz -C /var/www/fullstackdevops.eu"

Whenever I make any change in markdown I just run ./build.sh and the site is built and automatically updated;).

The Secret Sauce: SSH Config

To make the script above work, I use a simple ~/.ssh/config entry. This keeps my credentials and port settings out of the script and in my local environment where they belong. We will explore setting up SSH in future days;). If you don’t have SSH setup it will ask for a password, however, in my case, it will automatically work with no password.

Host fullstackdevops
  Hostname fullstackdevops.eu
  User youruser 
  Port 2233

Video Walkthrough

If you want to see exactly how I set this up and why I prefer this “Lean CI/CD” approach, check out my full video tutorial:

Automate Your Hugo Static Site Like a Pro CI/CD Made EASY

What’s Next?

Now that the “Press Release” platform is live, Day 2 begins. In the next days we’ll dive into the “Art of Writing”, setting up the Local Homelab, Using virtualbox and then going on to real virtualization used by big cloud providers with KVM and libvirt;).

Getting hugo up and running on public world facing Linux server involves some extra steps not yet discussed here( some of them are explained in the video referenced above), which if you’re new might seem overwhelming. STOP don’t jump for an API or cloud service, you CAN and will do these manually, start with the easiest of all. Static hosting then a VPS!

In future days I’ll show you how:

  1. to setup your own Linux VPS - The above example expects thi
  2. Install, configure and use caddy as a reverse proxy and static site hosting
  3. Using SSH keys to login and automatically allow scp/ssh towork
  4. Many more features

Security note

In enterprise reality we might add code review and a git hook or even IAM roles. Ssh key would not be given freely to developers for production access. But those steps can and will be easily automated in future days :-).
Enterprise vision and best practices are not always followed even in larger companies. (I’ve seen this!)

We want to follow the devops and agile mantra’s of working in iteration

Follow the journey at fullstackdevops.eu