My Journey From Gatsby to Nextjs to Hugo

It is said that the variable naming is the hardest part for most programmers. Likewise, chosing a blog platform poses an obstacle to start blogging.

As a programmer, I like to get my hands dirty with code and code related stuff, such as registering a domain name, host a website, setup a server and run my code, etc. Building a blog platform for myself is one of those toy projects that will bring me joys. It’s not like decades ago, wordpress was dominating the self hosting blog market. These days the difficulty falls to too many choices. There are old fashion self hosting ways as well as popular online blogging platforms.

Chosing a blog site generator

For my own needs, I want to keep it simple and easy to deploy. Keeping all the documents in text format is a plus for potential platform change. I’ve had a taste on wordpress and I have to admit it is still a great choice. The only downside is a vps is needed for deployment. Github pages is also a perfect solution for static site hosting. I tried it for a while, what bothers me is that I have to rebuild my project every time I have a new commit. I was not too into static site in the past. I thought it’s “too simple”, just some plain html, css and js files. Today I am overwhelmed by those endness frontend concepts and frameworks. “Keep it simple and stupid” is a invaluable advice, no matter for programming or for building a blog site.

It comes a long way that I finally choose to use gatsby to generate my static blog site. The markdown file and graphql integration is awesome. Netlify has automatic build and deploy after git push, https and cdn surport is also a breeze.

I’ll try to focus on writing rather than trying new technics. Hopefully this new platform will serve me well.

Gatsby: I started to use gatsby for a small project at work: We need to build a documentary website to put introducation and references for our newly developed software. At that time gatsby 2.0 was just released and the concept of building blazing fast static website from multiple sources sounded facinating. GraphQL integration by default is also a big plus.

Gatsby gave me so much out of box. I loved gatsby with its plugin ecosystem, almost for sure a plugin could be found for any functionality. Eventually I had my job done in about a week and I was happy about the result.

What ended up turning me away was the stability. Gatsby just entered version 2.0 back than. They had break changes and unkown errors. The GraphQL was fun to use and PITA to debug. What made it worse was after a nodejs upgrade, there ware hundreds of errors prevent me for building the project. I had to downgrade my nodejs to use it.

NextJs: NextJS is a framework not so “heavy” compared to Gatsbyjs. Static site generation is only part of it and not the important part. They have really good interactive documentation and tutorials. Vercel is the static site hosting platform I choose and Nextjs is the product from the same company(Zeit). I had heared lots of good things about their product and wanted to give it a try when I started some side projects.

I went through the starter tutorial and found it was incredibly simple to get started. With a template chosen and old markdown files added, it just worked! I like the idea of building pages from markdown files from gatsby and nextjs supports that too.

The only downside comes to customization. I am capable of doing some visual changes through css but I am not a frontend expert. Styles are deeply coupled with theme and it’s time comsuming to make changes.

Hugo: Hugo was not an option for a long time because it doen’t support dynamic content like Gatsby and Next. I thought that’s a really important feature until I realize that 99% of the time I don’t need dynamic content especially for a blog site. I gave Hugo a try recently and never looked back.

It only took me 2 days to wonder around and get my site up and running. Their slogan is “The world’s fastest framework for building websites”. I think they did what they said. I am not too care about building speed since gatsby, nextjs or regular react project takes 2-3 minutes-ish to build and that’s acceptable to me. Hugo amazingly build my first toy empty project in millieseconds really supprised me.

The config system and theme system is more mature in Hugo and makes it really fun to build static site. I feel I can spend more time on content instead of how to styling content now.

Lessons Learned

Tehcnical comparison is endless. I took hours to read comments on detailed features comparison between these static site genarators and I was struggle if I need to stick to one frameword even it has some parts I don’t like.

When in doubt, try it out.