Migrating my Hexo blog to Hugo
Table of Contents
This is my first post using Hugo static site generator, following the successful migration of my hexo site to Hugo
Hexo #
My previous static site was powered by Hexo, I originally started building the site 19 Apr 2020, using Hexo.io version 4 and published my first blog 30 May 2020. I enjoyed the site for several years, but the site theme is not maintained. I manually bumped jQuery to 3.5, but was unable to import the theme to v5, let along version 6!
GitHub was warning me about many security problems!
I was not “making the time” to blog, even though I had a lot of ideas, as it felt off-putting.
It was time to look around for an alternative. I wanted:
- a fast static site generator
- markdown
- code syntax highlighting
- easy to compile
- light/dark theme
- I would also like to keep the URL intact, as the original site has high SEO. Original links should still work.
Hugo #
Hugo was top of the recommendation list from Tech radar, looking at the theme and documentation it ticked all the boxes.
I had never used Go before, but looking at the documentation, once Go is installed the Hugo CLI manages the requirements for a dev server, adding a post and building the site. I therefore don’t need to learn any Go. I need to setup Go in my local development environment and add Hugo executable to run everything.
Challenge accepted!
Fast static site generator #
Hugo ticked that box and is highly recommended, go has a good reputation for fast processing.
Markdown #
Hugo has markdown and other options as standard
Code syntax highlighting #
Yep, although I don’t think as good as the theme used in Hexo, it is acceptable.
Easy to compile #
Hugo has three easy to follow CLI commands for, new, serve and build.
This command will create a new post with a title of “My first post”
hugo new posts/my-first-post.md
This command will serve hugo in a developer environment, including draft posts
hugo server -D
The website can be accessed from localhost:1313
Deploying is as simple as running the following command
hugo -D
All static assets will be published to the public folder.
Light/dark theme #
I found a nice theme called Congo built with tailwind css.
Keep the URL #
This took some investigation, but in the end was as simple as adding url = to the front matter.
Some of my post have high SEO, for example a search for setting up MySQL on wsl gives a high result. I have no idea how many people view my blog, as I don’t have or want analytics. Seeing a high SEO is good enough for me 😀
Research #
I watched Hugo - Static Site Generator | Tutorial by Mike Dane, which was the same person I watched several years ago which I picked Hexo. I had a good overview of Hugo, although I am not intending to design my own theme, just consume an existing one.
I also found the documentation for Hugo and Congo theme to be very useful.
Go #
Go or Golang is a zip file which I could download and place Golang inside Laragon. Hexo is built on Go, as a local developer dependency. The site will be static, HTML, CSS and JavaScript.
Hugo #
Hugo is an executable, which can be downloaded and placed in laragon’s usr bin folder, which means its executable from any terminal.
Local site #
Now Go and Hugo are in place I just need to update my Windows PATH, Laragon makes this simple Menu > Tools > PATH environment variable > Add Laragon to Path, log off and back on for this to be available in all terminals.
It didn’t take long to read the Congo documentation, chapter by chapter and set up my site as I required.
Import the markdown #
Now I could copy the existing markdown files, configure Hugo to keep the same url. As I had less than 15 posts I manually added the url to the front matter. If I had much more, I would have considered some form of search and replace.
Fix images #
Next the images needed to be displayed in Hugo’s specific way, the posts that had been uploaded to imgur.com automatically displayed, it was the posts that had local images which needed to be updated.
After a bit of moving files into folder and renaming them index.md, then creating an images folder, the images dropped in place, my IDE, PhpStorm, handled much of refactoring.