From Wordpress to Hugo in three days

This blog will mark its 10th anniversary in January 2024. A decade ago, I embarked on a new blogging journey with the domain vcloudnine.de. Some of you might have known my former blog before I made the switch to vcloudnine.de. I’d been running blazilla.de for over 7 years. However, by the end of 2013, I grew weary of Serendipity, a PHP-powered weblog engine. I craved a shift to Wordpress, but back then, a seamless migration path wasn’t available. So, I made a fresh start with vcloudnine, built on Wordpress.

Fast forward to 2022, and my patience with Wordpress wore thin. I was tired of constantly fixing issues, updating Wordpress, nginx, PHP, battling relentless brute force attacks, and maintaining a vServer solely for a single blog. I embarked on my first attempt to transition vcloudnine.de to something sleeker and more streamlined. Enter Hugo, an open-source static site generator. Deploying my website via GitHub and crafting blog posts in Markdown seemed like a leaner approach to rekindle my blogging enthusiasm. However, I stumbled; I underestimated the effort required to migrate over 300 blog posts. Consequently, 2023 witnessed only one blog post. But this year, 2023, I resolved to give it another shot! I refined my toolset, discovered a refined Hugo theme, and a few days before Christmas, I performed a fresh export of my Wordpress content.

Preparing the Source

The migration commenced with an XML export of the Wordpress content. This XML file served as input for wordpress-export-to-markdown, a JavaScript script that transforms Wordpress export XML into Markdown files compatible with static site generators like Hugo, Gatsby, or Jekyll. Each post was saved as a separate Markdown file with suitable frontmatter. Additionally, images were downloaded and stored, while embedded content from platforms like YouTube, Twitter, or Gist remained intact.

I found myself in possession of over 360 folders housing Markdown content and images.

Diligent Effort

The subsequent step involved setting up a local Hugo instance. Given Hugo’s availability across multiple platforms, I opted for the Windows port and added it to my %PATH%. Creating a new Hugo site was a breeze:

p.terlisten@x1c-g10 C:\Development\ hugo new site vcloudnine
Congratulations! Your new Hugo site was created in C:\Development\vcloudnine.

Next, I initialized this directory as a Git repository with git init to incorporate the Hugo theme as a submodule, following the documentation:

git submodule add https://github.com/vimux/binario themes/binario

It’s crucial to add the theme to your config.toml to ensure Hugo utilizes it. After transferring the exported Markdown content to the posts directory, I glimpsed my new blog. Launching a local web server is as simple as hugo server directly from the site directory.

The arduous task awaited: refining each of the 361 blog posts. Formatting adjustments, tag and category changes, replacing links to embedded media with Hugo shortcodes—it amounted to roughly 20 hours of meticulous work. Finally, two nifty PowerShell one-liners came to my rescue, eliminating unused images across the posts:

Get-ChildItem -r *.png | Where { (Get-ChildItem -Recurse *.md | Select-String $_.Name).Count -eq 0 } | ForEach { $_.FullName } | Remove-Item
Get-ChildItem -r *.jpg | Where { (Get-ChildItem -Recurse *.md | Select-String $_.Name).Count -eq 0 } | ForEach { $_.FullName } | Remove-Item

Deployment Pipline

My transition to a static site generator primarily aimed at leveraging platforms like GitHub Pages or Netlify. I no longer wanted the hassle of running a server solely for this blog. Netlify provided the ideal solution: a platform offering build and deployment from Git, encompassing custom domains, HTTPS, deploy previews, rollbacks, and more. The free tier sufficed for my needs. All it entailed was pushing my local Git repo to a private GitHub repository and setting up my site on Netlify. With this setup, every push (be it a blog post or a fix) triggers Netlify to rebuild my website.

Summary

In a nutshell: A Wordpress XML export, wordpress-export-to-markdown, Hugo, Git, a [GitHub(https://github.com)] repository, Netlify, and and some days off to get your stuff sorted. Feel free give feedback or ask questions on Mastodon.