What is Gatsby?
It’s another static site generator like Hugo and so on. So what makes it special?
Gatsby can be used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. It makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.
Features
Components
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 template 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.
Styling
Gatsby has support for SCSS, CSS-in-JavaScript libraries, allowing you to manage styles better and with ease. Even the setup for this is fairly easy to handle with the installation of a plugin or package.
Responsive Images
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.
App-like 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
(CMSs) like WordPress give you an online text editor to create content. You customize the look and feel through choosing themes and plugins, or writing custom PHP or JavaScript code. Content is saved in a database, which is retrieved and sent to users when they visit the website. Depending on your requirements you can self-host your website, or use an official hosting provider.
Ecosystem
Component ecosystem
React has several sets of out-of-the-box component libraries, as well as curated sets eg JSCoach
Hosted option
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.
Theme ecosystem
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
Plugins are packages that extend Gatsby sites. They can source content, transform data, and more!
Starters
Starters are Gatsby sites that are preconfigured for different use cases to give you a head start for your project.
