← Back to Bootcamp

Lesson 6: Static Site Generator Pipeline

Build a modern workflow: write in Markdown, generate HTML, deploy with one command

Prep
Apache
Files
Firewall
Network
Router
DNS
HTTPS
Progress: 0/4 steps completed
1
What is a Static Site Generator?
Write content, not HTML

The old way vs. the new way

Traditionally, you write raw HTML for every page. A static site generator (SSG) lets you write in Markdown — a simple, readable format — and converts it to HTML automatically. You define templates once, and the SSG applies them to every page. The result is a folder of plain HTML files that any web server can serve instantly.

Why use an SSG?

  • Write faster — Markdown is simpler than HTML tags
  • Consistent design — One template, hundreds of pages
  • Version control — Markdown files work perfectly with Git
  • No database — Generated HTML is fast, secure, and portable
  • Preview locally — See changes before pushing to production

Popular SSG options

  • Hugo — Fast, single binary, Go-based
  • Eleventy (11ty) — JavaScript, flexible, simple
  • Jekyll — Ruby, GitHub Pages native
  • Astro — Modern, islands architecture
  • VitePress — Vue-based, great for docs
2
Install Hugo
The fastest static site generator

Why Hugo?

Hugo is a single binary with no dependencies. It builds thousands of pages in milliseconds. It uses Go templates for layouts and has built-in features like image processing, RSS, and multilingual support. For this lesson, we use it because it is the fastest to install and run.

Install on your Mac (local development)

brew install hugo

If you do not have Homebrew, install it first from brew.sh

Install on your Linux server (optional, for builds)

sudo apt install hugo -y

Verify installation

hugo version
3
Create Your First Site
Scaffold, theme, and content

Create a new site

hugo new site my-blog cd my-blog

Add a theme

git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo "theme = 'ananke'" >> hugo.toml

Create your first post

hugo new content posts/hello-world.md

Edit the post

--- title: "Hello World" date: 2026-06-09T10:00:00Z draft: false --- This is my first post written in Markdown. No HTML tags needed. ## Why this matters - Simple syntax - Fast rendering - Portable content

Preview locally

hugo server -D
  • Open http://localhost:1313 in your browser
  • -D includes draft posts
  • Changes auto-reload as you edit files
4
Build and Deploy
Generate HTML and push to your server

The build process

Hugo reads your Markdown files, applies the theme templates, and outputs a complete public/ folder of HTML, CSS, and assets. This folder is your entire website — no server-side processing needed.

Build the site

hugo
  • This creates the public/ folder with all generated files
  • Run this command every time you add or edit content

Deploy to your server

scp -r public/* tiahchia@192.168.88.8:/var/www/blog/
  • -r copies recursively (all folders and files)
  • /var/www/blog/ is the DocumentRoot from Lesson 4
  • After copying, your blog is live at blog.yourdomain.com

Automate with a deploy script

nano deploy.sh

Paste this inside:

#!/bin/bash set -e hugo echo "Deploying to server..." scp -r public/* tiahchia@192.168.88.8:/var/www/blog/ echo "Done!"
chmod +x deploy.sh ./deploy.sh

⚠️ Build errors?

  • Check hugo.toml — Make sure baseURL is set to your domain
  • Check theme — Some themes need extra configuration in hugo.toml
  • Check drafts — Posts with draft: true are excluded unless you use -D