Introduction

When I started posting on this site, I wanted to use Docker for containerization. My only experience was with WordPress, so I aimed to self-host it with Docker.

My first public post explains how I used docker-compose to deploy my blog using containers for WordPress and Traefik.

Why I Left WordPress

While the WordPress container setup worked well initially, as my readership grew, so did the amount of spam. It became unmanageable despite numerous spam blocker plugins.

My reasons for leaving are common: Speed, Security, and Spam.

Speed

WordPress processes requests through PHP, querying the database for files to render HTML for each request, which is then sent to your browser. Hugo, however, uses pre-rendered HTML, resulting in a significant speed difference.

Security

While WordPress is generally safe, I learned about a cross-site scripting (XSS) vulnerability in a reputable plugin I was using. Although I removed it, I was concerned enough to research WordPress plugin vulnerabilities.

Spam

Even with various spam blocker plugins, I received over 1000 spam messages daily, making it hard to find genuine reader interactions.

Migrating from WordPress to Markdown

First, export your WordPress site to XML, including all content. WordPress’s official documentation explains this process.

I used wordpress-export-to-markdown to convert my content. You’ll need NodeJS and your WordPress export file to utilize this tool. Instructions can be found in the project’s GitHub repository.

Install Hugo

Refer to the Hugo Install Guide for detailed installation instructions for various operating systems, including using Docker.

Set Up Site Structure and Choose a Theme

Create a “hugo” folder with a subfolder called “content.” Place your Markdown files in “hugo/content.” Hugo will automatically generate posts from these files.

My GitHub repository for WhiteMatter.tech provides an example site structure. Explore themes on themes.gohugo.io and configure your config.toml or config.yml according to the theme’s instructions. My customized theme, a fork of PaperMod, is available on GitHub.

Run a Development Build

Use the following command to generate a local development site:

1

hugo server -D

Access the site in your web browser at http://localhost:1313.

Build Your Static Site

Once satisfied with your site, build the static files in the “hugo/public” folder with this command:

1

hugo

Serve Your Site

You have various options to serve your site. GitHub Pages is a popular choice for hosting static sites directly from a GitHub repository.

I use a local Docker image to host my site. You can find details on my previous WordPress/Traefik setup. The key is to serve the content of your “hugo/public” folder.

Optional: Serving with Docker

You can use curl or wget to download my docker-compose.yml file:

Curl:

1

curl -LJO https://raw.githubusercontent.com/RobertDWhite/hugo-webserver-docker/main/docker-compose.yml

wget:

1

wget --no-check-certificate --content-disposition https://raw.githubusercontent.com/RobertDWhite/hugo-webserver-docker/main/docker-compose.yml

Alternatively, create a docker-compose.yml file with the following content, making sure to update the path to your “hugo/public” folder:

1
2
3
4
5
6
7
8

version: "3"
services:
  nginx:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - /path/to/hugo/public:/usr/share/nginx/html

Run the following command to start the Docker container:

1

docker-compose up -d

Forward port 80 to your host machine to make your site publicly accessible.

Consider setting up a reverse proxy with Docker and implementing security measures to protect your network. I have a post on running a reverse proxy with Docker and another on hardening your network for web hosting.

I prefer this method because it allows me to rebuild and update my site automatically whenever I make changes.

Self-Hosting Security

If you self-host, read my previous posts on hardening your network security for web hosting.

Wrapping Up

I hope this guide helps you migrate from WordPress to Hugo. Good luck with your new static site!