Migrating my blog from Wordpress to Hugo

I finally took the plunge and started to move my blog from Wordpress to Hugo. I had some issues recently where my Wordpress site didn’t work anymore. 1 issue was with the syntax highlighting for the code snippets, caused by an old plugin and new secure browser settings. Took me a while to fix. And recently the editor of Wordpress stopped working properly since there was a secure header setting changed on azure which broke some Javascript on the admin side of Wordpress. Also the site has never been really fast. I read more issues where people hosted their Wordpress blog on Azure with mysql as database, but somehow it never was a really fast experience. Time to look for alternatives. Ideally with almost no maintenance.

Hugo

So why Hugo? Hugo is a static website generator. The concept is not new. I used this concept in 1996 when I was building Website with Lotus Notes and their web publisher. This was before Lotus Domino came around. But Hugo and Jekyll seem to become more popular. In combination with Azure blog storage and static websites, Azure CDN, lets Encrypt SSL Certificates and CI/CD from my Github repo with GitHub actions, it seems all building blocks are readily available either free or as part of my MSDN subscription. Also costs seem to be much lower.

On twitter people recommended Hugo, Andrew Connell had a nice series of blogposts how to set this up. Aaron had a nice blogspost how to setup automatic publishing from GitHub.

Also, I suck at HTML and CSS so it was nice to find a few great themes for Hugo. I picked one with the right layout and I know how to customize the template a bit so it suits my need. It’s something I will change later as well (for example move the Google Search to Azure search for example)

These were the steps I went through to make it all work:

  1. Installed the Wordpress to Hugo export plugin (more on this later)
  2. Installed Hugo on my machine with chocolately
  3. Created a github repo, cloned it to my directory
  4. created a new hugo site
  5. installed the correct theme
  6. changed the template a little bit.
  7. moved the exported Wordpress content (.md files) to a folder under content (I put it under oldblogposts)
  8. moved all the images in the wp-content directory from the export to the static folder (still in the wp-content folder)
  9. Impressed the site already worked and all URLs seem to work when testing against http://localhost:1313 after huge server -D
  10. created azure blog storage account (step by step from Andrew Connell here)
  11. enabled static website
  12. created CDN
  13. enabled SSL
  14. Setup Azure actions to automatically publish the Hugo website to blog storage (I used these steps from Aaron)
  15. switched my DNS (fingers crossed)
  16. went live with new website
  17. being impressed with the speed
  18. created new disquss account and enabled comments
  19. changed a rule on my CDN endpoint to redirect all HTTP traffic to HTTPS (step by step here)
  20. Added Azure App insights (instructions I found here)

There will probably be a few more tweaks in the future. But these were actually the simple steps I went through to make this all work.

Issues

So did everything go smooth? Actually, for the first blog, yes. Few hours of trying out certain things and with the great export it was smooth sailing from there.

When i tried to move my other family blog I ran into issues. The export always ends up in a 502 Web server error. I guess its a timeout or an out of memory. Also the Export to Jekyll plugin returns the same error. I managed to export the database through the Azure shell so I do have the data. Just need to find a way to run the export locally or convert in a different way.

I also need to find an easy way for my wife Sandra to create content. VS Code is great. It does has a preview. Also easy to start a Hugo server to see the pages live. But it is a different workflow which I need to find a way to teach to my wife (and myself) so she is comforatble writing new content before I switch over her site.

Finally

But so far I am happy. Hosting this costs around $0.10 per day versus the $55 per month for an app service and a mysql database. It’s easy to setup. The workflow works fine for me and the automatic update works great.