Gatsby is a React-based open-source framework for creating websites and apps. It allows developers to build fast, secure, and powerful web experiences using modern web technologies. Gatsby leverages GraphQL for data management and offers a rich plugin ecosystem to extend its functionality.
Static Site Generation
Gatsby can generate static pages from data sources like Markdown files. This code sample demonstrates how to create pages dynamically using GraphQL to query Markdown files and the createPage API to generate pages.
const path = require('path');
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
path
}
}
}
}
}
`);
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: path.resolve(`src/templates/blog-post.js`),
context: {},
});
});
};GraphQL Data Layer
Gatsby uses GraphQL to manage data. This example shows how to query site metadata using GraphQL and display it in a React component.
import React from 'react';
import { graphql } from 'gatsby';
export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`;
const IndexPage = ({ data }) => (
<div>
<h1>{data.site.siteMetadata.title}</h1>
</div>
);
export default IndexPage;Plugin Ecosystem
Gatsby has a rich plugin ecosystem that allows developers to extend its functionality. This example shows how to configure plugins for handling React Helmet, sourcing files from the filesystem, and transforming Markdown files.
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
`gatsby-transformer-remark`,
],
};Next.js is a React framework for server-side rendering and static site generation. It offers a more flexible approach to rendering, allowing developers to choose between static generation, server-side rendering, and client-side rendering on a per-page basis. Compared to Gatsby, Next.js is more versatile in terms of rendering options but may require more configuration for static site generation.
Nuxt.js is a framework for creating Vue.js applications with server-side rendering, static site generation, and client-side rendering. It provides a similar feature set to Gatsby but is built on Vue.js instead of React. Nuxt.js is ideal for developers who prefer Vue.js over React.
Gridsome is a Vue.js framework for building static websites and apps. It is similar to Gatsby in that it uses GraphQL for data management and offers a plugin ecosystem. Gridsome is a good alternative for developers who prefer Vue.js and want a static site generator with a similar feature set to Gatsby.
⚛️ 📄 🚀
Static. That. Scales.
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.
Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.
Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
Choose your Rendering Options. You can choose alternative rendering options, namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.
Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.
Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
Host at Scale for Pennies. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.
Learn how to use Gatsby for your next project.
Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.
At the end of this process, you'll have
You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:
Install the Gatsby CLI.
npm install -g gatsby-cli
Create a Gatsby site from a Gatsby starter.
Get your Gatsby blog set up in a single command:
# Create a new Gatsby site using the interactive setup wizard
# Give it this name: My Gatsby site
gatsby new
Start the site in develop mode.
Next, move into your new site’s directory and start it up:
cd my-gatsby-site/
gatsby develop
Open the source code and start editing!
Your site is now running at http://localhost:8000. Open the my-gatsby-site directory in your code editor of choice and edit src/pages/index.js. Save your changes, and the browser will update in real time!
At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.
Full documentation for Gatsby lives on the website.
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples head to our documentation. In particular, check out the “How-to Guides”, “Reference”, and “Conceptual Guides” sections in the sidebar.
We welcome suggestions for improving our docs. See the “how to contribute” documentation for more details.
Start Learning Gatsby: Follow the Tutorial · Read the Docs
Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.
Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v4 to your site without starting from scratch!
Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜
Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community!
Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.
This repository is a monorepo managed using Lerna. This means there are multiple packages managed in this codebase, even though we publish them to NPM as separate packages.
We are only accepting critical security patches for Gatsby v3.
Licensed under the MIT License.
Thanks go out to all our many contributors creating plugins, starters, videos, and blog posts. And a special appreciation for our community members helping with issues and PRs, or answering questions on Discord and GitHub Discussions.
A big part of what makes Gatsby great is each and every one of you in the community. Your contributions enrich the Gatsby experience and make it better every day.
FAQs
Blazing fast modern site generator for React
The npm package gatsby receives a total of 226,696 weekly downloads. As such, gatsby popularity was classified as popular.
We found that gatsby demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 13 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.