Reboot

Faithful readers will notice I recently rebooted my blog. This May, after completing the superb React Fundamentals course, I decided to rebuild my Jekyll-based as a ReactJS-powered site. And then this October I rebooted again with GatsbyJS. Here are notes on why and how.

Why

There’s not a compelling reason besides “why not” and I wanted the learning experience.

The contenders

I considered two other frameworks before proceeding with React. The first was Next.js, IIRC, shortly before their version 3 was out. I wanted to like Next, as I knew it solved the main problem I would encounter with vanilla React, server side rendering. Being new to the world of Babel, Webpack, and ES6, I knew I’d probably need some help. The official Next.js support channel is via a Slack group, and I wasn’t able to get much help from there. This isn’t their fault, but I wasn’t in a place to debug issues or try to figure things out on my own just yet. Also, while you’re not required to use Now I wasn’t entirely comfortable learning a technology that would be closely coupled to that hosting platform.

I then considered Nuxt. It’s similar conceptually to Next, but using Vue.js instead of React. I admit I didn’t spend a lot of time with Vue, but I found that React’s JSX felt more intuitive to me. I reserve the right to be wrong about this at a later date.

The last framework I looked at was GatsbyJS. But in May, I decided I would be better off starting from scratch so I’d learn more about the tools I was working with. Creating a free account with Contentful was super easy, and so was importing my existing content. From there, setting up my React site to import content from Contentful was trivial, thanks to the Contentful JS package:

import {createClient} from 'contentful';

class Api {

  getContent (constraints) {
    return this.client.getEntries(constraints)
      .then(function (response) {
        return response.items;
      })
      .catch(console.error);
  }

  getPosts () {
    return this.getContent({
      content_type: 'post',
      order: "-fields.publishDate",
      select: "sys.id,fields.title,fields.slug"
    });
  }

  getPostBySlug (slug) {
    return this.getContent({
      content_type: 'post',
      'fields.slug': slug.substring(6)
    });
  }
}

export default Api;

Together with some tricks for GitHub Pages, deploying was pretty straightforward.

Rebuilding in Gatsby

But I wasn’t especially happy that I didn’t have server side rendering. And I didn’t like that my content now lived in Contentful, even if it is free for my tier.

So I circled back around to Gatsby. Using the starter kit for the blog, I had my content imported in an hour, and using Netlify to deploy, with TLS thanks to Let’s Encrypt, also took less than an hour.

I have several other sites I plan to migrate over to GatsbyJS, and am looking forward to building them!