This Site's Building Blocks
August 13th, 2019
GatsbyJS
Gatsby is a fantastic static site generator that is based on the ReactJS platform. It takes care of a lot of preconfiguration for those who are looking to create a site quickly, while also allowing you as much control as you need. There are also a lot of great things Gatsby comes with out of the box such as: webpack, reach-router, GraphQL, etc. This creates a more seamless experience for the developer which, in turn, can provide a more seamless experience for the user.
If it comes with all of this preconfiguration and extra packages, are there performance consequences? From my experience, no! I was somewhat skeptical at first as I had previously used create-react-app, but after using it once I was instantly hooked. The setup is extremely easy and the performance was so much better than I was expecting.
Another benefit of Gatsby as a whole is simply how great the ecosystem is. The documentation is very detailed and extensive, and there are countless plugins/integrations available for use. Overall, Gatsby has not been around for too long, but its dedication to performance, accessibility, and modularity have made it a powerhouse in the industry. So much so that its use can be seen on React's primary website (reactjs.org).
Contentful (CMS)
Now, without describing why the use of CMS systems is powerful in itself, let's talk about Contentful. First of all, it has strong integration with Gatsby. Contentful objects in a Gatsby project can be accessed through the use of GraphQL, which allows for the combination of many data points into one object. However, there are many other great features beyond this. First of all, it provides a lot of flexibility in structuring your content. It uses 'Content Models' that you make contain almost any information you want. This allows content creators to store everything in one place, instead of possibly relying on multiple CMSes to maintain separate types of content. It also has an extensive and RESTful API that can be used on the developers side.
For the purposes of this site, I am using it to manage these blog posts themselves. This allows me to create/edit/delete any that I so choose without having to make any source code changes. Contentful objects in a Gatsby project can be accessed through the use of GraphQL, which allows for the combination of many data points into one object. In a small project, this may not seem like a big deal. But when the project starts to scale, making changes directly to source code for everything on a site can end up being rather daunting.
Firebase (Deployment & Hosting)
Firebase is likely a go to for many developers looking to deploy a site quickly due to its ease of use. It provides a nice CLI tool and online console that is well organized. The security and speed are also top notch when it comes to hosting a static site.
For this project, only web hosting and functions are used. The function being the Javascript that controls the sending of emails from the contact page. But there is so much more it can do in both public and enterprise situations.