diff --git a/README.md b/README.md index 64aef5bf7f83e..d4024c0429231 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,9 @@

- Quickstart + Quickstart · - Tutorial + Tutorial · Plugins · @@ -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 “How-to Guides”, “Reference”, and “Conceptual Guides” 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 diff --git a/deprecated-packages/gatsby-recipes/recipes/pwa.mdx b/deprecated-packages/gatsby-recipes/recipes/pwa.mdx index dc2019a79b7be..af1fdd8e583f6 100644 --- a/deprecated-packages/gatsby-recipes/recipes/pwa.mdx +++ b/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 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 diff --git a/docs/docs/conceptual/gatsby-jargon.md b/docs/docs/conceptual/gatsby-jargon.md index 6c1a052985c01..ee90d6ea1197f 100644 --- a/docs/docs/conceptual/gatsby-jargon.md +++ b/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 diff --git a/docs/docs/conceptual/graphql-concepts.md b/docs/docs/conceptual/graphql-concepts.md index 4b21e525044ed..ba33ded19fcf3 100644 --- a/docs/docs/conceptual/graphql-concepts.md +++ b/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? diff --git a/docs/docs/glossary/build.md b/docs/docs/glossary/build.md index 2da952369de32..98078555c4573 100644 --- a/docs/docs/glossary/build.md +++ b/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. diff --git a/docs/docs/glossary/node.md b/docs/docs/glossary/node.md index 1e7e3a5cbd86e..d9540eae25ada 100644 --- a/docs/docs/glossary/node.md +++ b/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. diff --git a/docs/docs/glossary/npm.md b/docs/docs/glossary/npm.md index 3775c17a71f7a..f826bc4e2ae3a 100644 --- a/docs/docs/glossary/npm.md +++ b/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 `. 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 diff --git a/docs/docs/graphql-reference.md b/docs/docs/graphql-reference.md index e285b8b8ee1eb..9739ef215d72f 100644 --- a/docs/docs/graphql-reference.md +++ b/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 diff --git a/docs/docs/guides.md b/docs/docs/guides.md index fb0eaa47df33f..381d088a2b03b 100644 --- a/docs/docs/guides.md +++ b/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. diff --git a/docs/docs/how-to/images-and-media/preprocessing-external-images.md b/docs/docs/how-to/images-and-media/preprocessing-external-images.md index 0dec51d85631a..551bb02101cf2 100644 --- a/docs/docs/how-to/images-and-media/preprocessing-external-images.md +++ b/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" diff --git a/docs/docs/how-to/images-and-media/working-with-images-in-markdown.md b/docs/docs/how-to/images-and-media/working-with-images-in-markdown.md index 1af1b04b18989..909364da5ab86 100644 --- a/docs/docs/how-to/images-and-media/working-with-images-in-markdown.md +++ b/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/). diff --git a/docs/docs/how-to/local-development/starters.md b/docs/docs/how-to/local-development/starters.md index 839371f61c687..58301a01a67ab 100644 --- a/docs/docs/how-to/local-development/starters.md +++ b/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) diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud.md index 2b812496f3227..8090955def4bd 100644 --- a/docs/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud.md +++ b/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/) diff --git a/docs/docs/how-to/querying-data/page-query.md b/docs/docs/how-to/querying-data/page-query.md index 85f1e4bdaf3f3..41868f9b40d01 100644 --- a/docs/docs/how-to/querying-data/page-query.md +++ b/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: diff --git a/docs/docs/how-to/querying-data/running-queries-with-graphiql.md b/docs/docs/how-to/querying-data/running-queries-with-graphiql.md index fe2e50e3c493f..202c902fc1e31 100644 --- a/docs/docs/how-to/querying-data/running-queries-with-graphiql.md +++ b/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) diff --git a/docs/docs/how-to/styling/css-modules.md b/docs/docs/how-to/styling/css-modules.md index ab7d821e61867..dd6f772ec7e4c 100644 --- a/docs/docs/how-to/styling/css-modules.md +++ b/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. diff --git a/docs/docs/how-to/styling/global-css.md b/docs/docs/how-to/styling/global-css.md index 333acbd2eea02..c4a18395f9d28 100644 --- a/docs/docs/how-to/styling/global-css.md +++ b/docs/docs/how-to/styling/global-css.md @@ -8,7 +8,7 @@ Globally-scoped CSS rules are declared in external `.css` stylesheets, and [CSS ## Adding global styles with a layout component -The best way to add global styles is with a [shared layout component](/docs/tutorial/part-2/#create-a-reusable-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items. +The best way to add global styles is with a [shared layout component](/docs/tutorial/getting-started/part-2/#create-a-reusable-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items. > **NOTE:** This pattern is implemented by default in [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/063978d59f74103da45d5880a61ebd2e77798e3c/src/components/layout.js#L13). diff --git a/docs/docs/linking-between-pages.md b/docs/docs/linking-between-pages.md index ef90484debab3..eaab72cc1c4c4 100644 --- a/docs/docs/linking-between-pages.md +++ b/docs/docs/linking-between-pages.md @@ -59,5 +59,5 @@ It is also recommended to include a [visual icon](https://thenounproject.com/ter ## Other resources -- For the complete example of how to link between pages, see [Part One](/docs/tutorial/part-1/#linking-between-pages/) in the Tutorial +- For the complete example of how to link between pages, see [Part One](/docs/tutorial/getting-started/part-1/#linking-between-pages/) in the Tutorial - Check out more detail on routing in Gatsby in the [API doc for Gatsby Link](/docs/reference/built-in-components/gatsby-link/). diff --git a/docs/docs/porting-an-html-site-to-gatsby.md b/docs/docs/porting-an-html-site-to-gatsby.md index e35ba8b117e49..d22bac3f504fe 100644 --- a/docs/docs/porting-an-html-site-to-gatsby.md +++ b/docs/docs/porting-an-html-site-to-gatsby.md @@ -2,7 +2,7 @@ title: Porting an HTML Site to Gatsby --- -This guide focuses on the parts of Gatsby that are applicable to a static website. For a more comprehensive walk through Gatsby's features check out the [Gatsby tutorial](/docs/tutorial/). By following the example on this page, you will complete the key stages of porting an HTML website to Gatsby and establish your Gatsby development workflow. +This guide focuses on the parts of Gatsby that are applicable to a static website. For a more comprehensive walk through Gatsby's features check out the [Gatsby tutorial](/docs/tutorial/getting-started/). By following the example on this page, you will complete the key stages of porting an HTML website to Gatsby and establish your Gatsby development workflow. **Note:** This guide can also be used to migrate a section of a site, to be served next to existing files. Pay extra attention to the section on [hosting](#hosting-the-new-website) for guidance. @@ -41,7 +41,7 @@ No [client-side](/docs/glossary#client-side) JavaScript (e.g jQuery etc.) is on ### Development environment -Gatsby generates websites and web applications for production through a compilation and build process, and it also has tools optimized for local development. To set up the Gatsby [CLI](/docs/glossary#cli) and development environment (if you haven't already) check out [Part Zero of the Gatsby tutorial](/docs/tutorial/part-0/). +Gatsby generates websites and web applications for production through a compilation and build process, and it also has tools optimized for local development. To set up the Gatsby [CLI](/docs/glossary#cli) and development environment (if you haven't already) check out [Part Zero of the Gatsby tutorial](/docs/tutorial/getting-started/part-0/). ### Gatsby Project diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 8d67963eb9949..fcffb5e8eb015 100644 --- a/docs/docs/quick-start.md +++ b/docs/docs/quick-start.md @@ -2,7 +2,7 @@ title: Quick Start --- -This quick start is intended for intermediate to advanced developers. For a gentler intro to Gatsby, [head to our tutorial](/docs/tutorial/)! +This quick start is intended for intermediate to advanced developers. For a gentler intro to Gatsby, [head to our tutorial](/docs/tutorial/getting-started/)! ## Getting started with Gatsby diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index 782d0479fdb28..dcd51557e7bd4 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -74,7 +74,7 @@ module.exports = { This way you can store it in one place, and pull it whenever you need it. If you ever need to update the info, you only have to change it here. -See a full description and sample usage in [Gatsby Tutorial Part Four](/docs/tutorial/part-4/#data-in-gatsby). +See a full description and sample usage in [Gatsby Tutorial Part Four](/docs/tutorial/getting-started/part-4/#data-in-gatsby). ## plugins diff --git a/docs/docs/reference/release-notes/migrating-from-v1-to-v2.md b/docs/docs/reference/release-notes/migrating-from-v1-to-v2.md index ece51bd5cadcb..95f92f1351ba6 100644 --- a/docs/docs/reference/release-notes/migrating-from-v1-to-v2.md +++ b/docs/docs/reference/release-notes/migrating-from-v1-to-v2.md @@ -1042,7 +1042,7 @@ Here's a brief section on starting a new project with Gatsby v2 instead of upgra _Start from scratch:_ If you're a _start from scratch_ kind of person, you can install Gatsby and React like this: `npm install gatsby react react-dom` -_Tutorial:_ If you'd like a step-by-step guide, [follow the tutorial](/docs/tutorial/) to get started with Gatsby v2. +_Tutorial:_ If you'd like a step-by-step guide, [follow the tutorial](/docs/tutorial/getting-started/) to get started with Gatsby v2. _Starters:_ If you'd rather use one of the official starters, install your favorite one with the Gatsby CLI. diff --git a/docs/docs/reference/release-notes/v4.21/index.md b/docs/docs/reference/release-notes/v4.21/index.md index eeecbb88e54c1..5bfd04cf2e71b 100644 --- a/docs/docs/reference/release-notes/v4.21/index.md +++ b/docs/docs/reference/release-notes/v4.21/index.md @@ -43,7 +43,7 @@ There are multiple ways on how you can get started with `gatsby-plugin-mdx` v4: - Initialize a new project with `npm init gatsby` and choose the **"Add Markdown and MDX support"** option - Follow the [Adding MDX pages](/docs/how-to/routing/mdx/) guide -- Follow our [beginner friendly tutorial](/docs/tutorial/) to learn how to create a blog with MDX +- Follow our [beginner friendly tutorial](/docs/tutorial/getting-started/) to learn how to create a blog with MDX - Try out the [using-mdx example](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mdx) - Fork this [CodeSandbox](https://codesandbox.io/s/github/gatsbyjs/gatsby/tree/master/examples/using-mdx) diff --git a/docs/docs/tutorial/part-0/05-gatsby-help.png b/docs/docs/tutorial/getting-started/part-0/05-gatsby-help.png similarity index 100% rename from docs/docs/tutorial/part-0/05-gatsby-help.png rename to docs/docs/tutorial/getting-started/part-0/05-gatsby-help.png diff --git a/docs/docs/tutorial/part-0/index.mdx b/docs/docs/tutorial/getting-started/part-0/index.mdx similarity index 99% rename from docs/docs/tutorial/part-0/index.mdx rename to docs/docs/tutorial/getting-started/part-0/index.mdx index ce2ca3f9fcced..3708f3f9253ec 100644 --- a/docs/docs/tutorial/part-0/index.mdx +++ b/docs/docs/tutorial/getting-started/part-0/index.mdx @@ -330,7 +330,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us In Part 1 of the Tutorial, you'll create your first Gatsby site and deploy it online for everyone to see. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-1/01-create-a-site-button.png b/docs/docs/tutorial/getting-started/part-1/01-create-a-site-button.png similarity index 100% rename from docs/docs/tutorial/part-1/01-create-a-site-button.png rename to docs/docs/tutorial/getting-started/part-1/01-create-a-site-button.png diff --git a/docs/docs/tutorial/part-1/02-import-a-git-repo.png b/docs/docs/tutorial/getting-started/part-1/02-import-a-git-repo.png similarity index 100% rename from docs/docs/tutorial/part-1/02-import-a-git-repo.png rename to docs/docs/tutorial/getting-started/part-1/02-import-a-git-repo.png diff --git a/docs/docs/tutorial/part-1/03-github-gatsby-cloud-permissions.png b/docs/docs/tutorial/getting-started/part-1/03-github-gatsby-cloud-permissions.png similarity index 100% rename from docs/docs/tutorial/part-1/03-github-gatsby-cloud-permissions.png rename to docs/docs/tutorial/getting-started/part-1/03-github-gatsby-cloud-permissions.png diff --git a/docs/docs/tutorial/part-1/04-select-repository.png b/docs/docs/tutorial/getting-started/part-1/04-select-repository.png similarity index 100% rename from docs/docs/tutorial/part-1/04-select-repository.png rename to docs/docs/tutorial/getting-started/part-1/04-select-repository.png diff --git a/docs/docs/tutorial/part-1/05-add-site-details.png b/docs/docs/tutorial/getting-started/part-1/05-add-site-details.png similarity index 100% rename from docs/docs/tutorial/part-1/05-add-site-details.png rename to docs/docs/tutorial/getting-started/part-1/05-add-site-details.png diff --git a/docs/docs/tutorial/part-1/06-integrations-and-environment-variables.png b/docs/docs/tutorial/getting-started/part-1/06-integrations-and-environment-variables.png similarity index 100% rename from docs/docs/tutorial/part-1/06-integrations-and-environment-variables.png rename to docs/docs/tutorial/getting-started/part-1/06-integrations-and-environment-variables.png diff --git a/docs/docs/tutorial/part-1/07-site-page.png b/docs/docs/tutorial/getting-started/part-1/07-site-page.png similarity index 100% rename from docs/docs/tutorial/part-1/07-site-page.png rename to docs/docs/tutorial/getting-started/part-1/07-site-page.png diff --git a/docs/docs/tutorial/part-1/deployment-workflow.png b/docs/docs/tutorial/getting-started/part-1/deployment-workflow.png similarity index 100% rename from docs/docs/tutorial/part-1/deployment-workflow.png rename to docs/docs/tutorial/getting-started/part-1/deployment-workflow.png diff --git a/docs/docs/tutorial/part-1/gatsby-new-cli.png b/docs/docs/tutorial/getting-started/part-1/gatsby-new-cli.png similarity index 100% rename from docs/docs/tutorial/part-1/gatsby-new-cli.png rename to docs/docs/tutorial/getting-started/part-1/gatsby-new-cli.png diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/getting-started/part-1/index.mdx similarity index 99% rename from docs/docs/tutorial/part-1/index.mdx rename to docs/docs/tutorial/getting-started/part-1/index.mdx index 41cc621526366..c4b595a9a30ae 100644 --- a/docs/docs/tutorial/part-1/index.mdx +++ b/docs/docs/tutorial/getting-started/part-1/index.mdx @@ -369,7 +369,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us Now that you have a default Gatsby site up and running, it's time to make it your own. In Part 2 of the Tutorial, you'll learn how to use React to customize the design and contents of your site. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-1/localhost-new-site.png b/docs/docs/tutorial/getting-started/part-1/localhost-new-site.png similarity index 100% rename from docs/docs/tutorial/part-1/localhost-new-site.png rename to docs/docs/tutorial/getting-started/part-1/localhost-new-site.png diff --git a/docs/docs/tutorial/part-1/new-repo-button.png b/docs/docs/tutorial/getting-started/part-1/new-repo-button.png similarity index 100% rename from docs/docs/tutorial/part-1/new-repo-button.png rename to docs/docs/tutorial/getting-started/part-1/new-repo-button.png diff --git a/docs/docs/tutorial/part-1/new-repo-options.png b/docs/docs/tutorial/getting-started/part-1/new-repo-options.png similarity index 100% rename from docs/docs/tutorial/part-1/new-repo-options.png rename to docs/docs/tutorial/getting-started/part-1/new-repo-options.png diff --git a/docs/docs/tutorial/part-1/turn-on-hosting.png b/docs/docs/tutorial/getting-started/part-1/turn-on-hosting.png similarity index 100% rename from docs/docs/tutorial/part-1/turn-on-hosting.png rename to docs/docs/tutorial/getting-started/part-1/turn-on-hosting.png diff --git a/docs/docs/tutorial/part-2/about-page-with-layout.png b/docs/docs/tutorial/getting-started/part-2/about-page-with-layout.png similarity index 100% rename from docs/docs/tutorial/part-2/about-page-with-layout.png rename to docs/docs/tutorial/getting-started/part-2/about-page-with-layout.png diff --git a/docs/docs/tutorial/part-2/about-page-with-link.png b/docs/docs/tutorial/getting-started/part-2/about-page-with-link.png similarity index 100% rename from docs/docs/tutorial/part-2/about-page-with-link.png rename to docs/docs/tutorial/getting-started/part-2/about-page-with-link.png diff --git a/docs/docs/tutorial/part-2/about-page.png b/docs/docs/tutorial/getting-started/part-2/about-page.png similarity index 100% rename from docs/docs/tutorial/part-2/about-page.png rename to docs/docs/tutorial/getting-started/part-2/about-page.png diff --git a/docs/docs/tutorial/part-2/children-example.png b/docs/docs/tutorial/getting-started/part-2/children-example.png similarity index 100% rename from docs/docs/tutorial/part-2/children-example.png rename to docs/docs/tutorial/getting-started/part-2/children-example.png diff --git a/docs/docs/tutorial/part-2/component-with-props.png b/docs/docs/tutorial/getting-started/part-2/component-with-props.png similarity index 100% rename from docs/docs/tutorial/part-2/component-with-props.png rename to docs/docs/tutorial/getting-started/part-2/component-with-props.png diff --git a/docs/docs/tutorial/part-2/component-without-props.png b/docs/docs/tutorial/getting-started/part-2/component-without-props.png similarity index 100% rename from docs/docs/tutorial/part-2/component-without-props.png rename to docs/docs/tutorial/getting-started/part-2/component-without-props.png diff --git a/docs/docs/tutorial/part-2/index-page-container-styled.png b/docs/docs/tutorial/getting-started/part-2/index-page-container-styled.png similarity index 100% rename from docs/docs/tutorial/part-2/index-page-container-styled.png rename to docs/docs/tutorial/getting-started/part-2/index-page-container-styled.png diff --git a/docs/docs/tutorial/part-2/index-page-styled.png b/docs/docs/tutorial/getting-started/part-2/index-page-styled.png similarity index 100% rename from docs/docs/tutorial/part-2/index-page-styled.png rename to docs/docs/tutorial/getting-started/part-2/index-page-styled.png diff --git a/docs/docs/tutorial/part-2/index-page-with-layout.png b/docs/docs/tutorial/getting-started/part-2/index-page-with-layout.png similarity index 100% rename from docs/docs/tutorial/part-2/index-page-with-layout.png rename to docs/docs/tutorial/getting-started/part-2/index-page-with-layout.png diff --git a/docs/docs/tutorial/part-2/index-page-with-link.png b/docs/docs/tutorial/getting-started/part-2/index-page-with-link.png similarity index 100% rename from docs/docs/tutorial/part-2/index-page-with-link.png rename to docs/docs/tutorial/getting-started/part-2/index-page-with-link.png diff --git a/docs/docs/tutorial/part-2/index-page.png b/docs/docs/tutorial/getting-started/part-2/index-page.png similarity index 100% rename from docs/docs/tutorial/part-2/index-page.png rename to docs/docs/tutorial/getting-started/part-2/index-page.png diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/getting-started/part-2/index.mdx similarity index 99% rename from docs/docs/tutorial/part-2/index.mdx rename to docs/docs/tutorial/getting-started/part-2/index.mdx index 3edc677073945..66582a4b3918c 100644 --- a/docs/docs/tutorial/part-2/index.mdx +++ b/docs/docs/tutorial/getting-started/part-2/index.mdx @@ -875,7 +875,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us In Part 3 of the Tutorial, you'll learn about how to use Gatsby plugins to add more pre-built functionality to your site. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-2/ui-built-from-components.png b/docs/docs/tutorial/getting-started/part-2/ui-built-from-components.png similarity index 100% rename from docs/docs/tutorial/part-2/ui-built-from-components.png rename to docs/docs/tutorial/getting-started/part-2/ui-built-from-components.png diff --git a/docs/docs/tutorial/part-3/cooking-accessories.png b/docs/docs/tutorial/getting-started/part-3/cooking-accessories.png similarity index 100% rename from docs/docs/tutorial/part-3/cooking-accessories.png rename to docs/docs/tutorial/getting-started/part-3/cooking-accessories.png diff --git a/docs/docs/tutorial/part-3/index-page-with-static-image-from-filesystem.png b/docs/docs/tutorial/getting-started/part-3/index-page-with-static-image-from-filesystem.png similarity index 100% rename from docs/docs/tutorial/part-3/index-page-with-static-image-from-filesystem.png rename to docs/docs/tutorial/getting-started/part-3/index-page-with-static-image-from-filesystem.png diff --git a/docs/docs/tutorial/part-3/index-page-with-static-image-from-url.png b/docs/docs/tutorial/getting-started/part-3/index-page-with-static-image-from-url.png similarity index 100% rename from docs/docs/tutorial/part-3/index-page-with-static-image-from-url.png rename to docs/docs/tutorial/getting-started/part-3/index-page-with-static-image-from-url.png diff --git a/docs/docs/tutorial/part-3/index.mdx b/docs/docs/tutorial/getting-started/part-3/index.mdx similarity index 99% rename from docs/docs/tutorial/part-3/index.mdx rename to docs/docs/tutorial/getting-started/part-3/index.mdx index ca0bb978564ad..477bf9832188c 100644 --- a/docs/docs/tutorial/part-3/index.mdx +++ b/docs/docs/tutorial/getting-started/part-3/index.mdx @@ -315,7 +315,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us In Part 4, you'll learn about a specific category of plugins that let you pull data into your site: source plugins. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-3/plugin-process.png b/docs/docs/tutorial/getting-started/part-3/plugin-process.png similarity index 100% rename from docs/docs/tutorial/part-3/plugin-process.png rename to docs/docs/tutorial/getting-started/part-3/plugin-process.png diff --git a/docs/docs/tutorial/part-4/blog-page-skeleton.png b/docs/docs/tutorial/getting-started/part-4/blog-page-skeleton.png similarity index 100% rename from docs/docs/tutorial/part-4/blog-page-skeleton.png rename to docs/docs/tutorial/getting-started/part-4/blog-page-skeleton.png diff --git a/docs/docs/tutorial/part-4/blog-page-with-post-filenames.png b/docs/docs/tutorial/getting-started/part-4/blog-page-with-post-filenames.png similarity index 100% rename from docs/docs/tutorial/part-4/blog-page-with-post-filenames.png rename to docs/docs/tutorial/getting-started/part-4/blog-page-with-post-filenames.png diff --git a/docs/docs/tutorial/part-4/blog-posts-folder-structure.png b/docs/docs/tutorial/getting-started/part-4/blog-posts-folder-structure.png similarity index 100% rename from docs/docs/tutorial/part-4/blog-posts-folder-structure.png rename to docs/docs/tutorial/getting-started/part-4/blog-posts-folder-structure.png diff --git a/docs/docs/tutorial/part-4/data-layer.png b/docs/docs/tutorial/getting-started/part-4/data-layer.png similarity index 100% rename from docs/docs/tutorial/part-4/data-layer.png rename to docs/docs/tutorial/getting-started/part-4/data-layer.png diff --git a/docs/docs/tutorial/part-4/graphiql-explorer.png b/docs/docs/tutorial/getting-started/part-4/graphiql-explorer.png similarity index 100% rename from docs/docs/tutorial/part-4/graphiql-explorer.png rename to docs/docs/tutorial/getting-started/part-4/graphiql-explorer.png diff --git a/docs/docs/tutorial/part-4/graphiql.png b/docs/docs/tutorial/getting-started/part-4/graphiql.png similarity index 100% rename from docs/docs/tutorial/part-4/graphiql.png rename to docs/docs/tutorial/getting-started/part-4/graphiql.png diff --git a/docs/docs/tutorial/part-4/index-page-with-site-title-styled.png b/docs/docs/tutorial/getting-started/part-4/index-page-with-site-title-styled.png similarity index 100% rename from docs/docs/tutorial/part-4/index-page-with-site-title-styled.png rename to docs/docs/tutorial/getting-started/part-4/index-page-with-site-title-styled.png diff --git a/docs/docs/tutorial/part-4/index-page-with-site-title.png b/docs/docs/tutorial/getting-started/part-4/index-page-with-site-title.png similarity index 100% rename from docs/docs/tutorial/part-4/index-page-with-site-title.png rename to docs/docs/tutorial/getting-started/part-4/index-page-with-site-title.png diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/getting-started/part-4/index.mdx similarity index 98% rename from docs/docs/tutorial/part-4/index.mdx rename to docs/docs/tutorial/getting-started/part-4/index.mdx index 6c7031b78ce14..b0683220f2562 100644 --- a/docs/docs/tutorial/part-4/index.mdx +++ b/docs/docs/tutorial/getting-started/part-4/index.mdx @@ -146,7 +146,7 @@ module.exports = { }; ``` -This data was added to your `gatsby-config.js` file automatically when you used the `gatsby new` command in [Part 1](/docs/tutorial/part-1). It also gets pulled into the GraphQL data layer automatically, so you don't need a source plugin for this first section. +This data was added to your `gatsby-config.js` file automatically when you used the `gatsby new` command in [Part 1](/docs/tutorial/getting-started/part-1). It also gets pulled into the GraphQL data layer automatically, so you don't need a source plugin for this first section. Since you don't need to set up a source plugin, you can jump straight into GraphiQL to build your GraphQL query: @@ -719,7 +719,7 @@ Now that you have some posts saved to your local filesystem, it's time to pull t -**Note:** Remember the process for adding a plugin to your site from [Part 3](/docs/tutorial/part-3)? The first step was to **install** the plugin. +**Note:** Remember the process for adding a plugin to your site from [Part 3](/docs/tutorial/getting-started/part-3)? The first step was to **install** the plugin. If you've been following along from the beginning, you should already have installed `gatsby-source-filesystem` in Part 3 (because you needed it for adding static images with `gatsby-plugin-image`). @@ -999,7 +999,7 @@ As an example, let's say you queried the `title` from `siteMetadata` in your pag export const Head = ({ data }) => {data.site.siteMetadata.title} ``` -In [Part 6](/docs/tutorial/part-6/#render-post-contents-in-the-blog-post-page-template) you'll learn how to use this pattern, for now keep using the `` component. +In [Part 6](/docs/tutorial/getting-started/part-6/#render-post-contents-in-the-blog-post-page-template) you'll learn how to use this pattern, for now keep using the `` component. @@ -1081,7 +1081,7 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us In Part 5, you'll add some content to your blog posts using a special format called MDX. You'll also learn about transformer plugins, which you can use to convert data in your data layer from one type to another. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-5/blog-page-with-excerpt-posts.png b/docs/docs/tutorial/getting-started/part-5/blog-page-with-excerpt-posts.png similarity index 100% rename from docs/docs/tutorial/part-5/blog-page-with-excerpt-posts.png rename to docs/docs/tutorial/getting-started/part-5/blog-page-with-excerpt-posts.png diff --git a/docs/docs/tutorial/part-5/blog-page-with-frontmatter.png b/docs/docs/tutorial/getting-started/part-5/blog-page-with-frontmatter.png similarity index 100% rename from docs/docs/tutorial/part-5/blog-page-with-frontmatter.png rename to docs/docs/tutorial/getting-started/part-5/blog-page-with-frontmatter.png diff --git a/docs/docs/tutorial/part-5/data-layer-with-nodes.png b/docs/docs/tutorial/getting-started/part-5/data-layer-with-nodes.png similarity index 100% rename from docs/docs/tutorial/part-5/data-layer-with-nodes.png rename to docs/docs/tutorial/getting-started/part-5/data-layer-with-nodes.png diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/getting-started/part-5/index.mdx similarity index 95% rename from docs/docs/tutorial/part-5/index.mdx rename to docs/docs/tutorial/getting-started/part-5/index.mdx index e15e0ab63416c..902d581421c6e 100644 --- a/docs/docs/tutorial/part-5/index.mdx +++ b/docs/docs/tutorial/getting-started/part-5/index.mdx @@ -8,7 +8,7 @@ import { MdArrowForward } from "react-icons/md" ## Introduction -In [Part 4](/docs/tutorial/part-4/), you used the `gatsby-source-filesystem` source plugin to build a Blog page that lists the names of your blog post files. But you weren't able to actually render the contents of your post files, because `gatsby-source-filesystem` doesn't provide a field for it. To do that, you'll need another type of plugin called a **transformer plugin**. +In [Part 4](/docs/tutorial/getting-started/part-4/), you used the `gatsby-source-filesystem` source plugin to build a Blog page that lists the names of your blog post files. But you weren't able to actually render the contents of your post files, because `gatsby-source-filesystem` doesn't provide a field for it. To do that, you'll need another type of plugin called a **transformer plugin**. Sometimes, the format of the data you get from source plugins isn't exactly what you want to use to build your website. For example, the filesystem source plugin lets you query data _about_ files, but it doesn't let you use the data _inside_ the files themselves. To make this possible, Gatsby supports transformer plugins, which take the raw content from source plugins and transform it into something more usable. @@ -154,7 +154,7 @@ Now that you have some MDX content inside your blog posts, it's time set up the -**Quick Refresher:** Remember the process for adding a plugin to your site (from [Part 3](/docs/tutorial/part-3/))? See if you can remember the three steps from memory before checking your answer. (Science has shown that the act of trying to [actively recall information](https://www.cultofpedagogy.com/retrieval-practice/) helps you retain it better!) +**Quick Refresher:** Remember the process for adding a plugin to your site (from [Part 3](/docs/tutorial/getting-started/part-3/))? See if you can remember the three steps from memory before checking your answer. (Science has shown that the act of trying to [actively recall information](https://www.cultofpedagogy.com/retrieval-practice/) helps you retain it better!) @@ -220,7 +220,7 @@ You can use the `allMdx` field to request data for multiple MDX nodes at once (s -**Quick Refresher:** Remember how to access GraphiQL? See if you can remember the steps before checking for the answer in Part 4. (Check the section called ["Use GraphiQL to explore the data layer and write GraphQL queries"](/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries)). +**Quick Refresher:** Remember how to access GraphiQL? See if you can remember the steps before checking for the answer in Part 4. (Check the section called ["Use GraphiQL to explore the data layer and write GraphQL queries"](/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries)). @@ -427,7 +427,7 @@ query MyQuery { Now that your GraphQL query is all set up, it's time to replace the page query in your Blog page component. -1. Start by swapping out the `allFile` page query in your Blog page for the one you just created using `allMdx`. (Don't forget to delete the query name!) And if you haven't already from completing the [task in Part 4](/docs/tutorial/part-4/#task-use-a-page-query-to-pull-the-list-of-post-filenames-into-your-blog-page), you'll need to import the `graphql` tag from the `gatsby` package. +1. Start by swapping out the `allFile` page query in your Blog page for the one you just created using `allMdx`. (Don't forget to delete the query name!) And if you haven't already from completing the [task in Part 4](/docs/tutorial/getting-started/part-4/#task-use-a-page-query-to-pull-the-list-of-post-filenames-into-your-blog-page), you'll need to import the `graphql` tag from the `gatsby` package. ```js:title=src/pages/blog.js import * as React from 'react' @@ -624,7 +624,7 @@ Right now, all your blog posts and their excerpts are being rendered in one long In Part 6, you'll learn how to use Gatsby's filesystem route API to dynamically create new pages for each of your blog posts. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-6/404-page-with-routes.png b/docs/docs/tutorial/getting-started/part-6/404-page-with-routes.png similarity index 100% rename from docs/docs/tutorial/part-6/404-page-with-routes.png rename to docs/docs/tutorial/getting-started/part-6/404-page-with-routes.png diff --git a/docs/docs/tutorial/part-6/blog-page-with-links.png b/docs/docs/tutorial/getting-started/part-6/blog-page-with-links.png similarity index 100% rename from docs/docs/tutorial/part-6/blog-page-with-links.png rename to docs/docs/tutorial/getting-started/part-6/blog-page-with-links.png diff --git a/docs/docs/tutorial/part-6/file-system-routes-with-blog-subdirectory.png b/docs/docs/tutorial/getting-started/part-6/file-system-routes-with-blog-subdirectory.png similarity index 100% rename from docs/docs/tutorial/part-6/file-system-routes-with-blog-subdirectory.png rename to docs/docs/tutorial/getting-started/part-6/file-system-routes-with-blog-subdirectory.png diff --git a/docs/docs/tutorial/part-6/file-system-routes.png b/docs/docs/tutorial/getting-started/part-6/file-system-routes.png similarity index 100% rename from docs/docs/tutorial/part-6/file-system-routes.png rename to docs/docs/tutorial/getting-started/part-6/file-system-routes.png diff --git a/docs/docs/tutorial/part-6/graphiql-with-query-variables.png b/docs/docs/tutorial/getting-started/part-6/graphiql-with-query-variables.png similarity index 100% rename from docs/docs/tutorial/part-6/graphiql-with-query-variables.png rename to docs/docs/tutorial/getting-started/part-6/graphiql-with-query-variables.png diff --git a/docs/docs/tutorial/part-6/index.mdx b/docs/docs/tutorial/getting-started/part-6/index.mdx similarity index 94% rename from docs/docs/tutorial/part-6/index.mdx rename to docs/docs/tutorial/getting-started/part-6/index.mdx index ca7322a64cf97..de50e6aa9119d 100644 --- a/docs/docs/tutorial/part-6/index.mdx +++ b/docs/docs/tutorial/getting-started/part-6/index.mdx @@ -8,7 +8,7 @@ import { MdArrowForward } from "react-icons/md" ## Introduction -In [Part 5](/docs/tutorial/part-5/), you added all of your blog posts to your Blog page. But that means that your Blog page will get longer and longer as you add more posts to your site. It would be better if each post lived on its own page, and then your Blog page could link out to all the different posts. +In [Part 5](/docs/tutorial/getting-started/part-5/), you added all of your blog posts to your Blog page. But that means that your Blog page will get longer and longer as you add more posts to your site. It would be better if each post lived on its own page, and then your Blog page could link out to all the different posts. So far, the way you've created new pages for your Gatsby site is by creating a new file in the `src/pages` directory and hard-coding the page's contents in JSX. But manually creating a new page for each post would be quite repetitive, especially since each page has the same structure: render the frontmatter and contents of an MDX file. @@ -242,7 +242,7 @@ Nice work! You've now used Gatsby's File System Route API to create pages from n ## Render post contents in the blog post page template -Now that you've got all the pages for your posts set up, it's time to pull in the actual post contents. You learned in [Part 4](/docs/tutorial/part-4/) that you can pull data into your components using GraphQL queries. But how can you tell Gatsby which MDX node from the data layer to pull into each page? To do that, you'll need to learn about another key GraphQL concept: **query variables**. +Now that you've got all the pages for your posts set up, it's time to pull in the actual post contents. You learned in [Part 4](/docs/tutorial/getting-started/part-4/) that you can pull data into your components using GraphQL queries. But how can you tell Gatsby which MDX node from the data layer to pull into each page? To do that, you'll need to learn about another key GraphQL concept: **query variables**. Key GraphQL Concept: Query Variables

} @@ -250,7 +250,7 @@ Now that you've got all the pages for your posts set up, it's time to pull in th In GraphQL, query variables are a way to send extra data along with your request. With query variables, you can write dynamic queries that return different data based on the values you pass in. -Let's take a look at an example in GraphiQL. In [Part 5](/docs/tutorial/part-5/), you learned about passing arguments to fields to change the data you get back in the response. For example, you could use the query below to request data for the MDX node that has a `slug` field equal to `"another-post"`: +Let's take a look at an example in GraphiQL. In [Part 5](/docs/tutorial/getting-started/part-5/), you learned about passing arguments to fields to change the data you get back in the response. For example, you could use the query below to request data for the MDX node that has a `slug` field equal to `"another-post"`: ```graphql query MyQuery { @@ -411,7 +411,7 @@ The JSON object in the Query Variables section should look something like the on export default BlogPost ``` -3. In [Part 4](/docs/tutorial/part-4/), you learned that Gatsby passes in the results from your page query into your page component as a `data` prop. It also passes `data` to the Gatsby Head API. You can update your `BlogPost` component to use the `data` prop and render the contents of your blog post. The actual MDX content, ready to render, will be passed as a `children` prop to the page component. +3. In [Part 4](/docs/tutorial/getting-started/part-4/), you learned that Gatsby passes in the results from your page query into your page component as a `data` prop. It also passes `data` to the Gatsby Head API. You can update your `BlogPost` component to use the `data` prop and render the contents of your blog post. The actual MDX content, ready to render, will be passed as a `children` prop to the page component. ```js:title=src/pages/blog/{mdx.frontmatter__slug}.js import * as React from 'react' @@ -568,10 +568,10 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us ### What's coming next? -In Part 7, you'll revisit `gatsby-plugin-image` (from way back in [Part 3](/docs/tutorial/part-3/)). This time, you'll learn how to create dynamic images using the `GatsbyImage` component. You'll put the finishing touches on your blog site by adding hero images to your blog posts. +In Part 7, you'll revisit `gatsby-plugin-image` (from way back in [Part 3](/docs/tutorial/getting-started/part-3/)). This time, you'll learn how to create dynamic images using the `GatsbyImage` component. You'll put the finishing touches on your blog site by adding hero images to your blog posts. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-6/my-first-post.png b/docs/docs/tutorial/getting-started/part-6/my-first-post.png similarity index 100% rename from docs/docs/tutorial/part-6/my-first-post.png rename to docs/docs/tutorial/getting-started/part-6/my-first-post.png diff --git a/docs/docs/tutorial/part-6/post-page-template-hardcoded.png b/docs/docs/tutorial/getting-started/part-6/post-page-template-hardcoded.png similarity index 100% rename from docs/docs/tutorial/part-6/post-page-template-hardcoded.png rename to docs/docs/tutorial/getting-started/part-6/post-page-template-hardcoded.png diff --git a/docs/docs/tutorial/part-7/another-post.png b/docs/docs/tutorial/getting-started/part-7/another-post.png similarity index 100% rename from docs/docs/tutorial/part-7/another-post.png rename to docs/docs/tutorial/getting-started/part-7/another-post.png diff --git a/docs/docs/tutorial/part-7/blog-post-with-hero-image-credit.png b/docs/docs/tutorial/getting-started/part-7/blog-post-with-hero-image-credit.png similarity index 100% rename from docs/docs/tutorial/part-7/blog-post-with-hero-image-credit.png rename to docs/docs/tutorial/getting-started/part-7/blog-post-with-hero-image-credit.png diff --git a/docs/docs/tutorial/part-7/blog-post-with-hero-image.png b/docs/docs/tutorial/getting-started/part-7/blog-post-with-hero-image.png similarity index 100% rename from docs/docs/tutorial/part-7/blog-post-with-hero-image.png rename to docs/docs/tutorial/getting-started/part-7/blog-post-with-hero-image.png diff --git a/docs/docs/tutorial/part-7/data-layer-with-imagesharp-nodes.png b/docs/docs/tutorial/getting-started/part-7/data-layer-with-imagesharp-nodes.png similarity index 100% rename from docs/docs/tutorial/part-7/data-layer-with-imagesharp-nodes.png rename to docs/docs/tutorial/getting-started/part-7/data-layer-with-imagesharp-nodes.png diff --git a/docs/docs/tutorial/part-7/folder-structure-with-images.png b/docs/docs/tutorial/getting-started/part-7/folder-structure-with-images.png similarity index 100% rename from docs/docs/tutorial/part-7/folder-structure-with-images.png rename to docs/docs/tutorial/getting-started/part-7/folder-structure-with-images.png diff --git a/docs/docs/tutorial/part-7/index.mdx b/docs/docs/tutorial/getting-started/part-7/index.mdx similarity index 97% rename from docs/docs/tutorial/part-7/index.mdx rename to docs/docs/tutorial/getting-started/part-7/index.mdx index 1cf01796ddd8b..3efb97f8480c1 100644 --- a/docs/docs/tutorial/part-7/index.mdx +++ b/docs/docs/tutorial/getting-started/part-7/index.mdx @@ -8,7 +8,7 @@ import { MdArrowForward } from "react-icons/md" ## Introduction -In [Part 3](/docs/tutorial/part-3/), you used `gatsby-plugin-image` to add static images to your home page. Now that you've worked a bit more with Gatsby's data layer, it's time to revisit `gatsby-plugin-image`. This time, you'll learn how to add dynamic images to your site. +In [Part 3](/docs/tutorial/getting-started/part-3/), you used `gatsby-plugin-image` to add static images to your home page. Now that you've worked a bit more with Gatsby's data layer, it's time to revisit `gatsby-plugin-image`. This time, you'll learn how to add dynamic images to your site. In this part of the Tutorial, you'll use the dynamic `GatsbyImage` component to add hero images to each of your blog posts. @@ -40,7 +40,7 @@ Don't want to miss any future livestreams? Follow our [Gatsby Twitch channel](ht ## What's the difference between `GatsbyImage` and `StaticImage`? -Back in [Part 3](/docs/tutorial/part-3/) of the Tutorial, you learned about how to use the `StaticImage` component from `gatsby-plugin-image`. +Back in [Part 3](/docs/tutorial/getting-started/part-3/) of the Tutorial, you learned about how to use the `StaticImage` component from `gatsby-plugin-image`. How do you know whether to use the `StaticImage` component or the `GatsbyImage` component? The decision ultimately comes down to whether or not your image source is going to be the same every time the component renders. @@ -186,7 +186,7 @@ First, you'll use GraphiQL to add the hero image frontmatter fields to the Graph -**Note:** You'll need to set up an object in the Query Variables pane with an `id` that matches one of your posts. Refer to [Part 6 section on query variables](/docs/tutorial/part-6/#render-post-contents-in-the-blog-post-page-template) if you need a refresher on how to set that up. +**Note:** You'll need to set up an object in the Query Variables pane with an `id` that matches one of your posts. Refer to [Part 6 section on query variables](/docs/tutorial/getting-started/part-6/#render-post-contents-in-the-blog-post-page-template) if you need a refresher on how to set that up. @@ -557,7 +557,7 @@ Congratulations, you've reached the end of the official Gatsby Tutorial! 🥳 Want to know more? The next page includes some additional resources that you can use to continue learning about Gatsby. } variant="SECONDARY" > diff --git a/docs/docs/tutorial/part-7/reorganize-blog-directory.png b/docs/docs/tutorial/getting-started/part-7/reorganize-blog-directory.png similarity index 100% rename from docs/docs/tutorial/part-7/reorganize-blog-directory.png rename to docs/docs/tutorial/getting-started/part-7/reorganize-blog-directory.png diff --git a/docs/docs/tutorial/part-7/staticimage-vs-gatsbyimage-towns.png b/docs/docs/tutorial/getting-started/part-7/staticimage-vs-gatsbyimage-towns.png similarity index 100% rename from docs/docs/tutorial/part-7/staticimage-vs-gatsbyimage-towns.png rename to docs/docs/tutorial/getting-started/part-7/staticimage-vs-gatsbyimage-towns.png diff --git a/docs/docs/tutorial/part-7/unsplash.png b/docs/docs/tutorial/getting-started/part-7/unsplash.png similarity index 100% rename from docs/docs/tutorial/part-7/unsplash.png rename to docs/docs/tutorial/getting-started/part-7/unsplash.png diff --git a/docs/docs/tutorial/part-7/yet-another-post.png b/docs/docs/tutorial/getting-started/part-7/yet-another-post.png similarity index 100% rename from docs/docs/tutorial/part-7/yet-another-post.png rename to docs/docs/tutorial/getting-started/part-7/yet-another-post.png diff --git a/docs/docs/tutorial/whats-next/index.mdx b/docs/docs/tutorial/getting-started/whats-next/index.mdx similarity index 100% rename from docs/docs/tutorial/whats-next/index.mdx rename to docs/docs/tutorial/getting-started/whats-next/index.mdx diff --git a/docs/docs/upgrading-node-js.md b/docs/docs/upgrading-node-js.md index 748166289d870..113de76992e39 100644 --- a/docs/docs/upgrading-node-js.md +++ b/docs/docs/upgrading-node-js.md @@ -31,7 +31,7 @@ There are multiple ways to update your version of Node.js depending on how you o ### Using Homebrew -You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system). Homebrew is a program that allows you to install specific versions of Node.js (and other software). +You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/docs/tutorial/getting-started/part-0/#install-nodejs-for-your-appropriate-operating-system). Homebrew is a program that allows you to install specific versions of Node.js (and other software). To update from Node.js 16 to Node.js 18 using Homebrew, open a terminal and run the following commands: diff --git a/docs/tutorial/e-commerce-with-datocms-and-snipcart/index.md b/docs/tutorial/e-commerce-with-datocms-and-snipcart/index.md index 57eea03b7f1bb..8fc990bba97c7 100644 --- a/docs/tutorial/e-commerce-with-datocms-and-snipcart/index.md +++ b/docs/tutorial/e-commerce-with-datocms-and-snipcart/index.md @@ -25,11 +25,11 @@ You can sign up for the following accounts now or as you need to use each of the - [Snipcart](https://snipcart.com/): add a shopping cart to your site - [Netlify](https://www.netlify.com/): host your site and register a domain -To edit code locally (affecting files stored on your computer), you'll need the following software. If you don't already know what these are or want additional background information, check out [Step 0 of the Gatsby tutorial](/docs/tutorial/part-0/). It includes detailed instructions on how to set up a local development environment. +To edit code locally (affecting files stored on your computer), you'll need the following software. If you don't already know what these are or want additional background information, check out [Step 0 of the Gatsby tutorial](/docs/tutorial/getting-started/part-0/). It includes detailed instructions on how to set up a local development environment. - [Node.js](https://nodejs.org): run JavaScript on your computer - [Git](https://git-scm.com/downloads): track changes to your code -- [Gatsby command line interface (CLI)](/docs/tutorial/part-0/#using-the-gatsby-cli): run Gatsby commands on your computer +- [Gatsby command line interface (CLI)](/docs/tutorial/getting-started/part-0/#using-the-gatsby-cli): run Gatsby commands on your computer ## Provisioning Your Site on Gatsby Cloud diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 3849444ffeec1..030a74ba397ca 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -18,7 +18,7 @@ Benefits of using Gatsby for e-commerce sites include the following: ## Prerequisites -- Since this is a more advanced tutorial, building a site with Gatsby before will likely make this tutorial less time-consuming ([see the main tutorial here](/docs/tutorial/)) +- Since this is a more advanced tutorial, building a site with Gatsby before will likely make this tutorial less time-consuming ([see the main tutorial here](/docs/tutorial/getting-started/)) - Stripe account: [register for an account here](https://dashboard.stripe.com/register) ### How does Gatsby work with Stripe? diff --git a/docs/tutorial/remark-plugin-tutorial.md b/docs/tutorial/remark-plugin-tutorial.md index e470136ca0418..e78e3a085e043 100644 --- a/docs/tutorial/remark-plugin-tutorial.md +++ b/docs/tutorial/remark-plugin-tutorial.md @@ -16,7 +16,7 @@ In certain instances, a developer may want to customize the content of the Markd There a few things that you should have some understanding with: -- How to work with Remark in Gatsby as described in [Part Six](/docs/tutorial/part-6/) and [Part Seven](/docs/tutorial/part-7/) of the Gatsby Tutorial. +- How to work with Remark in Gatsby as described in [Part Six](/docs/tutorial/getting-started/part-6/) and [Part Seven](/docs/tutorial/getting-started/part-7/) of the Gatsby Tutorial. - Understanding of the Markdown Syntax. ## Understanding the Abstract Syntax Tree @@ -331,7 +331,7 @@ A real-world example of this would be [`gatsby-remark-responsive-iframe`](https: ## Loading in changes and seeing effect -At this point, our plugin is now ready to be used. To see the resulting functionality, it is helpful to re-visit [Part 6 of the Gatsby Tutorial](/docs/tutorial/part-6/) to programmatically create pages from Markdown data. Once this is set up, you can examine that your plugin works as seen below based on the markdown you wrote earlier. +At this point, our plugin is now ready to be used. To see the resulting functionality, it is helpful to re-visit [Part 6 of the Gatsby Tutorial](/docs/tutorial/getting-started/part-6/) to programmatically create pages from Markdown data. Once this is set up, you can examine that your plugin works as seen below based on the markdown you wrote earlier. ![Output](../docs/images/remark-ast-output.png) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index c7421dcd700d3..b145c5e7ddcc5 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -215,7 +215,7 @@ To do this, you need to: 1. Create pages for each blog post 2. Link up the title on the index page with the post page. -If you haven't already, please read through [Part 7](/docs/tutorial/part-7/) of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. +If you haven't already, please read through [Part 7](/docs/tutorial/getting-started/part-7/) of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. ### Creating pages for each blog post @@ -247,7 +247,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -Next, [stop and restart](/docs/tutorial/part-0/#view-your-site-locally) the `gatsby develop` environment. As you watch the terminal you should see two Post objects log to the terminal: +Next, [stop and restart](/docs/tutorial/getting-started/part-0/#view-your-site-locally) the `gatsby develop` environment. As you watch the terminal you should see two Post objects log to the terminal: ![Two posts logged to the terminal](./images/wordpress-source-plugin-log.jpg) diff --git a/e2e-tests/development-runtime/README.md b/e2e-tests/development-runtime/README.md index d47b2c94577d3..40b967cb4589c 100644 --- a/e2e-tests/development-runtime/README.md +++ b/e2e-tests/development-runtime/README.md @@ -88,6 +88,6 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/examples/using-mdx/README.md b/examples/using-mdx/README.md index e5e88a78b137e..3a8b87ab22870 100644 --- a/examples/using-mdx/README.md +++ b/examples/using-mdx/README.md @@ -44,6 +44,6 @@ The site is now running at `http://localhost:8000`, you can see the MDX example Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **For most developers, it's recommended to start with the [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, it's recommended to start with the [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 the official Gatsby documentation](https://www.gatsbyjs.com/docs/).** In particular, check out [Adding MDX Pages](https://www.gatsbyjs.com/docs/how-to/routing/mdx/). diff --git a/examples/using-shopify/README.md b/examples/using-shopify/README.md index 9cb236406a443..6009d74d34cea 100644 --- a/examples/using-shopify/README.md +++ b/examples/using-shopify/README.md @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-5/#introducing-graphiql)._ + _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-5/#introducing-graphiql)._ Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -85,7 +85,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/examples/using-type-definitions/README.md b/examples/using-type-definitions/README.md index 407d7c8a10b3e..f5d6db26f30f6 100644 --- a/examples/using-type-definitions/README.md +++ b/examples/using-type-definitions/README.md @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-5/#introducing-graphiql)._ + _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-5/#introducing-graphiql)._ Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -86,7 +86,7 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/integration-tests/functions/README.md b/integration-tests/functions/README.md index 7d3d36694899b..98a334925c6de 100644 --- a/integration-tests/functions/README.md +++ b/integration-tests/functions/README.md @@ -37,9 +37,9 @@ - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) + - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) + - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) diff --git a/integration-tests/functions/src/pages/index.js b/integration-tests/functions/src/pages/index.js index dbc0fb962fdba..f410894b64b81 100644 --- a/integration-tests/functions/src/pages/index.js +++ b/integration-tests/functions/src/pages/index.js @@ -82,7 +82,7 @@ const badgeStyle = { const links = [ { text: "Tutorial", - url: "https://www.gatsbyjs.com/docs/tutorial/", + url: "https://www.gatsbyjs.com/docs/tutorial/getting-started/", description: "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.", color: "#E95800", diff --git a/packages/gatsby-source-wordpress/docs/tutorials/building-a-new-site-wordpress-and-gatsby.md b/packages/gatsby-source-wordpress/docs/tutorials/building-a-new-site-wordpress-and-gatsby.md index cdd61eed9f606..38f7d82b1a421 100644 --- a/packages/gatsby-source-wordpress/docs/tutorials/building-a-new-site-wordpress-and-gatsby.md +++ b/packages/gatsby-source-wordpress/docs/tutorials/building-a-new-site-wordpress-and-gatsby.md @@ -176,7 +176,7 @@ To do this, you need to: 1. Create pages for each blog post 2. Link up the title on the index page with the post page. -If you haven't already, please read through [Part 7](https://www.gatsbyjs.com/docs/tutorial/part-7/) of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. +If you haven't already, please read through [Part 7](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-7/) of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. ### Creating pages for each blog post @@ -207,7 +207,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -Next, [stop and restart](https://www.gatsbyjs.com/docs/tutorial/part-0/#view-your-site-locally) the `gatsby develop` environment. As you watch the terminal you should see two Post objects log to the terminal. +Next, [stop and restart](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#view-your-site-locally) the `gatsby develop` environment. As you watch the terminal you should see two Post objects log to the terminal. Excellent! As explained in Part 7 of the tutorial, this `createPages` export is one of the Gatsby "workhorses" and allows us to create your blog posts (or pages, or custom post types, etc.) from your WordPress install. diff --git a/packages/gatsby-source-wordpress/docs/tutorials/creating-a-new-site-from-a-starter.md b/packages/gatsby-source-wordpress/docs/tutorials/creating-a-new-site-from-a-starter.md index 584231e33528b..4f3c3fe690eed 100644 --- a/packages/gatsby-source-wordpress/docs/tutorials/creating-a-new-site-from-a-starter.md +++ b/packages/gatsby-source-wordpress/docs/tutorials/creating-a-new-site-from-a-starter.md @@ -16,7 +16,7 @@ WPGatsby is also required as it sets up a WP admin event log that Gatsby will us ## Setting up Gatsby -First you'll need to ensure you have npm, Gatsby, and Nodejs installed on your computer. Follow the [GatsbyJS guide on setting up your development environment](https://www.gatsbyjs.com/docs/tutorial/part-0/). +First you'll need to ensure you have npm, Gatsby, and Nodejs installed on your computer. Follow the [GatsbyJS guide on setting up your development environment](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/). ## Setting up `gatsby-source-wordpress` diff --git a/packages/gatsby/README.md b/packages/gatsby/README.md index 64aef5bf7f83e..d4024c0429231 100644 --- a/packages/gatsby/README.md +++ b/packages/gatsby/README.md @@ -40,9 +40,9 @@

