This website was built with Gatsby
06 July, 2020 - 3 min read
What is Gatsby?
Gatsby weaves together the best parts of modern web technologies such as React, webpack, react-router, and GraphQL. If you don’t know what those technologies are, it’s okay! I would say that’s the beauty of Gatsby, you don’t actually need to immediately know all the technologies being used within the application. This is because at the start of development of your application with Gatsby, you are provided with a structure that has all these technologies configured.
What is the benefit of these technologies compared to sitebuilders such as squarespace?
Use this application as an example, try clicking between pages; it’s super fast! Below is a lighthouse test which is a web developer tool that can give you an idea of how performant a website is.
I rebuilt a client's Squarespace made website recently. I used Gatsby to rebuild the site and these are the performance metrics before (white-background) and after (black-background).
Good metrics will also lead to better search engine optimization (SEO), allowing your website to rank higher on search engines such as google.
Use Gatsby to learn the basics
What Gatsby provides is an environment where you start with all the new technologies configured and a structure that allows for the learning of the basics. Instead of ending up with tons of mini side projects resulting from tutorials, you can build all of those pages within a single Gatsby application. By starting with Gatsby, and building out your test cases within the Gatsby ecosystem, you’ll end up with your own personalized documentation, an approach I wish I had taken when first getting into web development. Instead what I ended up with is probably at least 100 different folders of mini projects from tutorials, which I tried to structure within different folders, but just never could come up with a sustainable system for organizing them all.
How should you start?
This site was created with the following technologies: