I decided to move the site from Gatsby over to using Hugo! I originally created this site so that I can learn React while writing posts about the topics I am learning. The code for the first site using Gatsby can be found here.

I didn’t originally set out with the intention of going from Gatsby straight to Hugo. I stumbled upon Jekyll, VuePress, Gridsome, Sapper, and others. The ones that stood out in my search though were Hugo and Sapper. I researched this a bit more and decided that using Hugo and applying a theme that I liked would allow me to focus more on learning and thus started the transition over to Hugo.

Reasons

The reasoning behind wanting to find an alternative to Gatsby was to have something that can be easily added to with minimal tweaking and modifying. I wanted the ability for it to ‘just work’ without creating react components to modify the navbar or to write JSX files for specific pages or use MDX. I didn’t want to have to continue wading through plugin-ins and installing all of their dependencies. With Hugo it’s a self-contained executable. You’ve pretty much everything you need once it’s installed. It can be configured for certain things if the basic installation doesn’t have what you want. Once done, invoke hugo serve in a terminal and you’re ready for development. The abundance of Hugo themes makes it incredibly easy to get started and the addition of adding the theme is easily done through creation of a themes directory. Including Netlify CMS was also pretty straight forward as opposed to Gatsby where I remembered having to modify /gatsby-config.js or a /gatsby-browser.js and do additional things to have it working. Including images in the markdown and videos within the markdown of Hugo just worked where as with Gatsby I had to find a plugin that would allow for adding images or videos.

Hugo Theming

As mentioned above, Hugo offers themes from many generous individuals to use for the appearance of your site. I originally went with PaperMod when looking over the themes as I liked the clean minimal look. I then found Fuji and stuck with that as it also had a minimal look but offered the ability to toggle between light and dark mode built in. With the trend of many developers and users using dark mode I figured I should provide the people what they want. (Even if I disagree and don’t particularly like dark themes).

Installing the Fuji theme was pretty straight forward. The Fuji theme’s ‘Getting started’ section in their README would have you up and going using git submodules. Since I’m not too familiar with git submodules I simply downloaded the zip and extracted the theme to the themes folder. I realize the consequence of this approach would be that I would need to periodically, if I would like the most up-to-date release of the theme, have to download the zip and extract it. With the git submodules my understanding is that I could simple pull and merge the latest release of the theme into the repository of my site. Down the road I intend on learning how to use git submodules and how to incorporate that into the Netlify CI/CD workflow but for now downloading the zip works well enough.

With the Fuji theme installed I then simply followed the rest of the directions provided in the README for Fuji, defined the configuration, and I had the website up and going with everything all laid out. No need to create components, installing some plugin, or writing in JSX or MDX. With the Netlify CMS installed following Netlify’s documentation for Hugo I was able to write out this post using the Netlify CMS!