Gatsby v2 has recently been launched and people are clamoring to get to know it better. Getting started with this site generator is going to be difficult, but it most certainly pays off in the long run. Headless CMS is getting a lot of attention these days from web developers. At their forefront is Gatsby, which is spreading like wildfire. It’s time to get to the bottom of this site generator.
1. What is Gatsby, exactly?
Before knowing how to use any relevant resources, you have to know the basics around Gatsby. It’s what is called a react-based static site generator. What this really means is that it combines together the best parts of apps like React, web pack, react-router, and GraphQL into an advanced but enjoyable web developer tool. It might be called a static site generator, but the outdated name doesn’t do it justice. It’s more like a modern front-end framework than it is similar to a static site generator.
There are powerful pre-configurations at its disposal, which can be used to build a website that will only use static files for incredibly fast page loads, service workers, code splitting, intelligent image loading, server-side rendering, and data prefetching. This is all you get right out of the box. You would be hard pressed to find such a varied tool that also results in such incredible speed. You start by coding your website and developing it. After that, Gatsby helps you transform it into a directory with a single HTML file and some static assets. The folder is then uploaded to your favorite hosting provider, and the job is already done. You can think of it as similar to Jekyll or part create-react.
2. What makes it special enough to use?
Everybody has their own web pack configs that they use regularly, so you might be wondering why you should switch to something like Gatsby. The create-react app is going just fine, why fix it if it isn’t broken? For many, these apps don’t provide all the necessary tools to get the website job done. Gatsby has a couple of things up its sleeve that you might find interesting. The way Gatsby uses its GraphQL is innovative. It uses it to make its data layer. What this means is that it can be made to collect your data from any source, including Markdown, JSON, a favorite CMS of yours, third-party apps, or wherever you choose from. During build time, it creates an internal GraphQL server of that same data. All your data is queried at build time, essentially.
The richness of the Gatsby ecosystem is another great thing you can benefit from. It hasn’t been around too long, but it already has great documentation and a lot of starters that can help you get your website up quickly. The way it collects data might sound complicated at first, but because of Gatsby’s well-documented data source plugins, it becomes as simple as a few lines of code that you insert into the config file.
3. React and GraphQL
When people want to try out Gatsby, the biggest hurdles they come across are React and GraphQL. As already mentioned, they are the cornerstones of Gatsby and knowing them is essential when you want to build fast websites with it. If you already know these resources well, using Gatsby should be a breeze. Even knowing just one is going to make a huge difference. Some people might not be familiar with either, which can present a problem if you want to try it out. You might be wondering if it’s worth learning two programs for a trial run of a third. Luckily, Gatsby isn’t just something you use React and GraphQL in, it’s also a great learning tool for both. You can consider it a training ground for all three in a way.
You could try using Gatsby without knowledge from either of these, but you will run into some problems. Without GraphQL, you could just make regular API calls in your components, etc. It’s feasible, but that defeats the point of using Gatsby. It will hamstring you completely and it’s akin to saying “I can use React without knowing JSX”. If building a fast website is your main goal, it’s time to learn both of these.
4. Getting started
Once you’re confident you can start building in Gatsby, it’s time to get down to business. Gatsby has excellent documentation and tutorials on their website. This is where you should start your journey towards building astonishingly fast sites. You start by clicking on docs and following the instructions given to you. Then you install the global Gatsby CLI. Run the “new” command with the name of your preferred site and add “cd” in the new directory. To finish it off, run “Gatsby develop” and click on “localhost”
Now you have your Gatsby site up and running. If you want to compile this for production, you would stop developing and run “Gatsby build”. Another important facet of using Gatsby is the idea of starters. They are something like boilerplates and templates for Gatsby. If your data is coming from a specific source, or your website functions in a certain way, there is probably a starter with the data sources already preconfigured. This makes getting up and running pretty fast and not too difficult. If your source is a blog, getting it up and running fast enough is going to do wonders for your SEO rankings. Search Engine Optimisation Experts endorse generators like Gatsby because the loading speed will propel websites to the top of searches.
5. The future of Gatsby
The generator hasn’t been around too long now, but it’s already starting to make waves in some web developer communities. Version one was released fairly recently in 2017. Since then, its use has increased tremendously. Version two was released in 2018 but it’s still being tested and optimized. Some technical changes are expected for Gatsby in the near future. Things like an upgrade to web pack 4 from web pack 1. This change will lead to an enormous performance boost, especially during building. It will also adopt Reach Router soon, which is a project similar to React Router, but with single page apps in mind. React will soon be updated to v16, which means you can use all the necessary components from the latest React.
The future is looking bright for Gatsby. Websites will be lining up to improve their performance and speed in order to increase their SEO. It’s already a favorite of front-end developers, and things are only getting better for Gatsby.
Conclusion
The world of static site generator frameworks like Gatsby is steadily growing. You will see more and more of these with time and it’s important to get to know them at their core. They’ll be used in many languages, including React, to build the websites of the future. Gatsby is built on some of the fastest-growing technologies of today and it’s a blast to build with. These are just some of the reasons Gatsby will be heading to the top of every developer’s toolkit very soon.
