The Varnerinfo Blog

Switching to GatsbyJS

2017-12-28 in gatsbyjs, js, layout, react

Three days into my holiday vacation I was going a bit stir-crazy and decided to work on new blog posts. Since the last post I rebuilt my desktop and had to go through the trouble of installing the right versions of ruby to get my slightly old Jekyll site to build again. Rather than figure that (minor) challenge out I set out to replace my blog from scratch - rebuild it using cool new tech and with a better style. I've outlined below why I made my change and how I did it.

Why Switch

  • Managing installing ruby across three platforms is a pain. I don't use it at work or for personal projects so I have no other reason to have it on my computer
  • Continuing the above, extending Jekyll was challenging. Having to learn Ruby well, on top of learning Jekyll, made any non-trivial/non-plugin change complex
  • Heavily convention-based - posts go in _posts, drafts in _drafts. You can make new conventions using collections (how I did projects on my old site), but it ends up just as heavyweight/inflexible as the built-in conventions
  • No client-side support beyond 'include a script tag'
  • The current theme was OK on mobile, but I wanted certain features (a sticky css-only header and better mobile layout) that was becoming challenging to support

Why GatsbyJS

  • JS/React-based - I know React (and JS in general) very well and have used it constantly over the last five years

  • Extremely flexible - can be changed very easily without having to use plugins (if the changes don't affect the build system)
  • Changes to the build system are easy and well-documented
  • Same code on client and server - supports client-side programming natively and pre-renders it
  • Fun/learning - React is cool, GraphQL is cool, universal JS apps are cool. While we use React now at my work, GraphQL and universal JS apps are out of reach (we use .NET 4.x and hand-written queries for SQL Server for performance)

Implementation

  • GatsbyJS from the base starter

  • Zurb Foundation for CSS framework with custom styling/layout

    • I know Foundation and like its approach better than Bootstrap
    • I wanted to look into Atomic CSS on a recommendation from a friend, but it ended up too complicated to tackle at the same time as the rebuild
  • gatsby-plugin-typescript to bring some sanity to the sanity-optional world of JS

  • I finally fully-automated deployment using CircleCI (including a staging site!). No more manually running ./deploy-staging and ./deploy-prod, it's all triggered on git pushes to develop and master now.

    • Bonus: my config file. It took a sadly long time to get this right - the CircleCI CLI tool doesn't check workflows at all, and the error that spits out when it's not working is "yo something's broken, good luck". Eventually I realized all my issues were indentation-based and was reminded why I dislike whitespace-significant languages.