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

The first step in the 100-day DevOps and Solution Architecture journey, is choosing a platform that is as fast and pragmatic as the systems I build.

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.

Why Hugo?

Hugo is a static site generator written in Go. It’s a single binary—no npm install hell, no broken dependencies, and zero maintenance. It’s perfect for documentation, blogs, and even commercial sites that need to be lightning-fast and secure.

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.

If you’re a software or devops engineer you need to use hugo for presentation and documentation sites.

What You will accomplished today:

Initialize the site using the Relearn theme, which provides the professional “Technical Wiki” feel I want for this journey.

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;).

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 “Unicorn” Deployment why Bash > Over-engineering

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 my VPS.

It uses basic unix and linux tools which are available by default on any linux distribution

#!/usr/bin/env bash

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

# Package the output as a gzipped tar
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"

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.

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 1 begins. We dive into the “Art of Writing” and setting up the Local Cloud with Terraform and KVM.

In future days I’ll show you how:

  1. to setup your own Linux VPS
  2. Use caddy

Follow the journey at fullstackdevops.eu