GeekMasher.dev - Blog V2

· 1020 words · 5 minute read

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter—tomorrow we will run faster, stretch out our arms farther… And then one fine morning—So we beat on, boats against the current, borne back ceaselessly into the past. - F. Scott Fitzgerald, The Great Gatsby

The Catalyst 🔗

After around 3 years running a GatsbyJS based blog written in JavaScript / TypeScript, I have moved away from this tech-stack for a number of reasons.

Some good. Some bad.

For the 1st year (the honeymoon period), GatsbyJS was great. I could customise to my heart’s content and use tons of awesome JavaScript frameworks, etc.

But I started having second thoughts.

Every time I cd-ed into my blog’s directory or went on the GitHub repository page to start up a new post, I had a couple of thoughts.

The first thing, was the number of security issues I kept getting due to the massive amounts of dependencies used by GatsbyJS. These alerts came from both Dependabot (native in GitHub and PR creation) and Snyk (weekly emails and PR creation) which are great tools but due to the nature of the blog, all of the security issues were irrelevant because of the threat model and context.

dependabot security alerts

In some cases, for certain dependencies at the time, there were no security patches for various packages I was using. For example, this PR for gatsby-remark-relative-images I created back in 2019.

The second, being the code itself. I had a lot of custom JavaScript / TypeScript code for my blog due to the heavy customisations I was doing to create the blog I wanted. This came with the benefit of learning ReactJS and some UI development but now I want to move away from maintaining all this code.

These were some of the factors that made it hard for me to write blog posts and why it became distracting. I need my full concentration before writing a post so I don’t get distracted by my bad TypeScript code or non-existent security issues.

This means a change must happen…

I’ve dumped Gatsby, hello Hugo…

What and why Hugo? 🔗

Hugo is a static site generator written in Go which generates HTML from Markdown files. There is a massive community behind Hugo with fantastic support for many features, such as using GoLang’s templating syntax to create templates, and re-usable components.

So now that’s answered what the reason was for picking Hugo. Well, it was simple: no code, no problem.

Of course, there is code but I’m not the sole maintainer of that code. This is done by the awesome devs over in the Hugo repo. This means all of the custom code I spent hours writing, and hours figuring out how it worked, is now gone.

Dependency wise, I’ve dramatically reduced the dependencies I’m using from ~1,900 NPM packages to now 2 (Hugo and Mini, the theme).

dependabot dependencies

There are some clear use cases where GatsbyJS shines which Hugo currently doesn’t have which I wanted to point out.

Some of the Pros:

  • Better SEO Optimisation
  • Image Resizing & Optimisation
  • Using community built React components
  • Single paged application (the good and bad of that)

These are some good reasons for staying with GatsbyJS but not enough to keep me.

One of the smaller factors was, that non-JavaScript users can now access all the blog’s content without having to download and read the JSON content files. GatsbyJS, being a React based framework, rendered everything using JavaScript and when JavaScript was disabled the blog would just not work. This is a pain for some users, and now has been completely eliminated since everything in Hugo is generated prior to deployment.

Why not use Jekyll? 🔗

Well, that would be a great question if not for one fact:

Jekyll is a blog-aware static site generator in Ruby - Jekyll GitHub Repository

I think I’ll hedge my bets and use Go over Ruby.

I joke, all you Ruby fans, but it was a small factor in picking the framework to use.

Theme and Customisations 🔗

I’m using a theme called mini (or hugo-theme-mini) which is a simple and clean theme for a blog.

I have customised the templates a little to make it a bit more “me” but very little compared to GatsbyJS.

Extending the theme to suit my needs was very easy and straight forward. I used vanilla CSS and JavaScript to get all the features I wanted. This is both good and bad as you can’t use nice SCSS or front-end frameworks but this makes it far easier.

The only JavaScript present on the page is the front-page profile header which doesn’t even need to be run. It’s only for some flair.

Deployment 🔗

One of the only things that is staying, is the use of Vercel / now.sh (RIP now.sh, amazing name and domain).

I can’t say much more apart from how easy it was to deploy a Hugo blog to Vercel with little effort. After fighting with the deployment coming from NPM to Go, it was very strange forward.

I did have to set the following Build Command in Vercel configuration as Go wasn’t present on the Vercel AWS build machines as I couldn’t run the hugo command correctly.

amazon-linux-extras install golang1.11 && hugo --gc --minify --ignoreCache --verbose

A cloud service (built on AWS) which is easier than anything else in the market makes me very, very happy.

*cough cough*… AWS. *cough cough*… Azure.

Conclusion 🔗

Hugo has make my life far easier since I converted my blog this month. I wanted to focus more on writing content and not messing with the blog every time I started a new post.

I still really like GatsbyJS and it was a great learning experience for me but it is time to move on and focus on writing new posts.

So far, I highly recommend Hugo but keep in mind GatsbyJS has some features Hugo doesn’t or is poor at.

References 🔗

  1. Hugo
  2. GatsbyJS
  3. Mini Go Theme
  4. Vercel

Images / Banner 🔗

  1. Tear icons created by Freepik - Flaticon
  2. Heart icons created by Freepik - Flaticon