chore(README): Add quickstart & reorder value props (#35208)

Co-authored-by: Lennart <[email protected]>
Co-authored-by: gatsbybot <[email protected]>

Author: 3 people

README.md

@@ -62,30 +62,32 @@
 
 Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.
 
-- **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.
+- **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.
 
-- **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.
+- **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.
 
-- **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.
+- **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.
 
-- **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.
+- **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.
 
-- **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](https://www.gatsbyjs.com/cloud/) and other similar services.
+- **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.
 
 [**Learn how to use Gatsby for your next project.**](https://www.gatsbyjs.com/docs/)
 
+## 🚀 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">](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)
+
+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!
+
 ## What’s In This Document
 
 - [Get Up and Running in 5 Minutes](#-get-up-and-running-in-5-minutes)
@@ -96,7 +98,7 @@ Gatsby helps professional developers efficiently create maintainable, highly-per
 - [License](#-license)
 - [Thanks to Our Contributors](#-thanks)
 
-## 🚀 Get Up and Running in 5 Minutes
+## 💻 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:
 

packages/gatsby/README.md

@@ -62,30 +62,32 @@
 
 Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.
 
-- **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.
+- **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.
 
-- **Choose your Rendering Option.** 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.
+- **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.
 
-- **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.
+- **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.
 
-- **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.
+- **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.
 
-- **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](https://www.gatsbyjs.com/cloud/) and other similar services.
+- **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.
 
 [**Learn how to use Gatsby for your next project.**](https://www.gatsbyjs.com/docs/)
 
+## 🚀 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">](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)
+
+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!
+
 ## What’s In This Document
 
 - [Get Up and Running in 5 Minutes](#-get-up-and-running-in-5-minutes)
@@ -96,7 +98,7 @@ Gatsby helps professional developers efficiently create maintainable, highly-per
 - [License](#-license)
 - [Thanks to Our Contributors](#-thanks)
 
-## 🚀 Get Up and Running in 5 Minutes
+## 💻 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: