From humble beginnings

admannz.com

The Basics

This site is built on the following:

  • A Raspberry Pi 4 with an external SSD and 4GB RAM
  • Raspbian Bullseye
  • The Hugo open-source static site generator platform
  • The M10c theme as a base (now modified)

This box also runs a vanity mastodon server instance and Monitorix.

Why these choices?

I wanted to run a little box myself, been a while since I self-hosted anything, I already have a bunch of stuff on cloud hosted platforms, and I deliberately wanted to have to (re)learn how to construct a website, edit HTML, CSS and learn Markdown.

I went back and forth on Raspbian or Ubuntu Server, ultimately I had some challenges getting Ubuntu to see and install nicely onto the external SSD so that made the decision. But once I had completed the base OS config, they’re damn near identical anyway.

I chose Hugo as it’s been pretty easy to understand and deconstruct themes and figure out how things work, it’s lightning fast, and I love the old-skool feel of static sites :)

The M10c theme is super crisp and clean, and has the basics I wanted, a nice icon set (it uses feathericons currently but as they have decided to stop updating, I guess I’ll need to figure out how to change to simple-icons. A project for another day.)

Installation and Learnings

  1. Install Base OS and apt update and apt upgrade
  2. Installed iptables (firewall), Fail2Ban (multiple ssh attempts) and Nginx (web publishing).
  3. Deployed a base HTML file and published to ensure functionally we were up and working.
  4. Installed Hugo following the Quickstart guide so I could see how it worked and ensure I could published and apply a LetsEncrypt SSL certificate. This worked just fine, so onto figuring out how to customize and apply a theme.
  5. I tried many iterations of themes, including building my own. Ultimately the M10c theme had that nice balance of a good kickstart, easy to understand, and easy to adjust that worked just right for me. Theme installation is straight forward:
  1. And then type Hugo to recompile the site. There are 3 ways to install themes, and I had very mixed experiences trying to install and use various ones. I suspect changes are made to Hugo and Markdown engines and things break.
  2. From here it’s config and customization. I did a lot of Find and Grep searches :)

Learning: Hugo uses the Goldmark engine to render Markdown, and by default does not render raw HTML. It took a while to figure this out (the hardest thing at this point in time is knowing what to type into Google!) as I was using HTML to resize images because Markdown does not have a way to do that. You can change this by addting these lines (or changing if they exist) to your config.toml file.

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Learning: Learn about Page Bundles. Hugo has a few ways to render markdown files to static pages, and unless you have super simple text pages, it’s easier to manage a page and resources as a group.

Operations

  • I use Markdown Editor to draft posts and then copy/paste that into the .md file via SSH.
  • I use SCP to upload images to the website to link to in posts
  • I run a backup script each night via cron, Hugo is self contained so backup/restore is super easy
  • I also use rsync to duplicate the site to a dev instance to mess with editing configuration changes

So this has been incredibly fun, I’m still learning and have a few things I want to change, expand and update, but the refreshing of knowledge has been invigorating and I’m really looking forward to figuring a few more things out, and spending my time more on writing that tech :)