DEV Community

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

How to convert a simple blog from Gatsby to Hugo

Jenn
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.
・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.

Discussion (5)

Collapse
jeffpascal profile image
Pascal Jean-Francois • Edited

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

Collapse
geekgalgroks profile image
Jenn Author

I don't feel like supporting Gatsby anymore.

Collapse
rametta profile image
Jason
Collapse
yyyyaaa profile image
Ha Gia Phat

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

11ty.dev/

Collapse
alfieqashwa profile image
alfieqashwa

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

It's super fast. Seriously.