What is Gatsby?
It’s another static site generator like Hugo and so on. So what makes it special?
Components are a key feature of React, and now they’re a commonly followed web design pattern. With the current level of complexity of user interfaces, it is almost impossible to write maintainable code in long pages of HTML or uses templating engines and expect consistency.
Webpack bundling and latest tooling
Gatsby plugins, starters and React packages
You can use any of the packages you’ve already been using with NPM, particularly the React ones as it’s built on the same thing. But that’s not all: there’s a large number of ever-growing plugins, starters, and transformers by the Gatsby community.
In Gatsby with just a plugin, particularly the gatsby-plugin-sharp, you can directly generate fluid images, add filters, change formats, blur up on load and a lot more. This saves a lot of work and time manually resizing images and writing explicit boilerplate code for responsive images. It also gives you way better performance along with smoother user experience.
With the performance boost and features to add to the smoothness of the user experience, Gatsby aims at a full app-like experience borrowing from full PWAs. There are no reloads between pages when using gatsby-link instead of hyperlinks, and the app still appears smooth and performant thanks to lazy-loading images and code-splitting.
Content Management Systems
React has several sets of out-of-the-box component libraries, as well as curated sets eg JSCoach
Gatsby and other static site generators can be plugged into static hosts such as Netlify or surge.sh. WordPress and Squarespace both come with built-in hosting.
Gatsby offers various themes through Typography.js, and Jekyll has themes built on it as well. WordPress and Squarespace offer support for multiple themes through theme selectors out of the box.
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
Starters are Gatsby sites that are preconfigured for different use cases to give you a head start for your project.