loading...
Cover image for How to convert a simple blog from Gatsby to Hugo

How to convert a simple blog from Gatsby to Hugo

geekgalgroks profile image Jenn ・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

  1. Backup everything or create a new branch.
  2. Rename the content folder to content1.
  3. 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
    
  4. Add a theme, I used Hermit

    git clone https://github.com/Track3/hermit.git themes/hermit
    
  5. Add the theme to the site config.

    echo 'theme = "hermit"' >> config.toml
    
  6. Start the Hugo server.

    hugo server -D
    
  7. 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.

  1. Create the folder posts under content.
  2. Copy a blog post from content1 to the new posts folder.
  3. Rename index.html to the desired slug name for the post.
  4. 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.

Posted on by:

geekgalgroks profile

Jenn

@geekgalgroks

Jenn is a self taught web developer who specializes in usability and accessibility. She is easily spotted at conferences by her bright lipstick and various code dresses and t-shirts.

Discussion

markdown guide
 

Why was the move worth it? What can hugo do that gatsby doesn't?

 

I don't feel like supporting Gatsby anymore.

 
 

IMO Eleventy is better, you might wanna switch to that instead. Check it out!

11ty.dev/

 

I convert to NextJs. I create total 2020 properties on next-with-typescript.vercel.app/pr...

It's super fast. Seriously.