Introduction

Mark.Digital is my personal site, built to share projects, posts, and photography. Getting it up and running involved a setup on my Unraid server, Docker containers, and Hugo for static site generation, with automated deployment via GitHub Actions. Here’s a step-by-step overview of the setup.

Step 1: Setting Up Unraid and Docker

Unraid serves as the OS for my home server, and its Docker integration allowed me to containerize Hugo and other services efficiently. Here’s the basic setup:

  1. Installed Docker on Unraid: Straightforward setup thanks to Unraid’s Docker management interface.
  2. Chose a Hugo Docker Container: After trying a few options, I found a container that aligned well with Hugo’s recent updates and kept things stable.

Step 2: Automating Deployment with GitHub Actions

Originally, my server handled deployments with a bash script that synced the site to Google Cloud. To simplify things, I transitioned to GitHub Actions for continuous deployment. Now, each time I push to the main branch, the Action triggers a Hugo build and deploys to Google Cloud.

Workflow:

  • iPad: Using Working Copy for GitHub syncing and iA Writer for writing and editing.
  • Mac: VSCode is my primary editor, but I’m testing iA Writer on Mac as well.

Step 3: Asset Management with npm

Hugo handles static generation, but I use npm for managing CSS, JavaScript, and other assets to keep everything optimized.

npm Tasks:

  • CSS & JavaScript Optimization: Scripts for compressing and minifying assets.
  • Automated Build Commands: With npm handling the build, it’s a quick and clean deployment process.

Here’s my npm configuration:

"scripts": {
  "build": "hugo --gc --minify",
  "start": "hugo server --bind 0.0.0.0 -D",
  "deploy": "rsync -avz --delete public/ user@host:/path/to/website"
}

Step 4: Hugo in Docker—Common Issues

Running Hugo in Docker posed a few challenges, mainly with version mismatches and permissions:

  • Version Compatibility: Hugo updates frequently, and not all Docker containers keep up. It took some testing to find a container that stayed compatible.
  • Permissions: Unraid’s default permissions clashed with Hugo initially, requiring some adjustments to user groups and `chmod` settings.
  • WebSocket Errors: I configured URLs to absolute paths to avoid WebSocket errors during development.

Tip: Setting `–appendPort=false` in Hugo’s config helps prevent port numbers from appearing in URLs when using a reverse proxy.

Step 5: Customizing with PaperMod

For the site theme, PaperMod fit the bill with a simple, clean look and enough customization options. Here’s how I set it up:

  • Flexible Configurations: Enabled dark mode, social icons, and layout settings.
  • Content Structure: Organized posts, galleries, and projects as Markdown files.
  • Image Galleries: Currently experimenting with layouts for a clean, responsive gallery to showcase photography.

Example config snippet:

yaml
baseURL: "https://mark.digital/"
title: "Mark's Digital Space"
theme: PaperMod

params:
  ShowReadingTime: true
  ShowShareButtons: true
  UseHugoToc: true
  keywords: ["Photography", "Blog", "XRay.Tech"]

Final Setup and Deployment

With everything configured, Mark.Digital is live and hosted on Unraid, containerized with Docker, and deployed automatically via GitHub Actions. The result is a clean setup that makes updating the site straightforward and flexible.

That’s the core setup behind Mark.Digital—Unraid, Docker, Hugo, and GitHub Actions, working together for an easy-to-maintain personal site.