How I saved $500 a year migrating from Wordpress to Hugo

  • Post by Adam Driscoll
  • Jul 15, 2020
post-thumb

In 2016, I started this blog while traveling around Europe. We were living in Switzerland and I wanted to share our story of how working remote and traveling was going. Since moving back to the states, I’ve neglected this blog quite a bit. It started to cost me. I originally setup my site on Siteground using their one-click Wordpress tool.

This post goes over how I moved from Wordpress to Hugo and saved 500 USD a year in the process.

The Ease of Wordpress

Companies like Siteground make it very easy to setup Wordpress. You can effectively buy a domain, hosting, a certificate and deploy the entire stack with just a few clicks.

Authoring posts on Wordpress and installing themes and plugins is easy for someone that isn’t techy. I’m pretty techy but sometimes I just don’t want to deal with tech so I went the Wordpress route. I’m happy to say, I’ve made the transition back into a techy solution. :)

The Cost of Wordpress

Siteground offers hosting packages starting at 6.99 USD a month. This seems reasonable but the price changes after one year to 14.99 USD a month. At some point and time, I decided I wanted the most expensive package at 39.99 USD a month. It offered more bandwidth and CPU time for my Wordpress site. That’s 479.88 a year!

I was planning on becoming a travel blog influencer but, based on my current career choice, that didn’t quite pan out. As you can imagine $479.88 a year for hosting isn’t worth it for a blog that gets a few hundred visitors a month.

The (Hidden) Cost of Wordpress

I’ve had a lot of Wordpress sites. Pretty much all of my blogs have been Wordpress. It’s just too easy to get started and then you’re locked in. All of your posts are stored in some PostgreSQL or MySQL database somewhere and aren’t source controlled very easily. Additionally, I found it difficult to keep Wordpress and plugins up to date and keep the site running quickly. It often requires caching on the PHP end or via services like Cloudflare.

What I discovered was that, depending on your situation, you can actually migrate from Wordpress pretty easily. As for this blog, it’s mostly static blog pages so it was pretty easy to find tools to do it.

Migrating to Hugo

The first step was to extract my data from Wordpress. You can do this using Wordpress plugins. I tried a plugin to export my site directly to the Hugo markdown and file format but it didn’t work for whatever reason.

Instead, I used the Jekyll Exporter plugin. This plugin worked the first time and I was provided with a ZIP that contained all the contents of my blog. This included the all the tags, categories, posts, images and even a bunch of theme stuff I wasn’t planning on using.

Next, I had to install Hugo. I used to Chocolatey command to install it on Windows. I had originally installed just hugo but I found that I needed the extended version for SCSS support so I installed that.

choco install hugo-extended  -confirm

Once Hugo was installed, I then found that I could convert my Jekyll files into the Hugo format with the Hugo cli.

hugo import jekyll .\jekyll .\hugo

Now that my files were converted over to the Hugo format, I needed to install a theme so that I could see how it worked. I actually picked the theme I’m currently using and cloned it to my themes directory. I used the Parsa theme.

git clone https://github.com/themefisher/parsa-hugo.git .\hugo\themes\parsa-hugo

Once the theme is cloned, I had to create a config.toml file that had the correct configuration options based on the installed theme. There is an example file in the .\parsa-hugo\exampleSite\ folder.

I copied this file into the root of my .\hugo folder and updated the settings.

Once this was done, I could start the hugo server with the server command. The Hugo server runs on port 1313 by default. Unlike Wordpress, I now can easily make changes locally and see it instantly in the browser.

Set-Location .\hugo
hugo server 

One thing that the Wordpress exporter didn’t do was fix up my images. I have a lot of img tags scattered throughout my blogs that point to the full URL of where they existed on my Wordpress site. I updated a couple posts by hand but will likely write a PowerShell script to do this for the rest of them.

Hosting my Hugo Site

Now that I had a Hugo site setup locally, I needed to get it up and running on a hosting provider. I checked out Netlify and thought about just using an Azure Storage account but eventually found Render. It made it extremely easy to connect to GitHub, pull my changes, build the Hugo site and then host it. I had started with Wordpress for the simplicity so I figured picking a hosting provider that was simple was a good bet.

Plus, it’s free for static sites.

I create a new Web Service based on my private GitHub repo. I just had to authorize Render access to that repo and it hooked up without an hassle.

I setup the build command to run Hugo and told Render to look in the public directory.

Render automatically started running builds and deploys once I did this. I had some issues with the theme folder as it was cloned into another repo and the deploys were attempting to clone a submodule. I ended up just copying the files into my directory as I figured I’ll probably just modify the theme to my own liking anyways.

Custom Domain

Once I had my Hugo site running on Render, I wanted to configure my domain to point to the Hugo site. I’ve been pretty stoked on Cloudflare lately so I added my wandering.life domain to Cloudflare and updated my nameservers with GoDaddy.

Next, I added the DNS records that Render requires for pointing to my Hugo site. Both Cloudflare and Render automatically create (free) certificates for your web site. I had to make sure to turn on Full encryption on my Cloudflare settings before I could access my site correctly.

The Cost of Hugo

The total cost for this migration was exactly 0 USD. All the services and plugins I used were free. I did spend a couple of hours getting all of this going so it’s not a one-click migration but it was much better than I was expecting.

Now, I can just write a post (like this one) in VS Code, commit to GitHub and my web site will update. I’m digging it so far. I’ll see how it goes for the next couple of months. I hope to migrate IronmanSoftware.com to a similar tech-stack soon.

I’ll certainly be spending some more time customizing the site and probably adding some pages. I can’t imagine I will ever need something as complex as Wordpress for a blog like this.