diff --git a/docs/contributing/translation/sync-guide.md b/docs/contributing/translation/sync-guide.md index 50c6ac0517f34..c8b7280746cdf 100644 --- a/docs/contributing/translation/sync-guide.md +++ b/docs/contributing/translation/sync-guide.md @@ -169,7 +169,7 @@ If a page has significant changes, it may be worth splitting it into its own pul ```shell git checkout conflicts-9032a0 git checkout -b sync-tutorial-0 -# Fix conflicts in /docs/docs/tutorial/part-zero/index.md +# Fix conflicts in /docs/docs/tutorial/part-0/index.md git commit -am "Fix conflicts in tutorial part zero" git push -u origin sync-tutorial-0 ``` diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 4415c028b6921..6a2c62fdd71c9 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -4,7 +4,7 @@ title: Creating Tags Pages for Blog Posts Creating tag pages for your blog post is a way to let visitors browse related content. -To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-four/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/). +To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/). The process will essentially look like this: diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md index 0f57ffc76024e..1759ebff6eb93 100644 --- a/docs/docs/building-an-ecommerce-site-with-shopify.md +++ b/docs/docs/building-an-ecommerce-site-with-shopify.md @@ -123,7 +123,7 @@ export const query = graphql` ## Generating a page for each product -You can [programmatically create pages](/docs/tutorial/part-seven/) in Gatsby for every product in your Shopify store. +You can [programmatically create pages](/docs/tutorial/part-7/) in Gatsby for every product in your Shopify store. Create a template for your product pages by adding a new file, `/src/templates/product.js`. diff --git a/docs/docs/conceptual/building-with-components.md b/docs/docs/conceptual/building-with-components.md index 9954f8461f46a..ffecfefd741b2 100644 --- a/docs/docs/conceptual/building-with-components.md +++ b/docs/docs/conceptual/building-with-components.md @@ -79,7 +79,7 @@ pages are React components but very often these components are just wrappers aro `src/templates/post.js` is an example of a page component. It queries GraphQL for markdown data and then renders the page using this data. -See [part seven](/docs/tutorial/part-seven/) of the tutorial for a detailed +See [part seven](/docs/tutorial/part-7/) of the tutorial for a detailed introduction to programmatically creating pages. Example: diff --git a/docs/docs/conceptual/data-fetching.md b/docs/docs/conceptual/data-fetching.md index 681c272ecf06a..c5032eadf87d1 100644 --- a/docs/docs/conceptual/data-fetching.md +++ b/docs/docs/conceptual/data-fetching.md @@ -25,7 +25,7 @@ Reasons to fetch certain data at build time vs. client runtime will vary, but in In order to fetch data at build time, you can use a source plugin or source data yourself. To source data yourself you can create an integration with a third-party system by creating [nodes for the GraphQL layer](/docs/node-creation/) in your `gatsby-node` file from retrieved data that becomes queryable in pages. This is the same method that source plugins implement to [source data](/docs/content-and-data/) while the site builds. You can read about that process in the [Creating a Source Plugin guide](/docs/how-to/plugins-and-themes/creating-a-source-plugin/). -> This process of fetching data at build time and creating pages from the data is [covered in more depth in the tutorial](/docs/tutorial/part-five/) 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/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 435e329f26311..6c1a052985c01 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-four/) +Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/part-4/) ## webpack diff --git a/docs/docs/conceptual/graphql-concepts.md b/docs/docs/conceptual/graphql-concepts.md index e638cd18b8ede..2c981f3927043 100644 --- a/docs/docs/conceptual/graphql-concepts.md +++ b/docs/docs/conceptual/graphql-concepts.md @@ -118,7 +118,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-four/) also includes an introduction to using GraphQL specifically with Gatsby. +[The official Gatsby tutorial](/docs/tutorial/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 0c27ea07b9d34..2da952369de32 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-zero/#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/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 7af19a37a330a..1e7e3a5cbd86e 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-zero/#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/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 8a7a30512494e..3775c17a71f7a 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-zero/#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/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-zero/) from the Gatsby docs +- [Set Up Your Development Environment](/docs/tutorial/part-0/) from the Gatsby docs 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 ad62109903259..4e1164caef3d0 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 @@ -132,7 +132,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-seven/) 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/part-7/) section of the Gatsby Tutorial. ```jsx import React from "react" diff --git a/docs/docs/how-to/local-development/starters.md b/docs/docs/how-to/local-development/starters.md index b5aafefa6dee5..839371f61c687 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-one/#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) - 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/querying-data/page-query.md b/docs/docs/how-to/querying-data/page-query.md index 89925d830f9a7..1d7f8aadba675 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 [exploring in the GraphQL IDE, GraphiQL](/docs/tutorial/part-five/#introducing-graphiql/), 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 [exploring in the GraphQL IDE, GraphiQL](/docs/tutorial/part-5/#introducing-graphiql/), 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 94e5bb62e5e5d..36d13ceafc4f7 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 @@ -47,6 +47,6 @@ The environment variable `ENABLE_GATSBY_REFRESH_ENDPOINT` enables a "Refresh Dat ## Other resources -- See [Tutorial Part 5: Source Plugins](/docs/tutorial/part-five/) for a more complete example of using GraphiQL +- See [Tutorial Part 5: Source Plugins](/docs/tutorial/part-5/) for a more complete example of using GraphiQL - See the [README for GraphiQL](https://github.com/graphql/graphiql) - See [Using GraphQL Playground](/docs/using-graphql-playground/) for another example of a GraphQL IDE diff --git a/docs/docs/how-to/routing/layout-components.md b/docs/docs/how-to/routing/layout-components.md index f945ea6120c7a..c03cd97868b85 100644 --- a/docs/docs/how-to/routing/layout-components.md +++ b/docs/docs/how-to/routing/layout-components.md @@ -59,7 +59,7 @@ Alternatively, you can prevent your layout component from unmounting by using [g ## Other resources -- [Creating nested layout components in Gatsby](/docs/tutorial/part-three/) +- [Creating nested layout components in Gatsby](/docs/tutorial/part-3/) - [Life after layouts in Gatsby V2](/blog/2018-06-08-life-after-layouts/) - [Migrating from v1 to v2](/docs/reference/release-notes/migrating-from-v1-to-v2/#remove-or-refactor-layout-components) - [gatsby-plugin-layout](/plugins/gatsby-plugin-layout/) diff --git a/docs/docs/how-to/styling/css-modules.md b/docs/docs/how-to/styling/css-modules.md index fcb5664a7c66d..ab7d821e61867 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-two/#css-modules) for a guided tour of building a page with 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. diff --git a/docs/docs/how-to/styling/global-css.md b/docs/docs/how-to/styling/global-css.md index c8086aee5dd99..97055d16415cd 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-three/#your-first-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/part-3/#your-first-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 0b9ecfaaec411..ef90484debab3 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-one/#linking-between-pages/) in the Tutorial +- For the complete example of how to link between pages, see [Part One](/docs/tutorial/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 9e929d933b3c6..9c92c0f08d664 100644 --- a/docs/docs/porting-an-html-site-to-gatsby.md +++ b/docs/docs/porting-an-html-site-to-gatsby.md @@ -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-zero/). +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 Project diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md index 8e99a900aae96..01a774a6b893f 100644 --- a/docs/docs/preparing-your-environment.md +++ b/docs/docs/preparing-your-environment.md @@ -4,11 +4,11 @@ title: Preparing Your Environment To get started with Gatsby, you'll need to make sure you have the following software tools installed: -1. [Node.js](/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) -2. [npm CLI](/docs/tutorial/part-zero/#check-your-nodejs-installation) -3. [Gatsby CLI](/docs/tutorial/part-zero/#using-the-gatsby-cli) +1. [Node.js](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system) +2. [npm CLI](/docs/tutorial/part-0/#check-your-nodejs-installation) +3. [Gatsby CLI](/docs/tutorial/part-0/#using-the-gatsby-cli) -For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-zero/). +For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-0/). The [quick start](/docs/quick-start/) is also available for intermediate to advanced developers. diff --git a/docs/docs/query-behind-the-scenes.md b/docs/docs/query-behind-the-scenes.md index 77be3dc82982b..6199627bcfbd5 100644 --- a/docs/docs/query-behind-the-scenes.md +++ b/docs/docs/query-behind-the-scenes.md @@ -4,7 +4,7 @@ title: How Queries Work In Gatsby, GraphQL queries are specified as tagged `graphql` expressions. These can be exported in your page source files, used in the `StaticQuery` component, or used in the `useStaticQuery` hook in your React code. Plugins can also define fragments for use in queries. -Note that the process outlined in this section only applies to queries that are specified in components or templates. It does _not_ apply to queries specified in a `gatsby-node.js` file which are typically used for the creation of dynamic pages. (For an example of a query in a `gatsby-node.js` file, check out the [Creating Pages](/docs/tutorial/part-seven/#creating-pages) section from Part 7 of the Gatsby tutorial. +Note that the process outlined in this section only applies to queries that are specified in components or templates. It does _not_ apply to queries specified in a `gatsby-node.js` file which are typically used for the creation of dynamic pages. (For an example of a query in a `gatsby-node.js` file, check out the [Creating Pages](/docs/tutorial/part-7/#creating-pages) section from Part 7 of the Gatsby tutorial. Most code to do with queries is in the [src/query](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/query) directory in the Gatsby monorepo. diff --git a/docs/docs/recipes/deploying-your-site.md b/docs/docs/recipes/deploying-your-site.md index bd2a2e2449d09..ac9d68e8615f6 100644 --- a/docs/docs/recipes/deploying-your-site.md +++ b/docs/docs/recipes/deploying-your-site.md @@ -46,7 +46,7 @@ gatsby build && gatsby serve ### Additional resources -- Walk through building and deploying an example site in [tutorial part one](/docs/tutorial/part-one/#deploying-a-gatsby-site) +- Walk through building and deploying an example site in [tutorial part one](/docs/tutorial/part-1/#deploying-a-gatsby-site) - Learn about [performance optimization](/docs/performance/) - Read about [other deployment related topics](/docs/preparing-for-deployment/) - Check out the [deployment docs](/docs/deploying-and-hosting/) for specific hosting platforms and how to deploy to them diff --git a/docs/docs/recipes/pages-layouts.md b/docs/docs/recipes/pages-layouts.md index 85760cf358982..fc7debd9d0064 100644 --- a/docs/docs/recipes/pages-layouts.md +++ b/docs/docs/recipes/pages-layouts.md @@ -153,7 +153,7 @@ export default function Home() { ### Additional resources -- Create a layout component in [tutorial part three](/docs/tutorial/part-three/#your-first-layout-component) +- Create a layout component in [tutorial part three](/docs/tutorial/part-3/#your-first-layout-component) - Styling with [Layout Components](/docs/how-to/routing/layout-components/) ## Creating pages programmatically with createPage @@ -244,6 +244,6 @@ export default function DogTemplate({ pageContext: { dog } }) { ### Additional resources -- Tutorial section on [programmatically creating pages from data](/docs/tutorial/part-seven/) +- Tutorial section on [programmatically creating pages from data](/docs/tutorial/part-7/) - Reference guide on [using Gatsby without GraphQL](/docs/how-to/querying-data/using-gatsby-without-graphql/) - [Example repo](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-createPage) for this recipe diff --git a/docs/docs/recipes/sourcing-data.md b/docs/docs/recipes/sourcing-data.md index 279839985db6d..d7ea35ef9c39a 100644 --- a/docs/docs/recipes/sourcing-data.md +++ b/docs/docs/recipes/sourcing-data.md @@ -57,7 +57,7 @@ query MyPokemonQuery { ### Additional resources -- Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/docs/tutorial/part-five/#source-plugins) +- Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/docs/tutorial/part-5/#source-plugins) - Search available source plugins in the [Gatsby library](/plugins/?=source) - Understand source plugins by building one in the [source plugin tutorial](/docs/how-to/plugins-and-themes/creating-a-source-plugin/) - The createNode function [documentation](/docs/reference/config-files/actions/#createNode) @@ -202,7 +202,7 @@ export const pageQuery = graphql` ### Additional resources -- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-seven/) +- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-7/) - [Creating and modifying pages](/docs/creating-and-modifying-pages/) - [Adding Markdown pages](/docs/how-to/routing/adding-markdown-pages/) - [Guide to creating pages from data programmatically](/docs/programmatically-create-pages-from-data/) @@ -633,4 +633,4 @@ export const query = graphql` - [Using Decoupled Drupal with Gatsby](/blog/2018-08-13-using-decoupled-drupal-with-gatsby/) - [More on sourcing from Drupal](/docs/how-to/sourcing-data/sourcing-from-drupal) -- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-seven/) +- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-7/) diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md index fe85da56bbf06..79029bcb8cc24 100644 --- a/docs/docs/recipes/styling-css.md +++ b/docs/docs/recipes/styling-css.md @@ -50,7 +50,7 @@ import "./src/styles/global.css" ### Directions -You can add global styles to a [shared layout component](/docs/tutorial/part-three/#your-first-layout-component). This component is used for things that are common throughout the site, like a header or footer. +You can add global styles to a [shared layout component](/docs/tutorial/part-3/#your-first-layout-component). This component is used for things that are common throughout the site, like a header or footer. 1. If you don't already have one, create a new directory in your site at `/src/components`. @@ -89,7 +89,7 @@ export default function Home() { ### Additional resources - [Standard Styling with Global CSS Files](/docs/how-to/styling/global-css/) -- [More about layout components](/docs/tutorial/part-three) +- [More about layout components](/docs/tutorial/part-3) ## Using Styled Components @@ -213,7 +213,7 @@ Notice that the file extension is `.module.css` instead of `.css`, which tells G ### Additional resources -- More on [Using CSS Modules](/docs/tutorial/part-two/#css-modules) +- More on [Using CSS Modules](/docs/tutorial/part-2/#css-modules) - [Live example on Using CSS modules](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-css-modules) ## Using Sass/SCSS diff --git a/docs/docs/recipes/transforming-data.md b/docs/docs/recipes/transforming-data.md index 2e1db5c708ac2..37021840c2f7e 100644 --- a/docs/docs/recipes/transforming-data.md +++ b/docs/docs/recipes/transforming-data.md @@ -53,7 +53,7 @@ export const query = graphql` ### Additional resources -- [Tutorial on transforming Markdown to HTML](/docs/tutorial/part-six/#transformer-plugins) using `gatsby-transformer-remark` +- [Tutorial on transforming Markdown to HTML](/docs/tutorial/part-6/#transformer-plugins) using `gatsby-transformer-remark` - Browse available transformer plugins in the [Gatsby plugin library](/plugins/?=transformer) ## Transforming images into grayscale using GraphQL diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index 70f4afe5a484c..76830746a4c9c 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -66,7 +66,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.js Tutorial Part Four](/docs/tutorial/part-four/#data-in-gatsby). +See a full description and sample usage in [Gatsby.js Tutorial Part Four](/docs/tutorial/part-4/#data-in-gatsby). ## Plugins diff --git a/docs/docs/upgrading-node-js.md b/docs/docs/upgrading-node-js.md index 8e5a49dc2b9a5..6a0a648af9725 100644 --- a/docs/docs/upgrading-node-js.md +++ b/docs/docs/upgrading-node-js.md @@ -35,7 +35,7 @@ There are multiple ways to update your version of Node.js depending on how you o This is the recommended way to install a newer version of Node. -You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/docs/tutorial/part-zero/#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/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 10 to Node.js 12 using Homebrew, open a terminal and run the following commands: diff --git a/docs/docs/using-gatsby-professionally/setting-up-gatsby-without-gatsby-new.md b/docs/docs/using-gatsby-professionally/setting-up-gatsby-without-gatsby-new.md index 989adfdc70442..fec90e4e5c421 100644 --- a/docs/docs/using-gatsby-professionally/setting-up-gatsby-without-gatsby-new.md +++ b/docs/docs/using-gatsby-professionally/setting-up-gatsby-without-gatsby-new.md @@ -8,10 +8,10 @@ There are many Enterprise level companies that maintain an internal clone of the To get started with Gatsby, you’ll need to make sure you have the following software tools installed: -1. [Node.js](/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) -2. [Gatsby CLI](/docs/tutorial/part-zero/#using-the-gatsby-cli) +1. [Node.js](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system) +2. [Gatsby CLI](/docs/tutorial/part-0/#using-the-gatsby-cli) -For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-zero/). +For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-0/). After your developer environment is set up, you'll want to set up a new project folder. @@ -66,4 +66,4 @@ cd ../../ gatsby develop ``` -And that's it! You should now have your initial page running on `http://localhost:8000` with a GraphiQL IDE running on `http://localhost:8000/___graphql`. From here, you can follow the rest of the [Gatsby tutorial](/docs/tutorial/part-zero/#set-up-a-code-editor) starting with setting up a code editor to get the full experience of what Gatsby can offer. +And that's it! You should now have your initial page running on `http://localhost:8000` with a GraphiQL IDE running on `http://localhost:8000/___graphql`. From here, you can follow the rest of the [Gatsby tutorial](/docs/tutorial/part-0/#set-up-a-code-editor) starting with setting up a code editor to get the full experience of what Gatsby can offer. diff --git a/docs/docs/working-with-images-in-markdown.md b/docs/docs/working-with-images-in-markdown.md index d1c6b1c35c5ed..150c766d6caf7 100644 --- a/docs/docs/working-with-images-in-markdown.md +++ b/docs/docs/working-with-images-in-markdown.md @@ -8,7 +8,7 @@ When building Gatsby sites composed primarily of Markdown pages or posts, insert 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. -This solution assumes you already have programmatically generated pages from Markdown with renderers like `gatsby-transformer-remark` or `gatsby-plugin-mdx`. If not, take a read through up to [Part 7 of the Gatsby Tutorial](/docs/tutorial/part-seven/). This will build upon the tutorial and as such, `gatsby-transformer-remark` will be used for this example. +This solution assumes you already have programmatically generated pages from Markdown with renderers like `gatsby-transformer-remark` or `gatsby-plugin-mdx`. If not, take a read through up to [Part 7 of the Gatsby Tutorial](/docs/tutorial/part-7/). This will build upon the tutorial and as such, `gatsby-transformer-remark` will be used for this example. > Note: This can be done similarly using [MDX](/docs/how-to/routing/mdx/) as well. Instead of the `markdownRemark` nodes in GraphQL, `Mdx` can be swapped in and should work. 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 113f2704866a3..57eea03b7f1bb 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-zero/). 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/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-zero/#using-the-gatsby-cli): run Gatsby commands on your computer +- [Gatsby command line interface (CLI)](/docs/tutorial/part-0/#using-the-gatsby-cli): run Gatsby commands on your computer ## Provisioning Your Site on Gatsby Cloud diff --git a/docs/tutorial/remark-plugin-tutorial.md b/docs/tutorial/remark-plugin-tutorial.md index 9d4e091dd0c41..f4bbe8b1e2a92 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-six/) and [Part Seven](/docs/tutorial/part-seven/) of the Gatsby Tutorial. +- 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. - Understanding of the Markdown Syntax. ## Understanding the Abstract Syntax Tree @@ -323,7 +323,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 7 of the Gatsby Tutorial](/docs/tutorial/part-seven/) 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 7 of the Gatsby Tutorial](/docs/tutorial/part-7/) 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 7afb8838e1254..a959da50a18cb 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-seven/) 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/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-zero/#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/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 0e42b23803e1f..926aa1e1eb88c 100644 --- a/e2e-tests/development-runtime/README.md +++ b/e2e-tests/development-runtime/README.md @@ -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.org/tutorial/part-five/#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.org/tutorial/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! diff --git a/examples/using-shopify/README.md b/examples/using-shopify/README.md index f2cf29573c728..852ca4356b81b 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-five/#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/tutorial/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! diff --git a/examples/using-square-payments/README.md b/examples/using-square-payments/README.md index 6783f40901938..876b91feadc33 100644 --- a/examples/using-square-payments/README.md +++ b/examples/using-square-payments/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-five/#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/tutorial/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! diff --git a/examples/using-type-definitions/README.md b/examples/using-type-definitions/README.md index 6783f40901938..876b91feadc33 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-five/#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/tutorial/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! diff --git a/packages/gatsby-plugin-typography/README.md b/packages/gatsby-plugin-typography/README.md index f51feb22415d4..e3a0b0c9edc67 100644 --- a/packages/gatsby-plugin-typography/README.md +++ b/packages/gatsby-plugin-typography/README.md @@ -2,7 +2,7 @@ A Gatsby plugin for utilizing the [Typography](https://kyleamathews.github.io/typography.js/) library with minimal configuration. -See it in action in the [Tutorial](https://www.gatsbyjs.org/tutorial/part-three/) +See it in action in the [Tutorial](https://www.gatsbyjs.org/tutorial/part-3/) ([source](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography)) ## Install diff --git a/packages/gatsby-source-filesystem/README.md b/packages/gatsby-source-filesystem/README.md index b9a5c35f0f025..123526d3a0119 100644 --- a/packages/gatsby-source-filesystem/README.md +++ b/packages/gatsby-source-filesystem/README.md @@ -130,7 +130,7 @@ createFilePath({ #### Example usage -The following is taken from [Gatsby Tutorial, Part Seven](https://www.gatsbyjs.org/tutorial/part-seven/) and is used to create URL slugs for markdown pages. +The following is taken from [Gatsby Tutorial, Part Seven](https://www.gatsbyjs.org/tutorial/part-7/) and is used to create URL slugs for markdown pages. ```javascript const { createFilePath } = require(`gatsby-source-filesystem`) 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 ce91eeeef0138..c94681d52475f 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.org/tutorial/part-seven/) 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.org/tutorial/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.org/tutorial/part-zero/#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.org/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. 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 fd8cfbe6fc52c..584231e33528b 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-zero/). +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/). ## Setting up `gatsby-source-wordpress` diff --git a/starters/README-template.md b/starters/README-template.md index e5fe1225335ca..6e162b49a91d9 100644 --- a/starters/README-template.md +++ b/starters/README-template.md @@ -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/tutorial/part-five/#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/tutorial/part-5/#introducing-graphiql)._ 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! diff --git a/starters/blog/README.md b/starters/blog/README.md index 386ea0e0acb07..4c15158a67e71 100644 --- a/starters/blog/README.md +++ b/starters/blog/README.md @@ -39,7 +39,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-five/#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/tutorial/part-5/#introducing-graphiql)._ 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! diff --git a/starters/default/README.md b/starters/default/README.md index 223b947b41702..1f7bcf8c99337 100644 --- a/starters/default/README.md +++ b/starters/default/README.md @@ -39,7 +39,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-five/#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/tutorial/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! diff --git a/starters/gatsby-starter-plugin/README.md b/starters/gatsby-starter-plugin/README.md index f5e3c5fd0941b..4721395991f89 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-zero/#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/tutorial/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 63d976f560a3c..3c397128130ef 100644 --- a/starters/gatsby-starter-wordpress-blog/README.md +++ b/starters/gatsby-starter-wordpress-blog/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-five/#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/tutorial/part-5/#introducing-graphiql)._ 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! diff --git a/starters/hello-world/README.md b/starters/hello-world/README.md index dcf43dce2bcca..e02949ef4111a 100644 --- a/starters/hello-world/README.md +++ b/starters/hello-world/README.md @@ -37,7 +37,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-five/#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/tutorial/part-5/#introducing-graphiql)._ 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!