Hey y’all i’m back with blog writing once again after me and my team was really backed wu with a client projects and most of them all are with tighter deadlines and i couldn’t get much space to publish my posts. My team pretty much wrapped up most of them on time and couple of them were just slightly missed the deadline targets on the back of some fucking bugs killed our time on it. Anyways i just don’t want to kill your time on what was happened all those days just back of you.
So right here on this post i just want to bring down the “Nutshell” series back on track and this time i will be covering up the super powerful static site generator named “GatsbyJS”. So if you are already into Gatsby kind of thing and built few static site using it then you can skip this post as i won’t be going much deeper into it or i will be covering up with any of the advanced topic related to Gatsby.
Hey trust me that some of the developers already blown up themselves with it’s powerful performance including us and ever since it came into the scene it keeps on making good amount of noise day-in and day-out. As it is not just built for one of my favorite tech stack React, Webpack, GraphQL but the ideas it exposed me to make me want to create a lot of sites using this.
What is GatsbyJS?
Gatsby is a blazing fast static site generator which is build top on the React and GraphQL (which allows you to query your data however you want). And trust me if you are already into the React then this React + Gatsby is gonna be a magic combination for your site as straight away you got all the things you love about React, like composability, one-way binding, resuability and great environment.
Because of Gatsby now you can build a React app and get server side rendering automagically. Gatsby site is highly performant and performs prefetching because it gives you client side code splitting and lazy loading of assets. This means that Gatsby gives the browser a complete page as a single file.
Why use GatsbyJS?
Here at Themesfinity we absolutely love developing apps or sites using React and using a static site generators like Gatsby makes a real sense to me and saves lot of time and above all it improves your app/site performance dramatically. GatsbyJS helps us to build Progressive Web Apps (PWA) sites that have the smooth experience of a “native” app—using NodeJS, React, React-Router, Webpack, and a variety of plugins.
We use Gatsby because it is powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box. I promise that you there will be a big smile on your face when you start to use Gatsby for your React apps and feel the difference.
Alternatives to GatsbyJS
Well there are some few static-site generators (SSG) are there and to be honest i haven’t used any of those apart from Gatsby till now. Still the most popular SSG, with a large user base and a big directory of plugins. It’s great for blogs and also widely used by e-commerce sites. For many days over the months thought to spin up some few other SSG’s such as Jekyll which is believed to be the second-best static site generator now. But never be able to dirt my hand with it. Where as my team of devs are sort of big fans of Jekyll as it enables you to write and manage content in markdown and just sit back and let Jekyll to the heavy lifting of putting your site together. And with GitHub pages you barely even have to run Jekyll locally to build a new site.
I’m not a big fan of Hugo either and i didn’t explored it too much but have played with it on very few accession. Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website. Hugo makes use of markdown files with front matter for meta data. As i recently heard they announced an advanced theming feature that offers a powerful way of building Hugo sites with reusable components.
Still there are plenty of static site generators available to use but we at Themesfinity we and our developers are truly blessed to use GatsbyJS. So before you choose to what SSG that you should use is always try to consider your project’s main goal. Not all static site generators are created for the same results, and you’ll save a lot of pain by choosing one that is specialized for what you’re trying to achieve.
GatsbyJS + JAMStack
The JAMstack isn’t a cure-all for every situation, though. Extremely large sites don’t benefit from static site generation; the build takes so long that it outweighs the improvement in load time.
Getting started with GatsbyJS
Here i’m going to drop out all the important links that will helps you in get started with Gatsby.
1. The setup for Gatsby is straightforward, check out the GatsbyJS Documentation. One npm install and then learn a couple of Gatsby commands, and you are all set.
2. Official tutorials are really excellent to explore as it illustrate concepts within Gatsby and how it does what it does GatsbyJS Tutorials
3. GatsbyJS Plugins Repo