Home

Awesome

<p align="center"> <a href="https://www.gatsbyjs.com"> <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" /> </a> </p> <h1 align="center"> Gatsby </h1> <p align="center"> <strong> The future of web development is here. </strong> </p> <p align="center"> Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. </br> It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities. </p> <p align="center"> <a href="https://github.com/gatsbyjs/gatsby/blob/master/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Gatsby is released under the MIT license." /> </a> <a href="https://circleci.com/gh/gatsbyjs/gatsby"> <img src="https://circleci.com/gh/gatsbyjs/gatsby.svg?style=shield" alt="Current CircleCI build status." /> </a> <a href="https://www.npmjs.com/package/gatsby"> <img src="https://img.shields.io/npm/v/gatsby.svg" alt="Current npm package version." /> </a> <a href="https://npmcharts.com/compare/gatsby?minimal=true"> <img src="https://img.shields.io/npm/dm/gatsby.svg" alt="Downloads per month on npm." /> </a> <a href="https://npmcharts.com/compare/gatsby?minimal=true"> <img src="https://img.shields.io/npm/dt/gatsby.svg" alt="Total downloads on npm." /> </a> <a href="https://gatsbyjs.com/contributing/how-to-contribute/"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" /> </a> <a href="https://twitter.com/intent/follow?screen_name=gatsbyjs"> <img src="https://img.shields.io/twitter/follow/gatsbyjs.svg?label=Follow%20@gatsbyjs" alt="Follow @GatsbyJS" /> </a> </p> <h2 align="center"> <a href="https://www.gatsbyjs.com/docs/quick-start/">Quickstart</a> <span> · </span> <a href="https://www.gatsbyjs.com/docs/tutorial/getting-started/">Tutorial</a> <span> · </span> <a href="https://www.gatsbyjs.com/plugins/">Plugins</a> <span> · </span> <a href="https://www.gatsbyjs.com/starters/">Starters</a> <span> · </span> <a href="https://www.gatsbyjs.com/showcase/">Showcase</a> <span> · </span> <a href="https://www.gatsbyjs.com/contributing/how-to-contribute/">Contribute</a> <br /> Support: <a href="https://twitter.com/AskGatsbyJS">Twitter</a>, <a href="https://github.com/gatsbyjs/gatsby/discussions">Discussions</a> <span> & </span> <a href="https://gatsby.dev/discord">Discord</a> </h2>

Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.

Learn how to use Gatsby for your next project.

🚀 Ship your first Gatsby site in 5 Minutes

Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.

<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">

At the end of this process, you'll have

  1. a site working on Gatsby Cloud
  2. a new repository that is linked to that new site
  3. as you push changes to your new repository, Gatsby Cloud will automatically rebuild and redeploy your site!

💻 Get started with Gatsby locally in 5 Minutes

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

  1. Initialize a new project.

    npm init gatsby
    

    Give it the name "My Gatsby Site".

  2. Start the site in develop mode.

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

    cd my-gatsby-site/
    npm run develop
    
  3. 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.

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

🚢 Release Notes

Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.

Also, read our documentation on version support to understand our plans for each version of Gatsby.

💼 Migration Guides

Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v5 to your site without starting from scratch!

❗ Code of Conduct

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. 💪💜

🤝 How to Contribute

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.

A note on how this repository is organized

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.

📝 License

Licensed under the MIT License.

💜 Thanks

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.