How this site was made (old site)

How this site was made (old site)

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 # xyz:

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 src/

Get ssg

Follow the author, Roman Zolotarev's tutorial, but use Wolfgang's patched version instead.

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)

Add headers


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

Add a <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 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" (source, destination, <title>, prefix).

I give my self a little notice of the total weight with echo "Public folder size: $(du -h --summarize dst/ | cut -f1)".

Then, the rsync magic

rsync --delete -rz -e ssh --info=progress2 dst/ root@

There are so many other options in rsync so this script will probably change over time

Hedonistic Optimization


Even though I'm a minimalist, my images were HUGE. My old site totalled 8M, mostly because of big, 3200x1800 PNG screenshots.

I used 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.

Happy blogging!

├── my
│   ├── matrix
│   ├── email
│   ├── sourcehut
│   ├── lobsters
│   └── github
├── code
│   ├── i
│   ├── feef
│   ├── greedy
│   ├── typeup
│   ├── metro
│   └── point
├── blog
│   ├── Shell sins
│   ├── DWM tips
│   ├── How this site was made (old site)
│   └── Go as a dynamic plugin language for Go
├── wiki
├── notes
│   └── Tree-style blogs
├── pictures
├── webring
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   ├──
│   └──