1 | <p align="center">
|
2 | <a href="https://www.gatsbyjs.com">
|
3 | <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
|
4 | </a>
|
5 | </p>
|
6 | <h1 align="center">
|
7 | Gatsby
|
8 | </h1>
|
9 |
|
10 | <p align="center">
|
11 | <strong>
|
12 | The future of web development is here.
|
13 | </strong>
|
14 | </p>
|
15 | <p align="center">
|
16 | 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.
|
17 | </p>
|
18 | <p align="center">
|
19 | <a href="https://github.com/gatsbyjs/gatsby/blob/master/LICENSE">
|
20 | <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Gatsby is released under the MIT license." />
|
21 | </a>
|
22 | <a href="https://circleci.com/gh/gatsbyjs/gatsby">
|
23 | <img src="https://circleci.com/gh/gatsbyjs/gatsby.svg?style=shield" alt="Current CircleCI build status." />
|
24 | </a>
|
25 | <a href="https://www.npmjs.com/package/gatsby">
|
26 | <img src="https://img.shields.io/npm/v/gatsby.svg" alt="Current npm package version." />
|
27 | </a>
|
28 | <a href="https://npmcharts.com/compare/gatsby?minimal=true">
|
29 | <img src="https://img.shields.io/npm/dm/gatsby.svg" alt="Downloads per month on npm." />
|
30 | </a>
|
31 | <a href="https://npmcharts.com/compare/gatsby?minimal=true">
|
32 | <img src="https://img.shields.io/npm/dt/gatsby.svg" alt="Total downloads on npm." />
|
33 | </a>
|
34 | <a href="https://gatsbyjs.com/contributing/how-to-contribute/">
|
35 | <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
36 | </a>
|
37 | <a href="https://twitter.com/intent/follow?screen_name=gatsbyjs">
|
38 | <img src="https://img.shields.io/twitter/follow/gatsbyjs.svg?label=Follow%20@gatsbyjs" alt="Follow @GatsbyJS" />
|
39 | </a>
|
40 | </p>
|
41 |
|
42 | <h2 align="center">
|
43 | <a href="https://www.gatsbyjs.com/docs/quick-start/">Quickstart</a>
|
44 | <span> · </span>
|
45 | <a href="https://www.gatsbyjs.com/docs/tutorial/getting-started/">Tutorial</a>
|
46 | <span> · </span>
|
47 | <a href="https://www.gatsbyjs.com/plugins/">Plugins</a>
|
48 | <span> · </span>
|
49 | <a href="https://www.gatsbyjs.com/starters/">Starters</a>
|
50 | <span> · </span>
|
51 | <a href="https://www.gatsbyjs.com/showcase/">Showcase</a>
|
52 | <span> · </span>
|
53 | <a href="https://www.gatsbyjs.com/contributing/how-to-contribute/">Contribute</a>
|
54 | <br />
|
55 | Support: <a href="https://twitter.com/AskGatsbyJS">Twitter</a>, <a href="https://github.com/gatsbyjs/gatsby/discussions">Discussions</a>
|
56 | <span> & </span>
|
57 | <a href="https://gatsby.dev/discord">Discord</a>
|
58 | </h2>
|
59 |
|
60 | Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.
|
61 |
|
62 | - **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.
|
63 |
|
64 | - **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.
|
65 |
|
66 | - **Choose your Rendering Options.** You can choose alternative [rendering options](https://gatsbyjs.com/docs/conceptual/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.
|
67 |
|
68 | - **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.
|
69 |
|
70 | - **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.
|
71 |
|
72 | - **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](https://www.gatsbyjs.com/cloud/) and other similar services.
|
73 |
|
74 | - **Use Gatsby's Centralized Data Layer Everywhere.** With Gatsby's [Valhalla Content Hub](https://www.gatsbyjs.com/products/valhalla-content-hub/) you can bring Gatsby's data layer to any project. Making it accessible via a unified GraphQL API for building content sites, eCommerce platforms, and both native and web applications.
|
75 |
|
76 | [**Learn how to use Gatsby for your next project.**](https://www.gatsbyjs.com/docs/)
|
77 |
|
78 | ## 🚀 Ship your first Gatsby site in 5 Minutes
|
79 |
|
80 | Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.
|
81 |
|
82 | [<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog&utm_source=github&utm_medium=link&utm_campaign=onboarding&utm_content=oss)
|
83 |
|
84 | At the end of this process, you'll have
|
85 |
|
86 | 1. a site working on Gatsby Cloud
|
87 | 2. a new repository that is linked to that new site
|
88 | 3. as you push changes to your new repository, Gatsby Cloud will automatically rebuild and redeploy your site!
|
89 |
|
90 | ## 💻 Get started with Gatsby locally in 5 Minutes
|
91 |
|
92 | You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:
|
93 |
|
94 | 1. **Initialize a new project.**
|
95 |
|
96 | ```shell
|
97 | npm init gatsby
|
98 | ```
|
99 |
|
100 | Give it the name "My Gatsby Site".
|
101 |
|
102 | 2. **Start the site in `develop` mode.**
|
103 |
|
104 | Next, move into your new site’s directory and start it up:
|
105 |
|
106 | ```shell
|
107 | cd my-gatsby-site/
|
108 | npm run develop
|
109 | ```
|
110 |
|
111 | 3. **Open the source code and start editing!**
|
112 |
|
113 | 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!
|
114 |
|
115 | 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](https://gatsbyjs.com/plugins/) and [the official tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/).
|
116 |
|
117 | ## 🎓 Learning Gatsby
|
118 |
|
119 | Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/).
|
120 |
|
121 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/docs/tutorial/getting-started/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
|
122 |
|
123 | - **To dive straight into code samples head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the “<i>How-to Guides</i>”, “<i>Reference</i>”, and “<i>Conceptual Guides</i>” sections in the sidebar.
|
124 |
|
125 | We welcome suggestions for improving our docs. See the [“how to contribute”](https://www.gatsbyjs.com/contributing/how-to-contribute/) documentation for more details.
|
126 |
|
127 | **Start Learning Gatsby: [Follow the Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/) · [Read the Docs](https://www.gatsbyjs.com/docs/)**
|
128 |
|
129 | ## 🚢 Release Notes
|
130 |
|
131 | Wondering what we've shipped recently? Check out our [release notes](https://www.gatsbyjs.com/docs/reference/release-notes) for key highlights, performance improvements, new features, and notable bugfixes.
|
132 |
|
133 | Also, read our [documentation on version support](https://www.gatsbyjs.com/docs/reference/release-notes/gatsby-version-support/) to understand our plans for each version of Gatsby.
|
134 |
|
135 | ## 💼 Migration Guides
|
136 |
|
137 | Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v5 to your site without starting from scratch!
|
138 |
|
139 | - [Migrate from v4 to v5](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/)
|
140 | - [Migrate from v3 to v4](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/)
|
141 | - [Migrate from v2 to v3](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/)
|
142 |
|
143 | ## ❗ Code of Conduct
|
144 |
|
145 | 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**](https://www.gatsbyjs.com/contributing/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. 💪💜
|
146 |
|
147 | ## 🤝 How to Contribute
|
148 |
|
149 | 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!
|
150 |
|
151 | Check out our [**Contributing Guide**](https://www.gatsbyjs.com/contributing/how-to-contribute/) for ideas on contributing and setup steps for getting our repositories up and running on your local machine.
|
152 |
|
153 | ### A note on how this repository is organized
|
154 |
|
155 | This repository is a [monorepo](https://trunkbaseddevelopment.com/monorepos/) managed using [Lerna](https://github.com/lerna/lerna). This means there are [multiple packages](https://github.com/gatsbyjs/gatsby/tree/master/packages) managed in this codebase, even though we publish them to NPM as separate packages.
|
156 |
|
157 | ## 📝 License
|
158 |
|
159 | Licensed under the [MIT License](./LICENSE).
|
160 |
|
161 | ## 💜 Thanks
|
162 |
|
163 | 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.
|
164 |
|
165 | 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.
|
166 |
|
\ | No newline at end of file |