Blog Migration from Wordpress to Hugo on Azure Static Web Apps
Introduction
And the time has arrived.
Many months after having read Flavio Copes’ amazing post about the value of a boring stack I’ve finally moved my blog from Wordpress to Hugo
To do so I’ve mostly followed Sander Rozemuller’s amazing blog post on the subject but a few things were outdated and I’ve had some weird issues he didn’t have.
I will be outlining my experience doing the migration in this post.
Migration Experience
The migration followed these steps:
- Export the content using Jekyll Exporter
- Spend a lot of time cleaning up the code and properly organizing the folders structure
- Install Hugo and prepare the git repo in which all of this will live
- Install geeky-hugo by unzipping the archive and copypasting it to the /themes/geeky-hugo folder
- Realize it doesn’t work and google doesn’t have any information at all about the following error:
Error: Error building site: failed to render pages: render of "page" failed: "RAIN-BlogCode\themes\geeky-hugo\layouts\_default\baseof.html:14:4": execute of template failed: template: _default/single.html:14:4: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "RAIN-BlogCode\themes\geeky-hugo\layouts\partials\head.html:25:3": execute of template failed: template: partials/head.html:25:3: executing "partials/head.html" at <partialCached "favicon" .>: error calling partialCached: partial "favicon" not found
- Removing it and installing mainroad in the same way
- It works! Time to adapt the config.toml, menus.toml, params.toml and adapting the Front Matter of the posts correctly
- Push to Azure Static Web Apps and getting the error outlined later
- Spend hours researching and understanding that mainroad has to be added as a git submodule. More on that later.
- Successfully having the Azure Static Web App built
- Adapting the DNS
- Fixing the favicon. See below.
- Fixing the thumbnail
- Writing this post
Overall it seems quite simple but it’s been 2 weeks since I started this project in earnest, and only now I have a functional website. Quite happy though, even if it’s not as customized as the old blog was it’s super snappy and I prefer markdown over Wordpress’ WYSIWYG editor.
There will be lots of tweaking over the next few weeks though.
Issues
Themes
Themes are not available at https://github.com/gohugoio/hugoThemes anymore, you have to choose them from here: https://themes.gohugo.io/
Installing themes in a way that works with Azure Static Web Apps
First and foremost when deploying to Azure Static Web Apps apparently if the theme is not added as a github submodule for the repository you get this error:
Using Hugo version:
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended linux/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
Total in 0 ms
Error: module "mainroad" not found; either add it as a Hugo Module or store it in "/github/workspace/themes".: module does not exist
---End of Oryx build logs---
Oryx has failed to build the solution.
Not particularly useful. The solution is to add themes like this instead of manually copypasting the folder to \themes:
git submodule add https://github.com/$githubcreator/$githubreponame.git themes\$themename
Example:
git submodule add https://github.com/Vimux/Mainroad.git themes\Mainroad
To remove it:
# Remove the submodule entry from .git/config
git submodule deinit -f path\to\submodule
# Remove the submodule directory from the superproject's .git/modules directory
rm .git\modules\path\to\submodule -r -fo
# Remove the entry in .gitmodules and remove the submodule directory located at path/to/submodule
git rm -f path\to\submodule
Source: https://gist.github.com/myusuf3/7f645819ded92bda6677
Dealing with Mainroad’s favicon being configured inside the submodule
A bit later I realized that Mainroad doesn’t support having the favicon in the main folder but to change it the favicon.ico in the themes folder has to be replaced, which is problematic since it was added through git submodules.
To go around the issue I’ve forked the repo to https://github.com/sergiopadure/Mainroad, then removed the submodule from the original repo and added mine:
git submodule deinit -f themes\Mainroad
rm .git\modules\themes\Mainroad -r -fo
git rm -f themes\Mainroad
git submodule add https://github.com/sergiopadure/Mainroad.git themes\Mainroad
Now the favicon in themes\Mainroad\static can be replaced with mine and the change pushed to my forked version of the repo. I’ll probably move away from Mainroad in the future though, it’s quite limited in the options it makes available.
Post image not loading in preview on Linkedin with Mainroad
Mainroad is indicated as having support for Hugo’s base templates which include Open Graph: https://github.com/Vimux/Mainroad
That doesn’t seem to be the case though. When analyzing the URL of a post through the Linkedin Post Inspector this is the result:
I’ve attempted the solutions found online but none of them are working, and neither does the alternate values that Linkedin provides. Work in progress for now.
Conclusion
Happy to have taken the jump to move things away from the heavy infrastructure of Wordpress and to something simple that allows me to focus on content. And going from 40€/mo for a VM on AWS to the Azure Static Web App Free tier is also quite nice.
If you want to check out the repo it’s here: https://github.com/Raindrops-dev/RAIN-BlogCode
Huge thanks to Sander Rozemuller for his guide!
