Jekyll to Hugo
This blog richardborges.net, has been running on GitHub (and Jekyll) since July 2018.
As the number of posts increased, I felt the need for a search feature. Elasticsearch is one of my favourite tools, but that would be an overkill for this static site. I wanted something small and easy.
I have been following Jeremy Likness for a while and was quite impressed by his journey, migrating from “Medium” to “Hugo”. In particular Dynamic Search in a Static Hugo Website - Jeremy Likness.
Then there was a post by Scott Hanselman Penny Pinching in the Cloud: Azure Static Web Apps are saving me money which covered how he crams his multiple sites into the Azure Static Web Apps offering.
In addition I was always facing issues with running the site locally e.g. ruby issues in Windows Subsystem for Linux (WSL)
So I was ready to migrate the site to Hugo. For my use, these are the positives:
- Hugo is easy to run locally. Seriously it is. The required files are in one Subdirectory and you add its path to $Path env variable
- I move the site from running in github to github + Azure Static App hosted
- Use Cloudflare
- ToDo: Implement search
Running Hugo locally
Visit Install Hugo on Windows to download and run Hugo locally. It is self contained and once you add the binary path to $path env, you are good to go. It uses Markdown and active reload which allows you to see your latest updates.
So far so good.
The following steps were used to migrate from Jekyll to Hugo. I have to resolve one issue with the theme i.e. open link in the a new tab
# migrate from source to target
DOS > hugo import jekyll d:\richardborges.github.io\ d:\richardborges-hugo-static-site-app\
# cd to target
D:\richardborges-hugo-static-site-app> git init
# include the theme as a submodule so that future theme upgrades are easier
D:\richardborges-hugo-static-site-app> git submodule add https://github.com/thegeeklab/hugo-geekblog.git themes/geekblog
update the config.toml https://hugo-geekblog.geekdocs.de/posts/getting-started/#option-1-download-pre-build-release-bundle
theme = "hugo-geekblog"
# initialise git
D:\richardborges-hugo-static-site-app> git add -A
D:\richardborges-hugo-static-site-app> git commit -m "initial commit"
D:\richardborges-hugo-static-site-app> git remote add origin https://github.com/richardborges/richardborges-hugo-static-site-app
D:\richardborges-hugo-static-site-app> git push --set-upstream origin main
To run the site locally, use
# # render *.md which contain drafts i.e. draft: true.
D:\richardborges-hugo-static-site-app> hugo server -D
# or
D:\richardborges-hugo-static-site-app> hugo server -D --disableFastRender
In addition I used FavIcon generator to generate and copy over
D:\richardborges-hugo-static-site-app\static\apple-touch-icon.png
D:\richardborges-hugo-static-site-app\static\favicon-16x16.png
D:\richardborges-hugo-static-site-app\static\favicon-32x32.png
To override the link behaviour i.e. to open a link in a new tab I used the tip provided here Override a Hugo Theme. Thank you Zachary Wade Betz.
Running as an Azure Static Web App
To get started I used Tutorial: Publish a Hugo site to Azure Static Web Apps Preview to get the site running in Azure
Next, I setup the custom domain using Configure a root domain where linked to this How to configure a root domain in an Azure Static Web App
The final step was completing the “Custom Domain” step in the Azure portal.
So my workflow is:
- Edit a post in VS Code i.e.
D:\richardborges-hugo-static-site-app> code .
- Commit the change to my GitHub repository. I use the beautifully made and paid for Fork git client.
- Run Hugo locally to check the post for language and content
- The commit to GitHub, kicks off a GitHub Action, which builds and releases a static version of the site in Azure Static Web App
- The newly build site can be viewed at www.richardborges.net
Whew.
Quite happy with the outcome. This setup means I have fewer hurdles when writing and publishing a blog post.