Skip to content

Commit 2dbd95d

Browse files
authored
chore(docs): Move existing main tutorial to "getting-started" name (#37539)
1 parent 4c4a4f1 commit 2dbd95d

File tree

120 files changed

+112
-112
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+112
-112
lines changed

Diff for: README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@
4040
</p>
4141

4242
<h2 align="center">
43-
<a href="https://www.gatsbyjs.com/docs/">Quickstart</a>
43+
<a href="https://www.gatsbyjs.com/docs/quick-start/">Quickstart</a>
4444
<span> · </span>
45-
<a href="https://www.gatsbyjs.com/tutorial/">Tutorial</a>
45+
<a href="https://www.gatsbyjs.com/docs/tutorial/getting-started/">Tutorial</a>
4646
<span> · </span>
4747
<a href="https://www.gatsbyjs.com/plugins/">Plugins</a>
4848
<span> · </span>
@@ -112,19 +112,19 @@ You can get a new Gatsby site up and running on your local dev environment in 5
112112

113113
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!
114114

115-
At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our [plugins](https://gatsbyjs.com/plugins/) and [the official tutorial](https://www.gatsbyjs.com/tutorial/).
115+
At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our [plugins](https://gatsbyjs.com/plugins/) and [the official tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/).
116116

117117
## 🎓 Learning Gatsby
118118

119119
Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/).
120120

121-
- **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.
121+
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/docs/tutorial/getting-started/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
122122

123123
- **To dive straight into code samples head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the “<i>How-to Guides</i>”, “<i>Reference</i>”, and “<i>Conceptual Guides</i>” sections in the sidebar.
124124

125125
We welcome suggestions for improving our docs. See the [“how to contribute”](https://www.gatsbyjs.com/contributing/how-to-contribute/) documentation for more details.
126126

127-
**Start Learning Gatsby: [Follow the Tutorial](https://www.gatsbyjs.com/tutorial/) · [Read the Docs](https://www.gatsbyjs.com/docs/)**
127+
**Start Learning Gatsby: [Follow the Tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/) · [Read the Docs](https://www.gatsbyjs.com/docs/)**
128128

129129
## 🚢 Release Notes
130130

Diff for: deprecated-packages/gatsby-recipes/recipes/pwa.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ It also adds a default icon @ src/images/icon.svg (which you can replace afterwa
2525

2626
<File
2727
path="src/images/icon.png"
28-
content="https://github.com/gatsbyjs/gatsby/raw/master/docs/tutorial/part-eight/icon.png"
28+
content="https://github.com/gatsbyjs/gatsby/raw/master/docs/tutorial/getting-started/part-eight/icon.png"
2929
/>
3030

3131
<GatsbyPlugin

Diff for: docs/contributing/docs-contributions/docs-structure.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The [Gatsby documentation site](/docs) includes four different types of material
1313
- [**How-To Guides**](/docs/how-to/) are practical step-by-step guides to help readers achieve a specific goal. These are most useful when readers are trying to get something done.
1414
- [**Reference Guides**](/docs/reference/) are nitty-gritty technical descriptions of how Gatsby works. These are most useful when readers need detailed information about Gatsby's APIs.
1515
- [**Conceptual Guides**](/docs/conceptual/) are big-picture explanations of higher-level Gatsby concepts. These are most useful when readers want to deepen their understanding of a particular topic.
16-
- The [**Tutorial**](/docs/tutorial/) is a self-contained introduction that guides readers step-by-step through creating their first Gatsby site. This is most useful when readers are first getting started with Gatsby.
16+
- The [**Tutorial**](/docs/tutorial/getting-started/) is a self-contained introduction that guides readers step-by-step through creating their first Gatsby site. This is most useful when readers are first getting started with Gatsby.
1717

1818
![Each of the four types of docs has a different intended audience. The Tutorial is for learning-oriented readers, who want practical steps to help when they're studying. How-To Guides are for problem-oriented readers, who want practical steps to help when they're working. Reference Guides are for information-oriented readers, who want theoretical knowledge to help when they're working. Conceptual Guides are for understanding-oriented readers, who want theoretical knowledge to help when they're studying.](./doc-type-quadrants.svg)
1919

Diff for: docs/docs/adding-search-with-js-search.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ examples:
77

88
## Prerequisites
99

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

1212
## What is JS Search
1313

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Creating Tags Pages for Blog Posts
44

55
Creating tag pages for your blog post is a way to let visitors browse related content.
66

7-
To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
7+
To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/getting-started/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
88

99
The process will essentially look like this:
1010

Diff for: docs/docs/building-an-ecommerce-site-with-shopify.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const query = graphql`
127127

128128
## Generating a page for each product
129129

130-
You can [programmatically create pages](/docs/tutorial/part-7/) in Gatsby for every product in your Shopify store.
130+
You can [programmatically create pages](/docs/tutorial/getting-started/part-7/) in Gatsby for every product in your Shopify store.
131131

132132
Create a template for your product pages by adding a new file, `/src/templates/product.js`.
133133

Diff for: docs/docs/conceptual/building-with-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ You can programmatically create pages using "page template components". All page
7070

7171
`src/templates/post.jsx` is an example of a page template. It queries GraphQL for markdown data (sourcing from the `posts` directory) and then renders the page using this data.
7272

73-
See [part six](/docs/tutorial/part-6/) of the tutorial for a detailed introduction to programmatically creating pages.
73+
See [part six](/docs/tutorial/getting-started/part-6/) of the tutorial for a detailed introduction to programmatically creating pages.
7474

7575
Example:
7676

Diff for: docs/docs/conceptual/data-fetching.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Reasons to fetch certain data at build time vs. client runtime will vary, but in
2525

2626
In order to fetch data at build time, you can use a source plugin or source data yourself. To source data yourself you can create an integration with a third-party system by creating [nodes for the GraphQL layer](/docs/node-creation/) in your `gatsby-node` file from retrieved data that becomes queryable in pages. This is the same method that source plugins implement to [source data](/docs/content-and-data/) while the site builds. You can read about that process in the [Creating a Source Plugin guide](/docs/how-to/plugins-and-themes/creating-a-source-plugin/).
2727

28-
> 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/).
28+
> 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/).
2929
3030
#### Source data to be queried at build time
3131

Diff for: docs/docs/conceptual/gatsby-jargon.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ GraphQL is a query language (the QL part of its name) that Gatsby uses to genera
6060

6161
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).
6262

63-
Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/part-4/)
63+
Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/getting-started/part-4/)
6464

6565
## webpack
6666

Diff for: docs/docs/conceptual/graphql-concepts.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ When starting out with GraphQL, we recommend the following two tutorials:
115115
- https://www.howtographql.com/
116116
- https://graphql.org/learn/
117117

118-
[The official Gatsby tutorial](/docs/tutorial/part-4/) also includes an introduction to using GraphQL specifically with Gatsby.
118+
[The official Gatsby tutorial](/docs/tutorial/getting-started/part-4/) also includes an introduction to using GraphQL specifically with Gatsby.
119119

120120
## How do GraphQL and Gatsby work together?
121121

Diff for: docs/docs/glossary/build.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ For smaller teams and projects, use `gatsby build`. The `gatsby build` command i
2323
npm install -g gatsby-cli
2424
```
2525

26-
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.
26+
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.
2727

2828
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.
2929

Diff for: docs/docs/glossary/node.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ A year later, Node.js made its debut as a standalone JavaScript runtime using th
1717

1818
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`.
1919

20-
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.
20+
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.
2121

2222
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.
2323

Diff for: docs/docs/glossary/npm.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ its plugins.
1515

1616
npm is a [command line](/docs/glossary#command-line) tool. You'll need Terminal (Mac, Linux) or Command Prompt (Windows) in order to run its commands. To use one of npm's features, type `npm <command>`. For example, `npm help` displays a list of available features, including `install`, `uninstall`, `update`, and `search`.
1717

18-
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.
18+
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.
1919

2020
### Using npm to install Gatsby
2121

@@ -58,4 +58,4 @@ This will update the dependencies list of `package.json` and `package-lock.json`
5858
- [npm](https://www.npmjs.com/) official website
5959
- [Node.js](https://nodejs.org/en/) official website
6060
- [An introduction to the npm package manager](https://nodejs.dev/an-introduction-to-the-npm-package-manager) from Nodejs.dev
61-
- [Set Up Your Development Environment](/docs/tutorial/part-0/) from the Gatsby docs
61+
- [Set Up Your Development Environment](/docs/tutorial/getting-started/part-0/) from the Gatsby docs

Diff for: docs/docs/graphql-reference.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ These examples will work on the _real_ schema used on [graphql-reference example
99
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).
1010
You can also open the [CodeSandbox version](https://codesandbox.io/s/github/gatsbyjs/gatsby/tree/master/examples/graphql-reference) of the example site.
1111

12-
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.
12+
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.
1313

1414
## Basic queries
1515

Diff for: docs/docs/guides.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
title: Reference Guides
33
---
44

5-
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.
5+
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.
66

77
<GuideList slug={props.slug} />

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ query {
126126
}
127127
```
128128

129-
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.
129+
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.
130130

131131
```jsx
132132
import React from "react"

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Working with Images in Markdown & MDX
33
---
44

5-
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.
5+
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.
66

77
## Prerequisites
88

@@ -13,7 +13,7 @@ When building Gatsby sites composed primarily of [markdown](/docs/how-to/routing
1313

1414
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.
1515

16-
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.
16+
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.
1717

1818
To start out, install the necessary plugins for [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image/).
1919

Diff for: docs/docs/how-to/local-development/starters.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@ gatsby develop
3131
## Additional resources
3232

3333
- Follow a [more detailed guide](/docs/starters/) on using Gatsby starters.
34-
- 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)
34+
- 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)
3535
- Browse the [Starter Library](/starters/?v=2)
3636
- Check out Gatsby's [official default starter](https://github.com/gatsbyjs/gatsby-starter-default)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ You can [sign up for Gatsby Cloud here](/dashboard/signup/).
2323

2424
## Additional Resources
2525

26-
- [Tutorial Part 1: Create and Deploy Your First Gatsby Site](/docs/tutorial/part-1/)
26+
- [Tutorial Part 1: Create and Deploy Your First Gatsby Site](/docs/tutorial/getting-started/part-1/)
2727
- [Gatsby Cloud contact form](/contact-us/)

Diff for: docs/docs/how-to/querying-data/page-query.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const HomePage = () => {
7878

7979
The first part of writing the GraphQL query is including the operation (in this case "`query`") along with a name.
8080

81-
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`.
81+
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`.
8282

8383
Putting this together, the completed query looks like:
8484

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,5 @@ The environment variable `ENABLE_GATSBY_REFRESH_ENDPOINT` enables a "Refresh Dat
7070

7171
## Other resources
7272

73-
- 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
73+
- 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
7474
- See the [README for GraphiQL](https://github.com/graphql/graphiql/tree/main/packages/graphiql)

Diff for: docs/docs/how-to/styling/css-modules.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,4 @@ performance benefits like only bundling referenced code.
7171

7272
## How to build a page using CSS Modules
7373

74-
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.
74+
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.

0 commit comments

Comments
 (0)