How to convert a simple blog from Gatsby to Hugo

#hugo #gatsby

Aug 16, 2020 ・2 min read

I updated my hobby blog to Hugo today. Hugo is a static site generator written in Go and it is very fast. I created that blog with Gatsby several years ago and it needed a refresh.

Switching from Gatsby to Hugo is not bad. Both use the same style of front matter and Markdown so I didn't have rewrite everything. As they are written in different programming languages, I could work on converting everything while leaving Gatsby alone.

Adding Hugo

Backup everything or create a new branch.
Rename the content folder to content1.
Run the following command to generate a new Hugo site in the existing web site folder (it will not work if a content folder already exists).
```
hugo new site . --force
```

Add a theme, I used Hermit

git clone https://github.com/Track3/hermit.git themes/hermit

Add the theme to the site config.
```
echo 'theme = "hermit"' >> config.toml
```
Start the Hugo server.
```
hugo server -D
```
Start moving content.

Moving content

In Gatsby, all my blog post files were named like the following: content\blog\postname\index.md. In Hugo, the postname folder was not needed so I began the slog of moving and renaming my files.

Create the folder posts under content.
Copy a blog post from content1 to the new posts folder.
Rename index.html to the desired slug name for the post.
Repeat.

Writing new content

I was not able to move my About and Equipment pages, as they were written in JavaScript. I had to write new Markdown files for them but writing two pages in Markdown is much better than rewriting a whole site.

Gotchas

I had to also move my static content from src folder to a new top level folder called static.

As my blog content had a lot of embedded tweets, I had to change all of the references over to a shortcode.

Deleting Gatsby

Once I was happy that all my content was moved over and appearing in Hugo, I began deleting all the Gatsby files.

I removed:

gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json
src/
yarn.lock
content1/

Converting my blog was a bit tedious, but I think it was worth it. I was able to correct spelling mistakes that had been up for years and add tags to the posts.

It only took 8 hours, 20 commits, and 7 builds.