How this site was made
Hugo is no more - I have switched static site generator once again and I think I did a good job.
ssg is a minimalistic static site generator written in POSIX shell. It automates just enough for you, and is easy to hack on (180 LoC)
Since Wolfgang switched to it, I figured I would - he patched it with article list generation, so I was completely ready.
EDIT: now you can get started really easily using my template repo.
Remove old headers
Hugo requires headers on posts (for metadata), but they're no use to
ssg. Optional step, depends on previous static site generator.
I used this (naïve) command to remove the headers from my Hugo posts and replace
title: xyz with
for f in *.md; do sed --inplace -r '1d;3,6d;s/.+\"(.+)\"/\# \1/g';done
The problem was, the
s ran everywhere, so you got weird stuff happening to quoted text. The solution is not to use
g, but I can't test that (I didn't make a backup).
I then copied these to
Make sure to have
<article></article> in the index file - this will be populated with posts.
Style your page
I decided to go with a Gruvbox-light feel, using my favourite font, IBM Plex Mono. I did use a dark feel in my old
lb blog, but I think the off-white lets the text stand out more. I find mono fonts suitable for light reading, and they have a bit more life than Serif or Sans
I padded my content in to the middle 50% of the screen - it's comfortable to read at that width.
The header is common to all pages, and links to the root. This prevents the need for a HOME button. Links are italic (which looks soo nice in IBM Plex Mono)
ssg puts the contents of
src/_header.html at the top of every page
Make sure to add
<html><title></title> for ssg to detect and fill. The rest needs no wrapping (except if you're an XHTML nerd).
Grab an icon for the favicon - I just used the paint-ish picture of 433 Eros I use everywhere - and put it in
src/favicon.png. Grab an empty
ico to put in
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"> (here's one).
<link> for your
style.css, and your Google Fonts link (go to Styles, select some families, and add the
<link> from Embed )
You can insert your analytics if you choose. I use Fathom, on my own server. It's easy to set up, easy to browse, and all under your control. You can follow their guide - make sure to use a strong password and use
mktemp -u XXXXXXXX.yoursite.xyz for the domain. I got it set up in an afternoon.
After that, it's all content. I added my header, of course.
Build and deploy
After all the hard work, it's time to deploy. I won't go through Nginx configuration (it's really simple).
First, it deletes
dst (because of some bug which causes unclean rebuilds), and recreates it. Then it runs
./ssg5 src dst "skuzzymiglet's site" https://skuz.xyz (source, destination,
I give my self a little notice of the total weight with
echo "Public folder size: $(du -h --summarize dst/ | cut -f1)".
rsync --delete -rz -e ssh --info=progress2 dst/ firstname.lastname@example.org:/var/www/skuz.xyz/
- Delete destination files (in case I redact something)
-rrecurses into directories
-zcompresses during transfer
-e sshuses SSH to transfer the files
--info=progress2- progress for all files, unlike plain
- The directory to copy
There are so many other options in
rsync so this script will probably change over time
Even though I'm a minimalist, my images were HUGE. My old site totalled 8M, mostly because of big, 3200x1800 PNG screenshots.
ffmpeg to convert all images to the WEBP format, which achieves pretty small sizes. After also scaling from 3200x1800 to 2560x1440, the images were 8 times smaller.
After running it through PageSpeed Insights, I resized the profile on the front page to get all the way to 98 (wohoo!).
Now you've got yourself a nice, minimalist website. Just create articles in
src/, and precede with
_ to indicate drafts, which are excluded automatically
ssg can build a good site but I anticipate that I'll add many patches. I will publish a GitHub repo with some of my changes soon.