Rebuilding My Personal Website for the Millionth Time (this time with Gatsby)

I just rebuilt my personal website again, this time with Gatsby.js.

Gatsby is a static site generator (SSG), and SSGs are all the rage these days in the front end world, and it’s not hard to see why. For simple websites that don’t update frequently, there’s no reason to waste time and money hosting a server. Static files are easier to manage, more performant, cheaper (free with GitHub Pages), and more secure.

That being said, Gatsby (or any other SSG) is not a CMS. It is not a WordPress competitor. You can couple it with a Headless CMS, but

POST COMING SOON - IGNORE MY NOTES BELOW. Also, still finishing up site construction, so bear with me.

Gatsby is not a Wordpress competitor. It is not

Gatsby Review

Gatsby is not a CMS, and it is not a WordPress competitor. It is a static site generator for developers. If you just want to make a simple website as easily as possible with as little development as possible, do not use Gatsby - use a CMS like Wordpress or a website generator like Wix or Squarespace.

Gatsby is great if you want performance.

Next.js.

  • Sometimes cryptic error messages. For example, I put a date with one digit

From a usability perspective, I’m not in love with Markdown because it requires two screens.

Headless CMS

Build-time (no .cache folder): 163.32s

Build-time: 26.512s

Pros

  • Faster, and easy to host on CDN
  • Dirt cheap to host (free with GitHub Pages)
  • Easy to deploy
  • Secure

Cons

  • UNHANDLED REJECTION request to http://localhost:8000/___graphql failed, reason: socket hang up
  • Building can take a while
  • Lack of themes. Can’t just change themes
  • Occasional cryptic errors
  • GraphQL has not string interpolation. With images it’s awful
  • Static html files don’t show in develop mode
  • Have to filter out static files in code
  • Pictures randomly not working in blog posts in gatsby develop (luckily still work on real builds)
  • Build times can be long
  • Sometimes build is buggy without running gatsby clean beforehand. Once I deployed only to find that all the links to blog posts didn’t worked. Luckily wiping the cache with gatsby clean and re-building fixed it.
const finalData = data.allMarkdownRemark.edges
        .filter(({ node }) => !node.fields.slug.startsWith('/projects'))

Things to Know

  • Deployment (gh-pages)
  • Tags
  • Drafts + Unlisted