From Ruby to React

I recently migrated my blog from one static site generator, Jekyll, to another, Gatsby. A static site generator is a tool that allows you to generate static HTML from templates which can then easily be served up to clients making a simple website. Here are a few reasons I did this:

• Jekyll runs using Ruby, which is pretty old and not that popular.
• Gatsby runs using Node which is more modern and well supported.
• Gatsby uses React a popular UI framework I wanted to learn.
• Gatsby has many easy to use plugins that are available on npm.
• Gatsby uses webpack an easy to use build tool which doesn't require build scripts (I was using Gulp previously).

Initial setup

One of the immediate benefits I found was how easy it is to get Gatsby up and running compared to Jekyll (webpack is great!). Additionally Code Splitting allowed me to simplify my old sites Sass into smaller chunks of plain old CSS.

Offline support

Adding offline support was super easy! There are just two simple Gatsby plugins to install and you're away. This allows users to download your site content as an application which can be viewed offline. Try it out on mobile - its pretty cool! 😃

React and MDX

I wanted to convert the various JavaScript tools I made in previous blog posts into reusable React components, written in JSX (the React template language). To add these components to my markdown posts I used MDX a markdown extension format that includes JSX. This worked relatively well and I was able to refactor all of my JavaScript code to React, learning lots of React concepts!

Other stuff

As well as the migration I also:

• Added a slide bar for mobile devices making the mobile experience a lot nicer.
• Simplified all SVGs and used gatsby-plugin-react-svg to add them into JSX easily.
• Improved the home page paginator to have page numbers, rather than just a "Next Page" button.

All still on GitHub

Finally all of my website code is still hosted on GitHub pages, free for anyone to look at!