Portfolio

Posted by Jon Deaves on Mar 16th, 2018

React, Content Management, Static sites. All this and more, coming up next!

new website banner

React is awesome and I have recently begun to develop with it and it’s ecosystem. This is a new framework to me but I had previously developed in Angular after many years of vanilla JS and jQuery.

The project

I knew that I had the ability to quickly pick things up, really all I needed was a good project or two.

One of these projects is a web based tool for managing tv and movies that you have watched and it uses the create-react-app along with Flow and Prettier to create a great developer experience.

This post is not to cover that project, it is covering the second project which is the very site we are on.

The execution

From the start I knew that what I wanted most was a fast, easy to maintain and easy to create site. It didn’t need to be too fancy as it was just to host a few static pages and it was to replace a custom framework I built to handle generating static files from templates.

What I have come out with is a slightly more impressive content managed site which generates and deploys static html based on all content within a headless CMS called Contentful.

This has meant that I can write my content in a familiar web based interface and don’t have to worry about sending it off into the world.

The tech

The project was developed using GatsbyJS, a React based static site generator. I chose this as I was looking for a personal project that would make use of React and had good previous experiences of static site generators. This was then connected to Contentful in order to retrieve content during build time and generate all the required pages and page content.

GatsbyJS

Gatsby has been a great site generator, allowing me to construct the pages using React Components and data sources.

One of my favourite features so far is it’s use of GraphQL in order to query for data, this means that all you need is a plugin which connects Gatsby to your data source (Contentful in my case) and it automatically generates GraphQL schema’s to retrieve this information from within a ‘page’ level query.

React

As it uses React I was also able to implement Flow, ESLint and Prettier to ensure consistent code was being developed which follows modern practices.

Netlify

Finally the project was integrated with Netlify, which hosts the static files and my domain name is then pointed to their servers. Deployments are triggered automatically whenever project code is pushed to GitLab, or when changes are saved on Contentful. This ensures that new posts are deployed as quickly as possible without needing to jump between Contentful and Netlify.

Resources