All Articles

Develop Niche Site using Gatsby

Why choose Gatsby?

I’ve been doing sites with Wordpress. It’s quick, easy to use, and you could do almost anything with the help of plugin.

Yet, many plugins could slow down your site. I am also not well-veresed in PHP to troubleshoot advance custom integration.

Now is the time of React. I’ve looked around for solution which solves the following:

  • Speed
  • React-Based
  • Cheap, easy to deploy
  • Supereme Customization

Gatsby and Next.JS comes close to the criteria above!

cat gif playing

Gatsby vs Next JS

I chose to start with Next JS in the beginning. Reasons:

  • SSR: I want to render site on the fly (server-side). However, SSR does not go well with Netlify (which only accepts static)

I made the hard choice of starting again with Gatsby, but it’s a very smooth process.

  • Starter Sites: I could start immediately with their Starter Sites collection, and tweak them according to my need.
  • Image Handle: Gatsby helps handle image optimization (lazy loading + compression + nice blurring effect). It even supports image comes with your content!
  • Their documentation is superb.
  • Their Github Repo is super active. I once post an issue and receive my answer within 15 minutes!
  • Gatsby wins hand down!

astronaut

Downside of Gatsby:

I also discover some potential downside of Gatsby (I have not hit it yet, but maybe in the future):

  • Slow build time (My blog only has 2-3 posts, and it takes 2-3 minutes to build). Maybe because of my in-content images.
  • Their build time is so slow that Gatsby spin off the Gatsby Cloud service (for which they charge money), promising to cut down build time by 20x time. Good biz model ever!
  • Gatsby insists on putting your sourcing data to GraphQL. Once you get use to it, it’s quite smooth, but not really beginner friendly.

Resources to learn Gatsby:

Gatsby for the Frontend. What for the Backend?

For my personal blog, I use Netlify CMS. It’s a Git-based CMS, where your new post is saved as a markdown file in a designated folder in your repository. It also integrates seamlessly with Netlify to re-build your site once you publish.

For my actual content blog, I build my own Backend in NodeJS. It’s for education purpose, and I also wanna customize a lot in the Backend. I’ve been trying to learn more about Dev Ops for a while now, so having my own backend in NodeJS is just a perfect chance to get my hand dirty.

Conclusion:

Goes for Gatsby. Their support is great. Their documentation has almost everything you need. Their image handling is the best, and helps make your site super fast.

Integrate it with Netlify, and you’ll have your own blog soon!