Building a personal website with React, Github Pages and Gatsby — goals, why I chose these tools, and learnings

6 min readJul 24, 2022

In this post, I go over my thought process on

Intention behind making a personal website
Medium vs custom website
Static Site Generators: Gatsby vs Jekyll
Hosting: Github Pages vs Surge vs Netlify

There’s tons of good choices — Github Pages, Netlify, Surge, Gastby, Jekyll, Hugo —and it really comes down to what fits your needs best, why is why I think it’s worth giving some context on my goal with this iteration and how it’s evolved since the beginning.

Goals for this iteration in 2022

By the end of last year, I was itching for a creative playground and what started as fragmented projects eventually evolved to revamping my personal website.

The primary goal this time is to focus on the writing, document my thoughts, have tags to organize them loosely and experiment with new tools/frameworks.

The goal is to treat it like an eternal work in progress — a safe home for half baked ideas. ✨

My secondary goal is to keep it simple and skip on a lot of the things I would do for a real product.

Background

This is the third iteration of my personal website. Each time, the intention has evolved, and so naturally, the tools to meet that have also changed.

2012 — I had just graduated, and started immersing myself in web dev. The primary goals of my website were to be a portfolio for job hunting, showcase my Android app, and a way to experiment with different libraries. This was before React/Angular existed 🙀, and it was just a static site with minimal JS on Github Pages.

2015–2016 — Around this time, I started building a few side projects (CSS consolidator is my favorite one of those! 😊🎨) and also toying with the idea of writing (sadly, under a pseudo name). The primary goal was still to use it as a portfolio more than a personal blog, so I ended up sticking to my custom site and not going with Jekyll, but gave it a design update since my style had evolved significantly.

2017 — I started writing on Medium. I considered Jekyll again but by this point, I had learnt it was more important to focus on the writing than where I published it and my natural instinct was to tweak the website itself rather than write — productive procrastination, am I right? I already loved the Medium editor at this point, so it was a no-brainer to start here.

Medium vs personal website

My personal website is not meant to replace Medium, more so to complement it. The idea is it’ll house rough ideas and notes that eventually evolve into an article some day.

If the focus is solely on writing and distribution, I’d go with Medium or similar alternatives any day.
For a portfolio to showcase skills, build a personal brand, or have a specific vision in mind, a website can be a great.

If you think it’d be interesting to compare reach/views between Medium and this personal site, let me know in the comments.

Picking the right tools & comparisons

⚙️ Hosting: Github Pages vs Surge vs Netlify

For a client side application, these are all good contenders. They all support custom domains, static site generators, are pretty easy to setup, so really there’s no going wrong.

🥉Surge: “Deploy anything in six keystroke” sums it up well. I had tried Surge earlier, and the deployment process is truly quick and fuss-free. Surge is great, but I didn’t see any glaring benefits of this over the other options.

🥈Netlify: A/B testing, 1-click rollbacks, ecosystem of plug-ins, contact forms, serverless functions — all fun stuff! These are some cool features and way better suited for my next web app/project than this simple use case. I took a quick look at the pricing model and the free tier looks generous enough.

🥇 Github Pages: For many of us, Github is part of our regular workflow so pushing code and seeing these changes reflect on the site automatically is as easy as it gets. It does have to be a public repo, so if you don’t want your code shared, this may not be a great option. I’ve used it for years and have no complaints whatsoever, so sticking to Github Pages.

✨ Final choice: Github Pages ✨

Some good resources I came across:

📄 Static site generators : Gatsby vs Jekyll vs Hugo

If you’re wondering why choose a static site generator over Wordpress and such, this is a good read.

I narrowed down to Gatsby, Jekyll and Huge because of their easily customizable templates, code highlighting, SEO and good documentation. My ideal was starting with a base template and customizing it to my aesthetics.

🤔 Hugo: Their tagline is “the world’s fastest static website engine”. It’s written in Go. I thought about whether this would be a fun way to learn more Go, but when I reviewed what my goals are, this was clearly in conflict of “focus on the writing”. This is exactly why it’s helpful to have intentions written down — it’s so easy to get carried away in the research process. 😅

🥈 Jekyll: This is a very popular option with Github Pages for its ease of use and rightly so. It’s would allow for less experimentation than Gatsby, but is a great fuss-free choice.

🥇 Gatsby: Built with React and GraphQL, with plenty of plugins. I’ve come to love React, even more so for quick prototyping and experimentation, so this was a great fit for me.

I was open to both Jekyll and Gatsby so started looking for templates that I might like. When I found the Gatsby Started Minimal Blog by LekoArts, I was sold!

✨ Final choice: Gatsby ✨

Some good resources I came across:

Huge vs Gatsby
Jekyll template: Hyde
Gatsby templates: Lumen, Starter Blog

🎨 Design Inspiration

I’m liking the minimal vibe as usual — especially the light/dark mode. Since it’s not a portfolio, I’m inclined to do something more playful like pastels/blue hues/green hues. I initially wanted to create edge-to-edge section dividers, possibly with different background colors/patterns but ultimately ditched this idea because I didn’t quite like any color palette that looked good both in light/dark mode. If you have any resources for this, let me know!

Finale

✨ Learnings and Reflections

Initial set up was extremely quick and easy as expected, and the documentation is great.
I’d read Gatsby is server-rendered and good with SEO, so I didn’t think twice about it, but later realized my sitemap wasn’t generated correctly.
It would have been nice to have analytics included from the get go in the template. There is an npm package for this, but ran into some minor issues with this — might put together a quick post about this if that would be helpful.
Customization was obviously the most fun part, and it was very easy to work with. You can replace/override any component you wish and then go from there. Gatsby calls it shadowing and makes, and the key is to create the right folders for these shadow components. For example, I had to add folder src/@lekoarts/gatsby-theme-minimal-blog/components/layout.tsx and theme UI config changes went to src/@lekoarts/gatsby-theme-minimal-blog/gatsby-plugin-theme-ui/index.js. I suspected the customization step would take longer than expected (doesn’t it always? 😂 ). I initially wanted to create edge-to-edge section dividers, possibly with background color/pattern but ultimately ditched this idea because I didn’t quite find any color palette that looked good both in light/dark mode.
I love how the regular write-and-publish workflow is so lightweight with this setup, so the focus can be on writing and documenting!