GatsbyJS: What’s All the Fuss About?
Vitaliy Stanyshevskyy recently shared his experiences with GatsbyJS, an open source framework for building super fast websites. Many developers may have heard of GatsbyJS, as it has been making waves in the coding world of late. So what is all the fuss about?
What is GatsbyJS?
First things first, GatsbyJS is a static site generator that creates lightning fast websites with its framework built on React. It can be used to create apps as well as websites and you can even use components that you’ve built using React as the foundations for your new website.
As Vitaliy notes, GatsbyJS is very thin and lightweight, unlike popular CMS options like WordPress which rely heavily on templates and plugins. This is one of the key contributing factors to the speed and impressive functionality of GatsbyJS, with Gatsby also being very easy to work with.
And another major factor is the opportunity to host your website for free. You just need to pay for the domain name. So by using Netlify, AWS Amplify or Zenit Now, you could be running a great site for a very low price.
How it works
Kicking off a project is fast and simple - just install the GatsbyJS CLI tool, run a few simple commands in your console (see https://www.gatsbyjs.org/docs/quick-start) and you’ll have yourself a basic site ready to go.
However, the basic site isn’t that useful, so you’ll need to import your data which is, thankfully, pretty straightforward. Importing data can be done using APIs, JSON, Markdown or even CSV files. Once Gatsby.js has processed the data, you can use GraphQL queries to manipulate it and pass the data down to the React components
The project structure is simple and intuitive, with components and pages put into different folders. Once you’ve done with design and coding, GatsbyJS then populates the templates built with React components using the data and produces the static HTML files. This means that sites load blazing fast because this approach eliminates the need of server-side data processing or JS rendering.
Although you do need some knowledge of GraphQL and React to use Gatsby, don’t be put off if you’re not familiar with them. GatsbyJS is actually a great entry point for both of these pieces of software, and if you’re familiar with React basics, just follow the well written Gatsby.js documentation and tutorials. In just a few hours you’ll have the first few pages ready and in a few days you’ll have your blog/portfolio website up and running.
GatsbyJS takes care of app setup (Webpack etc), routing so you can focus on the outcome. However, you can come back and tweak those parts later if needed.
With GatsbyJS you can edit the content of your website by hardcoding the content using the React Components or Gatsby pages and editing those in your IDE. But if you want to have a nice UI for editing it, it’s worth choosing the CMS. As mentioned before you can use any platform to manage content like Wordpress, but for GatsbyJS there are some great options like Contentful or Netlify CMS for data sourcing your project.
Netlify CMS is one of the better options because it saves the content into Markdown files within your repo, so you can see the history of the content changes. It also allows you to use Github/Bitbucket/Gitlab accounts for authorization and roles management within the CMS. It also gives you CI - once you push your code, deploying your new site in minutes so that users can see it live without disruption.
One of the best options for hosting your site is Netlify, which allows you to publish your site, adding your
own URL or using a random URL with a Netlify extension, such as
https://sleepy-dog-12345.netlify.com.
The benefits of using GatsbyJS
We’ve already mentioned that GatsbyJS is fast, which is one of the main benefits of using it. As a developer having built the website from scratch, you can control the complexity and performance of the site. You also get the benefits of static websites - meaning that at the end a visitor gets simple HTML website with no back-end execution time.
Although it’s relatively new, Gatsby has a huge and active support network and plenty of useful documentation. If you’re not sure if you have the time to learn Gatsby, or you’re put off by having to pick up some new coding language, you’ll find all you need to get going very quickly.
You’ll find plenty of plugins for pretty much everything you need. Much like WordPress, you can also find site starters and templates that will help you get up and running with your idea. There are also a lot of plugins for Gatsby that will help with your site analytics, tracking, PWA features, images compressing and more. Tools like these will also help with your SEO and enable you to rank higher in the SERPs without too much effort.
And, once you’ve picked up the basics, GatsbyJS can be used to make much more complex sites, including adding multilingual layers. As Vitaliy says, GatsbyJS is well supported, offers free hosting and is ideal for large or small sites. And with a fairly simple learning curve, especially if you’re already well versed in React or GraphQL, you could be making your next site in GatsbyJS in just a few days.