- Quickstart + Quickstart · - Tutorial + Tutorial · Plugins · @@ -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 “How-to Guides”, “Reference”, and “Conceptual Guides” 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 diff --git a/starters/README-template.md b/starters/README-template.md index e994edfbbf024..c1af089bd8d2d 100644 --- a/starters/README-template.md +++ b/starters/README-template.md @@ -15,7 +15,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti 1. **Create a Gatsby site.** - Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the <%= name %> starter. + Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#gatsby-cli)) to create a new site, specifying the <%= name %> starter. ```shell # create a new Gatsby site using the <%= name %> starter @@ -35,7 +35,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). + Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). Open the `my-<%= name %>-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -85,7 +85,7 @@ A quick look at the top-level files and directories you'll see in a typical Gats Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/starters/README.md b/starters/README.md index e1e8d983b232d..34b05c5624d8a 100644 --- a/starters/README.md +++ b/starters/README.md @@ -33,17 +33,17 @@

- Quickstart + Quickstart · - Tutorial + Tutorial · - Plugins + Plugins · - Starters + Starters · - Showcase + Showcase · - Contribute + Contribute · Support: Twitter & diff --git a/starters/blog/README.md b/starters/blog/README.md index 80e0125506cfd..f272fcd68c490 100644 --- a/starters/blog/README.md +++ b/starters/blog/README.md @@ -16,7 +16,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti 1. **Create a Gatsby site.** - Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the blog starter. + Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#gatsby-cli)) to create a new site, specifying the blog starter. ```shell # create a new Gatsby site using the blog starter @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). + Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). Open the `my-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -86,7 +86,7 @@ A quick look at the top-level files and directories you'll see in a typical Gats Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/starters/default/README.md b/starters/default/README.md index c80a7c6875918..ac31a37c1bee3 100644 --- a/starters/default/README.md +++ b/starters/default/README.md @@ -16,7 +16,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti 1. **Create a Gatsby site.** - Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the default starter. + Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#gatsby-cli)) to create a new site, specifying the default starter. ```shell # create a new Gatsby site using the default starter @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). + Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -86,7 +86,7 @@ A quick look at the top-level files and directories you'll see in a typical Gats Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/starters/gatsby-starter-minimal-ts/README.md b/starters/gatsby-starter-minimal-ts/README.md index f6c53159de600..52a93fe76d517 100644 --- a/starters/gatsby-starter-minimal-ts/README.md +++ b/starters/gatsby-starter-minimal-ts/README.md @@ -36,8 +36,8 @@ 4. **Learn more** - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) + - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) + - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) diff --git a/starters/gatsby-starter-minimal-ts/src/pages/index.tsx b/starters/gatsby-starter-minimal-ts/src/pages/index.tsx index 7cce9533b0c54..2da81b8906591 100644 --- a/starters/gatsby-starter-minimal-ts/src/pages/index.tsx +++ b/starters/gatsby-starter-minimal-ts/src/pages/index.tsx @@ -93,7 +93,7 @@ const badgeStyle = { const links = [ { text: "Tutorial", - url: "https://www.gatsbyjs.com/docs/tutorial/", + url: "https://www.gatsbyjs.com/docs/tutorial/getting-started/", description: "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.", color: "#E95800", diff --git a/starters/gatsby-starter-minimal/README.md b/starters/gatsby-starter-minimal/README.md index 3d7ba617eb5f2..278800570d432 100644 --- a/starters/gatsby-starter-minimal/README.md +++ b/starters/gatsby-starter-minimal/README.md @@ -36,8 +36,8 @@ 4. **Learn more** - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) + - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) + - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) diff --git a/starters/gatsby-starter-minimal/src/pages/index.js b/starters/gatsby-starter-minimal/src/pages/index.js index fbf96d0f4a7a6..79970f9996633 100644 --- a/starters/gatsby-starter-minimal/src/pages/index.js +++ b/starters/gatsby-starter-minimal/src/pages/index.js @@ -80,7 +80,7 @@ const badgeStyle = { const links = [ { text: "Tutorial", - url: "https://www.gatsbyjs.com/docs/tutorial/", + url: "https://www.gatsbyjs.com/docs/tutorial/getting-started/", description: "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.", color: "#E95800", diff --git a/starters/gatsby-starter-plugin/README.md b/starters/gatsby-starter-plugin/README.md index 4721395991f89..8db2e2ca7b0d1 100644 --- a/starters/gatsby-starter-plugin/README.md +++ b/starters/gatsby-starter-plugin/README.md @@ -19,7 +19,7 @@ To get started creating a new plugin, you can follow these steps: gatsby new my-plugin https://github.com/gatsbyjs/gatsby-starter-plugin ``` -If you already have a Gatsby site, you can use it. Otherwise, you can [create a new Gatsby site](https://www.gatsbyjs.com/tutorial/part-0/#create-a-gatsby-site) to test your plugin. +If you already have a Gatsby site, you can use it. Otherwise, you can [create a new Gatsby site](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#create-a-gatsby-site) to test your plugin. Your directory structure will look similar to this: diff --git a/starters/gatsby-starter-wordpress-blog/README.md b/starters/gatsby-starter-wordpress-blog/README.md index b595b33a1abdc..54ce3ef8924bd 100644 --- a/starters/gatsby-starter-wordpress-blog/README.md +++ b/starters/gatsby-starter-wordpress-blog/README.md @@ -16,7 +16,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti 1. **Create a Gatsby site.** - Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the gatsby-starter-wordpress-blog starter. + Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#gatsby-cli)) to create a new site, specifying the gatsby-starter-wordpress-blog starter. ```shell # create a new Gatsby site using the gatsby-starter-wordpress-blog starter @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). + Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). Open the `my-gatsby-starter-wordpress-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -86,7 +86,7 @@ A quick look at the top-level files and directories you'll see in a typical Gats Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. diff --git a/starters/hello-world/README.md b/starters/hello-world/README.md index b1fc2c224a58c..74f5556fb7042 100644 --- a/starters/hello-world/README.md +++ b/starters/hello-world/README.md @@ -16,7 +16,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti 1. **Create a Gatsby site.** - Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the hello-world starter. + Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/#gatsby-cli)) to create a new site, specifying the hello-world starter. ```shell # create a new Gatsby site using the hello-world starter @@ -36,7 +36,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti Your site is now running at `http://localhost:8000`! - Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). + Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries). Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! @@ -86,7 +86,7 @@ A quick look at the top-level files and directories you'll see in a typical Gats Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: -- **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 _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.