Gatsby

What is Gatsby?

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.

Get started with Gatsby

You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:

1. Install the Gatsby CLI.

   npm install -g gatsby-cli

2. 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

3. Start the site in develop mode.

   Next, move into your new site’s directory and start it up:

   cd my-gatsby-site/
   gatsby develop

4. 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.

Learning Gatsby

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

Plugins

Customize your Gatsby site with plugins.

This site uses the following plugins:

• gatsby-plugin-google-analytics
• gatsby-plugin-offline
• gatsby-plugin-twitter
• gatsby-plugin-manifest
• gatsby-plugin-sitemap
• gatsby-plugin-robots-txt
• gatsby-plugin-mdx

Documentation

For full documentation, visit gatsbyjs.com/docs.

Community

Discuss GatsbyJs on GitHub

Join the GatsbyJs Discord Server