chore(docs): Move existing main tutorial to "getting-started" name (#…

…37539)

README.md

@@ -40,9 +40,9 @@
 </p>
 
 <h2 align="center">
-  <a href="https://www.gatsbyjs.com/docs/">Quickstart</a>
+  <a href="https://www.gatsbyjs.com/docs/quick-start/">Quickstart</a>
   <span> · </span>
-  <a href="https://www.gatsbyjs.com/tutorial/">Tutorial</a>
+  <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>
@@ -112,19 +112,19 @@ You can get a new Gatsby site up and running on your local dev environment in 5
 
    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](https://gatsbyjs.com/plugins/) and [the official tutorial](https://www.gatsbyjs.com/tutorial/).
+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/).
 
 ## 🎓 Learning Gatsby
 
 Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/).
 
-- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
+- **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.
 
 - **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.
 
 We welcome suggestions for improving our docs. See the [“how to contribute”](https://www.gatsbyjs.com/contributing/how-to-contribute/) documentation for more details.
 
-**Start Learning Gatsby: [Follow the Tutorial](https://www.gatsbyjs.com/tutorial/) · [Read the Docs](https://www.gatsbyjs.com/docs/)**
+**Start Learning Gatsby: [Follow the Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/) · [Read the Docs](https://www.gatsbyjs.com/docs/)**
 
 ## 🚢 Release Notes
 

deprecated-packages/gatsby-recipes/recipes/pwa.mdx

@@ -25,7 +25,7 @@ It also adds a default icon @ src/images/icon.svg (which you can replace afterwa
 
 <File
   path="src/images/icon.png"
-  content="https://github.com/gatsbyjs/gatsby/raw/master/docs/tutorial/part-eight/icon.png"
+  content="https://github.com/gatsbyjs/gatsby/raw/master/docs/tutorial/getting-started/part-eight/icon.png"
 />
 
 <GatsbyPlugin

docs/contributing/docs-contributions/docs-structure.md

@@ -13,7 +13,7 @@ The [Gatsby documentation site](/docs) includes four different types of material
 - [**How-To Guides**](/docs/how-to/) are practical step-by-step guides to help readers achieve a specific goal. These are most useful when readers are trying to get something done.
 - [**Reference Guides**](/docs/reference/) are nitty-gritty technical descriptions of how Gatsby works. These are most useful when readers need detailed information about Gatsby's APIs.
 - [**Conceptual Guides**](/docs/conceptual/) are big-picture explanations of higher-level Gatsby concepts. These are most useful when readers want to deepen their understanding of a particular topic.
-- The [**Tutorial**](/docs/tutorial/) is a self-contained introduction that guides readers step-by-step through creating their first Gatsby site. This is most useful when readers are first getting started with Gatsby.
+- The [**Tutorial**](/docs/tutorial/getting-started/) is a self-contained introduction that guides readers step-by-step through creating their first Gatsby site. This is most useful when readers are first getting started with Gatsby.
 
 ![Each of the four types of docs has a different intended audience. The Tutorial is for learning-oriented readers, who want practical steps to help when they're studying. How-To Guides are for problem-oriented readers, who want practical steps to help when they're working. Reference Guides are for information-oriented readers, who want theoretical knowledge to help when they're working. Conceptual Guides are for understanding-oriented readers, who want theoretical knowledge to help when they're studying.](./doc-type-quadrants.svg)
 

docs/docs/adding-search-with-js-search.md

@@ -7,7 +7,7 @@ examples:
 
 ## Prerequisites
 
-Before you go through the steps needed for adding client-side search to your Gatsby website, you should be familiar with the basics of Gatsby. Check out the [tutorial](/docs/tutorial/) and brush up on the [documentation](/docs/) if you need to. In addition, some knowledge of [ES6 syntax](https://medium.freecodecamp.org/write-less-do-more-with-javascript-es6-5fd4a8e50ee2) will be useful.
+Before you go through the steps needed for adding client-side search to your Gatsby website, you should be familiar with the basics of Gatsby. Check out the [tutorial](/docs/tutorial/getting-started/) and brush up on the [documentation](/docs/) if you need to. In addition, some knowledge of [ES6 syntax](https://medium.freecodecamp.org/write-less-do-more-with-javascript-es6-5fd4a8e50ee2) will be useful.
 
 ## What is JS Search
 

docs/docs/adding-tags-and-categories-to-blog-posts.md

@@ -4,7 +4,7 @@ title: Creating Tags Pages for Blog Posts
 
 Creating tag pages for your blog post is a way to let visitors browse related content.
 
-To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
+To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/getting-started/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
 
 The process will essentially look like this:
 

docs/docs/building-an-ecommerce-site-with-shopify.md

@@ -127,7 +127,7 @@ export const query = graphql`
 
 ## Generating a page for each product
 
-You can [programmatically create pages](/docs/tutorial/part-7/) in Gatsby for every product in your Shopify store.
+You can [programmatically create pages](/docs/tutorial/getting-started/part-7/) in Gatsby for every product in your Shopify store.
 
 Create a template for your product pages by adding a new file, `/src/templates/product.js`.
 

docs/docs/conceptual/building-with-components.md

@@ -70,7 +70,7 @@ You can programmatically create pages using "page template components". All page
 
 `src/templates/post.jsx` is an example of a page template. It queries GraphQL for markdown data (sourcing from the `posts` directory) and then renders the page using this data.
 
-See [part six](/docs/tutorial/part-6/) of the tutorial for a detailed introduction to programmatically creating pages.
+See [part six](/docs/tutorial/getting-started/part-6/) of the tutorial for a detailed introduction to programmatically creating pages.
 
 Example:
 

docs/docs/conceptual/data-fetching.md

@@ -25,7 +25,7 @@ Reasons to fetch certain data at build time vs. client runtime will vary, but in
 
 In order to fetch data at build time, you can use a source plugin or source data yourself. To source data yourself you can create an integration with a third-party system by creating [nodes for the GraphQL layer](/docs/node-creation/) in your `gatsby-node` file from retrieved data that becomes queryable in pages. This is the same method that source plugins implement to [source data](/docs/content-and-data/) while the site builds. You can read about that process in the [Creating a Source Plugin guide](/docs/how-to/plugins-and-themes/creating-a-source-plugin/).
 
-> This process of fetching data at build time and creating pages from the data is [covered in more depth in the tutorial](/docs/tutorial/part-5/) as well as the docs for [creating pages from data programmatically](/docs/programmatically-create-pages-from-data/).
+> This process of fetching data at build time and creating pages from the data is [covered in more depth in the tutorial](/docs/tutorial/getting-started/part-5/) as well as the docs for [creating pages from data programmatically](/docs/programmatically-create-pages-from-data/).
 
 #### Source data to be queried at build time
 

docs/docs/conceptual/gatsby-jargon.md

@@ -60,7 +60,7 @@ GraphQL is a query language (the QL part of its name) that Gatsby uses to genera
 
 Using a special syntax, you describe the data you want in your component and then that data is given to you, such as site metadata from your `gatsby-config.js`, connected WordPress posts, Markdown files, images, and more. Gatsby uses GraphQL to enable components to declare the data they need and apply it to render on a page. Using GraphQL in Gatsby provides many [benefits](/docs/why-gatsby-uses-graphql/), such as the ability to return data from multiple sources in one query, and transform that data at the same time (such as using Gatsby Image).
 
-Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/part-4/)
+Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/getting-started/part-4/)
 
 ## webpack
 

docs/docs/conceptual/graphql-concepts.md

@@ -115,7 +115,7 @@ When starting out with GraphQL, we recommend the following two tutorials:
 - https://www.howtographql.com/
 - https://graphql.org/learn/
 
-[The official Gatsby tutorial](/docs/tutorial/part-4/) also includes an introduction to using GraphQL specifically with Gatsby.
+[The official Gatsby tutorial](/docs/tutorial/getting-started/part-4/) also includes an introduction to using GraphQL specifically with Gatsby.
 
 ## How do GraphQL and Gatsby work together?
 

docs/docs/glossary/build.md

@@ -23,7 +23,7 @@ For smaller teams and projects, use `gatsby build`. The `gatsby build` command i
 npm install -g gatsby-cli
 ```
 
-Installing `gatsby-cli` globally makes Gatsby commands available system-wide. You'll use `gatsby new` to [create a new site](/docs/tutorial/part-0/#create-a-gatsby-site), and `gatsby develop` to start a development server on your local machine.
+Installing `gatsby-cli` globally makes Gatsby commands available system-wide. You'll use `gatsby new` to [create a new site](/docs/tutorial/getting-started/part-0/#create-a-gatsby-site), and `gatsby develop` to start a development server on your local machine.
 
 When you're ready to publish your project, run the `gatsby build` command to create a production-ready version of your site. Once built, you can use an SFTP client, the [rsync](https://en.wikipedia.org/wiki/Rsync) utility, or similar tool to transfer these files to your host.
 

docs/docs/glossary/node.md

@@ -17,7 +17,7 @@ A year later, Node.js made its debut as a standalone JavaScript runtime using th
 
 Once you've installed Node.js, you can use it to run JavaScript from the [command line](/docs/glossary#command-line). Type `node` at a prompt to launch the Node.js interactive shell. Include the path to a JavaScript file to execute that script: e.g. `node /Users/gatsbyfan/hello-world.js`.
 
-You will need to [install Node.js](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system) before using Gatsby. Gatsby is built using JavaScript, and requires the Node.js runtime.
+You will need to [install Node.js](/docs/tutorial/getting-started/part-0/#install-nodejs-for-your-appropriate-operating-system) before using Gatsby. Gatsby is built using JavaScript, and requires the Node.js runtime.
 
 Installing Node.js also installs [npm](/docs/glossary#npm), the Node.js _package manager_. A package manager is specialized software that lets you install and update modules and packages used in your project.
 

docs/docs/glossary/npm.md

@@ -15,7 +15,7 @@ its plugins.
 
 npm is a [command line](/docs/glossary#command-line) tool. You'll need Terminal (Mac, Linux) or Command Prompt (Windows) in order to run its commands. To use one of npm's features, type `npm <command>`. For example, `npm help` displays a list of available features, including `install`, `uninstall`, `update`, and `search`.
 
-npm is installed alongside Node during the default [installation process](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system). You don't need to take any additional steps to add it to your environment.
+npm is installed alongside Node during the default [installation process](/docs/tutorial/getting-started/part-0/#install-nodejs-for-your-appropriate-operating-system). You don't need to take any additional steps to add it to your environment.
 
 ### Using npm to install Gatsby
 
@@ -58,4 +58,4 @@ This will update the dependencies list of `package.json` and `package-lock.json`
 - [npm](https://www.npmjs.com/) official website
 - [Node.js](https://nodejs.org/en/) official website
 - [An introduction to the npm package manager](https://nodejs.dev/an-introduction-to-the-npm-package-manager) from Nodejs.dev
-- [Set Up Your Development Environment](/docs/tutorial/part-0/) from the Gatsby docs
+- [Set Up Your Development Environment](/docs/tutorial/getting-started/part-0/) from the Gatsby docs

docs/docs/graphql-reference.md

@@ -9,7 +9,7 @@ These examples will work on the _real_ schema used on [graphql-reference example
 You can run this example locally to experiment and poke around the innards of the site! To get to the GraphiQL editor, go to `localhost:8000/___graphql` (that's three underscores).
 You can also open the [CodeSandbox version](https://codesandbox.io/s/github/gatsbyjs/gatsby/tree/master/examples/graphql-reference) of the example site.
 
-For more background information, read about [why Gatsby uses GraphQL](/docs/why-gatsby-uses-graphql/) and [how to use GraphiQL](/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries) in any Gatsby site.
+For more background information, read about [why Gatsby uses GraphQL](/docs/why-gatsby-uses-graphql/) and [how to use GraphiQL](/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries) in any Gatsby site.
 
 ## Basic queries
 

docs/docs/guides.md

@@ -2,6 +2,6 @@
 title: Reference Guides
 ---
 
-Dive deeper into different topics around building with Gatsby, like sourcing data, building and styling pages, deployment, and more. While the [tutorials](/docs/tutorial/) are step-by-step instructions, reference guides are resources about the various Gatsby development techniques.
+Dive deeper into different topics around building with Gatsby, like sourcing data, building and styling pages, deployment, and more. While the [tutorials](/docs/tutorial/getting-started/) are step-by-step instructions, reference guides are resources about the various Gatsby development techniques.
 
 <GuideList slug={props.slug} />

docs/docs/how-to/images-and-media/preprocessing-external-images.md

@@ -126,7 +126,7 @@ query {
 }
 ```
 
-And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/part-7/) section of the Gatsby Tutorial.
+And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/getting-started/part-7/) section of the Gatsby Tutorial.
 
 ```jsx
 import React from "react"

docs/docs/how-to/images-and-media/working-with-images-in-markdown.md

@@ -2,7 +2,7 @@
 title: Working with Images in Markdown & MDX
 ---
 
-When building Gatsby sites composed primarily of [markdown](/docs/how-to/routing/adding-markdown-pages/) or [MDX](/docs/how-to/routing/mdx/), insertion of images can enhance the content. You can add images in multiple ways which will be explained below. If you're new to Gatsby we recommend checking out the [main tutorial](/docs/tutorial/) first. The instructions also assume that you already have an existing Gatsby site running with either markdown or MDX.
+When building Gatsby sites composed primarily of [markdown](/docs/how-to/routing/adding-markdown-pages/) or [MDX](/docs/how-to/routing/mdx/), insertion of images can enhance the content. You can add images in multiple ways which will be explained below. If you're new to Gatsby we recommend checking out the [main tutorial](/docs/tutorial/getting-started/) first. The instructions also assume that you already have an existing Gatsby site running with either markdown or MDX.
 
 ## Prerequisites
 
@@ -13,7 +13,7 @@ When building Gatsby sites composed primarily of [markdown](/docs/how-to/routing
 
 In sites like a blog, you may want to include a featured image that appears at the top of a page. One way to do this is to grab the image filename from a frontmatter field and then transform it with `gatsby-plugin-sharp` in a GraphQL query.
 
-If you want to have a very detailed explanation of this, head to [part 7 of the Gatsby tutorial](/docs/tutorial/part-7/). The tutorial uses MDX, the instructions below will use markdown for the most part. It more or less behaves the same though.
+If you want to have a very detailed explanation of this, head to [part 7 of the Gatsby tutorial](/docs/tutorial/getting-started/part-7/). The tutorial uses MDX, the instructions below will use markdown for the most part. It more or less behaves the same though.
 
 To start out, install the necessary plugins for [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image/).
 

docs/docs/how-to/local-development/starters.md

@@ -31,6 +31,6 @@ gatsby develop
 ## Additional resources
 
 - Follow a [more detailed guide](/docs/starters/) on using Gatsby starters.
-- Learn how to use the [Gatsby CLI](/docs/reference/gatsby-cli) tool to use starters in [tutorial part one](/docs/tutorial/part-1/#using-gatsby-starters)
+- Learn how to use the [Gatsby CLI](/docs/reference/gatsby-cli) tool to use starters in [tutorial part one](/docs/tutorial/getting-started/part-1/#using-gatsby-starters)
 - Browse the [Starter Library](/starters/?v=2)
 - Check out Gatsby's [official default starter](https://github.com/gatsbyjs/gatsby-starter-default)

docs/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud.md

@@ -23,5 +23,5 @@ You can [sign up for Gatsby Cloud here](/dashboard/signup/).
 
 ## Additional Resources
 
-- [Tutorial Part 1: Create and Deploy Your First Gatsby Site](/docs/tutorial/part-1/)
+- [Tutorial Part 1: Create and Deploy Your First Gatsby Site](/docs/tutorial/getting-started/part-1/)
 - [Gatsby Cloud contact form](/contact-us/)

docs/docs/how-to/querying-data/page-query.md

@@ -78,7 +78,7 @@ const HomePage = () => {
 
 The first part of writing the GraphQL query is including the operation (in this case "`query`") along with a name.
 
-From [using GraphiQL](/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries), you've learned that one of the types that you can query is `site`, which in turn has its own `siteMetadata` field with subfields that correspond to the data provided in `gatsby-config.js`.
+From [using GraphiQL](/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries), you've learned that one of the types that you can query is `site`, which in turn has its own `siteMetadata` field with subfields that correspond to the data provided in `gatsby-config.js`.
 
 Putting this together, the completed query looks like:
 

docs/docs/how-to/querying-data/running-queries-with-graphiql.md

@@ -70,5 +70,5 @@ The environment variable `ENABLE_GATSBY_REFRESH_ENDPOINT` enables a "Refresh Dat
 
 ## Other resources
 
-- See [Tutorial Part 4: Query for Data with GraphQL](/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries) for a more complete example of using GraphiQL
+- See [Tutorial Part 4: Query for Data with GraphQL](/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries) for a more complete example of using GraphiQL
 - See the [README for GraphiQL](https://github.com/graphql/graphiql/tree/main/packages/graphiql)

docs/docs/how-to/styling/css-modules.md

@@ -71,4 +71,4 @@ performance benefits like only bundling referenced code.
 
 ## How to build a page using CSS Modules
 
-Visit the [CSS Modules section of the tutorial](/docs/tutorial/part-2/#css-modules) for a guided tour of building a page with CSS Modules.
+Visit the [CSS Modules section of the tutorial](/docs/tutorial/getting-started/part-2/#css-modules) for a guided tour of building a page with CSS Modules.