Storytelling with Gatsby

Beginning with my user stories for my blog, this post details how I got from concept to reality in such a short time.

gatsbyJSreactblog

August 15, 2017


My Epic

Like any technological effort, I start with the simplest user story.

As a developer,
I want a blog,
So that I can share my technological learnings

After engineering my user story, I had to research and outsource a lot of my design and experience practices to identify the best and most efficient way to go about this.

Stack

As a next step, I defined my stack. These are the technologies and strategies I explored and plan to implement to achieve my mission.

Linode

Since I love my Linode dashboard and support staff, I decided to make this apart of my stack. I wanted to deploy to a production instance in a Linux environment, managed by Linode.

As a developer,
I want a Linode Linux instance,
So I can deploy my blog to a production instance.

Vagrant

I want to contain my application and its’ dependancies in a virtual container with Vagrant, so that I can reproduce and develop in a traceable fashion. This process of virtualization helps with testing and product stability. I can provision my machine with all the necessary dependancies, so that either I can access and reproduce my environment, or someone else can spin up a development environment in a short time.

As a developer,
I want a Vagrant VirtualBox
So I can use my Vagrantfile to provision my machine
References

CircleCI

After building my application, I want it tested on a continuous basis. I want to build my Vagrant and application every time I make and push a change to my GitHub. For this task, I chose CircleCI. This tool was so easy to implement. With the change addition of one file to my git repository, and a hook implemented through the CircleCI GUI, I got my integration builds started in no time.

As a developer,
I want to build my application,
So that I can run integration tests with every change
References

GatsbyJS

Traditional static site generators such as Jekyll let you put text or markdown in a specific directory such as pages/ in a version-controlled codebase. They then build a specific kind of site, usually a blog, as HTML files from the content you’ve added. These files can be cached and served from a CDN. Content Management Systems (CMSs) like Wordpress give you an online text editor to create content. You customize the look and feel through choosing themes and plugins, or writing custom PHP or Javascript code. Content is saved in a database, which is retrieved and sent to users when they visit the website. Depending on your requirements you can self-host your website, or use an official hosting provider.

Site builders like Squarespace are a type of hosted closed-source CMS. They focus on making it fast to build a website; however, they don’t allow self-hosting or enable you to export your website and customize it.

This is where GatsbyJS comes in. Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.

As a developer,
I want a React blog,
So that I can use new technology to build a SPA
References

Jest

As a tester, this is quite possibly the most important step for me to identify. I’ve only contributed to Jest and Mocha-style BDD tests thus far, and this would be my first trial-by-fire implementation of the framework. It’s great at mocking and testing components in an asynchronous fashion.

As a developer,
I want to import JestJS in to my application,
So that I can quickly test my components
References

Design

As you can see, a bit of research went in to defining a stack that meets the needs of my project. The following design decision was made in a bit of a rush. I chose the design and UI based on the following requirements.

The blog:

  • needs to be extremely readable
  • needs to be strippable. I should easily be able to port the code into my framework
  • needs to be minimal
  • needs to be responsive
  • should ideally be designed mobile first

After some research, I stumbled on to this Clean Blog design by Bootstrap.

As a developer,
I wanted to use a minimal, responsive CSS framework,
So that I can implement it into my GatsbyJS blog
References

I hope this post gave you some insight into the design and implementation process for this blog. It took about a week to get out the door and running. It was a fun way to learn React, albeit GatsbyJS is a bit extracted from the coding-style of React.