MENU

Gatsby.js

Although not a full-fledged CMS such as WordPress, Gatsby is an open-source static-site generation (SSG) web framework that is based on React and makes use of Webpack and GraphQL. It can be used to build static sites that are progressive web apps, follow the latest web standards, and are optimized for speed and security.

Gatsby loads only critical parts of the page, exactly when the visitor needs it, and not a second sooner. Once loaded, Gatsby prefetches resources for other pages so that clicking on the site feels smooth and responsive. Everything is statically generated at build time, so your site loads quickly.

Gatsby was a leading choice for React-based static sites for several years, backed by a large library of Starters, Themes, and plugins that connect to nearly any CMS, eCommerce platform, or analytics tool. Since Netlify acquired Gatsby in 2023, development has slowed considerably: the framework is essentially in maintenance mode, its dedicated "Gatsby Cloud" hosting product was discontinued and folded into Netlify's own platform, and much of the plugin ecosystem is no longer actively maintained. Gatsby is still a real, working option and existing Gatsby sites remain perfectly viable, but for a new project today, most developers reach for Next.js, Remix, or Astro instead — it's worth weighing those before starting a new site with Gatsby.

To get started:

Follow the prompts to choose your preferred CMS, styling tools, and additional features. Once everything is downloaded you will see a message with instructions for navigating to your site and running it locally.

Start by going to the directory with:

Start the local development server with:

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000.

Now you're ready to make changes to your site. Try editing the home page in src/pages/index.js. Saved changes will live-reload in the browser.