fix(docs): fix links to localhost on docs/blog/tutorials ... (#21179)

* fix links to localhost

* fix links to localhost

Co-authored-by: LB <laurie@gatsbyjs.com>

docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md

@@ -54,7 +54,7 @@ Start the server:
 npm run develop
 ```
 
-At this point, you can access your Gatsby website by visiting [http://localhost:8000](http://localhost:8000).
+At this point, you can access your Gatsby website by visiting `http://localhost:8000`.
 
 ## Install the Cosmic JS Source Plugin
 

docs/blog/2018-11-03-building-an-accessible-lightbox/index.md

@@ -29,7 +29,7 @@ cd GatsbyLightbox
 yarn develop
 ```
 
-Now open up your browser to `localhost:8000` and you should see the starter application ready to go.
+Now open up your browser to `http://localhost:8000` and you should see the starter application ready to go.
 
 ![Gatsby Starter Screenshot](/screen-4.png)
 

docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md

@@ -62,9 +62,9 @@ git push -u origin master
 
 Commit and push regularly for best results.
 
-Navigate inside of the `lerna-monorepo-starter` directory and install the packages by running `yarn`. Once your packages have installed, run `yarn develop` to run the application on localhost:8000.
+Navigate inside of the `lerna-monorepo-starter` directory and install the packages by running `yarn`. Once your packages have installed, run `yarn develop` to run the application on `http://localhost:8000`.
 
-Open Chrome, and navigate to localhost:8000. You’ll find a simple application with a mock blog and a mock shop. Imagine this is a fleshed out application, we can make the assumption that the underlying logic behind the blog and the shop are different and that there are similarities with the styling and components.
+Open Chrome, and navigate to `http://localhost:8000`. You’ll find a simple application with a mock blog and a mock shop. Imagine this is a fleshed out application, we can make the assumption that the underlying logic behind the blog and the shop are different and that there are similarities with the styling and components.
 
 Go back to your IDE and you’ll see that we’re not pulling data from an external source. The data is being served locally via a couple of json files in the `data` directory. When we run the `develop` command Gatsby pulls the data from these json files and creates pages for them. You can take a look at how this being done by peeking inside of the `gatsby-node.js` file. This is because Gatsby builds the code and outputs a static site.
 

docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md

@@ -120,7 +120,7 @@ To do this, run the following command in the terminal and it will build the site
 gatsby develop
 ```
 
-After running that command, you can visit [localhost:8000](http://localhost:8000) in the browser and you should see the site pictured below:
+After running that command, you can visit `http://localhost:8000` in the browser and you should see the site pictured below:
 
 ![Initial appearance of Gatsby.js starter](./images/gatsby1.png)
 
@@ -214,7 +214,7 @@ module.exports = {
 
 If the Gatsby site is currently running, you need to stop it and restart it so it pulls in the new content from WordPress. It's important to know that while you can choose what information goes on what pages after your app is built, it will only pull content when it is initially run so changes in the source require a rebuild.
 
-Once you've restarted your server, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) to use the "graphical" playground. Here, you can use GraphQL to query your data for testing purposes. You should create opening and closing curly braces and then you can use shift+space (or ctrl+space on windows) to get suggestions. Once you have the data you want, you will be able to paste the query into your components, pages, and templates so you can use the information available. Here's what my query looks like for now:
+Once you've restarted your server, you can visit `http://localhost:8000/___graphql` to use the "graphical" playground. Here, you can use GraphQL to query your data for testing purposes. You should create opening and closing curly braces and then you can use shift+space (or ctrl+space on windows) to get suggestions. Once you have the data you want, you will be able to paste the query into your components, pages, and templates so you can use the information available. Here's what my query looks like for now:
 
 ![GraphQL query tests](./images/gatsby2.png)
 
@@ -307,7 +307,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 }
 ```
 
-Just like before, you will need to restart your development server to see these changes take place. Go ahead and do that so you can make sure your logic is working correctly. The easiest way I've found (in development) to see a list of pages is to go to a route that doesn't exist, such as [http://localhost:8000/stuff](http://localhost:8000/stuff).
+Just like before, you will need to restart your development server to see these changes take place. Go ahead and do that so you can make sure your logic is working correctly. The easiest way I've found (in development) to see a list of pages is to go to a route that doesn't exist, such as `http://localhost:8000/stuff`.
 
 You can now see all of the pages available and clicking on one should take you to the blog post template you created earlier that just shows Hello World. If this is what you're seeing, congrats! You're ready to move to the next section.
 

docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md

@@ -112,7 +112,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 }
 ```
 
-Just like before, you can test this to make sure the pages were created as expected by starting your development server and visiting [localhost:8000/stuff](http://localhost:8000/stuff) to get a list of all of the available pages. Again, this is only available in a development environment since a live site will show a different 404 page. You should see an `/about` page and a `/sample-page` page in there. If so, your gatsby-node.js file worked and you can update the template to show the data you want.
+Just like before, you can test this to make sure the pages were created as expected by starting your development server and visiting `http://localhost:8000/stuff` to get a list of all of the available pages. Again, this is only available in a development environment since a live site will show a different 404 page. You should see an `/about` page and a `/sample-page` page in there. If so, your gatsby-node.js file worked and you can update the template to show the data you want.
 
 ![See a list of available pages](./images/gatsby1.png)
 
@@ -156,13 +156,13 @@ I mentioned at the end of [part two](/blog/2019-04-30-how-to-build-a-blog-with-w
 
 https://giphy.com/gifs/reaction-office-space-that-was-easy-zcCGBRQshGdt6
 
-Now if you visit the about page at [http://localhost:8000/about](http://localhost:8000/about), you can see the data coming in from WordPress. If you inspect the page and look at the head, you can also see that the title and meta tags are being updated in the head because of the SEO component!
+Now if you visit the about page at `http://localhost:8000/about`, you can see the data coming in from WordPress. If you inspect the page and look at the head, you can also see that the title and meta tags are being updated in the head because of the SEO component!
 
 ## Creating pages in the pages directory
 
-Gatsby provides some awesome out-of-the-box routing. Anything you create in the `/pages` directory will automatically create a route for you. For instance, if you were to create a file called `gatsby-is-awesome.js`, Gatsby.js would see that and create a route called http://localhost:8000/gatsby-is-awesome.
+Gatsby provides some awesome out-of-the-box routing. Anything you create in the `/pages` directory will automatically create a route for you. For instance, if you were to create a file called `gatsby-is-awesome.js`, Gatsby.js would see that and create a route called `http://localhost:8000/gatsby-is-awesome`.
 
-You can also see that the starter default comes with a few pages already in the `/pages` directory. The index page is what will show when a user visits [http://localhost:8000/](http://localhost:8000/). There is also a file called page-2.js which is just a simple page to show how linking works. Finally, there is a 404.js available which is the 404 page that shows when your Gatsby site is live.
+You can also see that the starter default comes with a few pages already in the `/pages` directory. The index page is what will show when a user visits `http://localhost:8000/`. There is also a file called page-2.js which is just a simple page to show how linking works. Finally, there is a 404.js available which is the 404 page that shows when your Gatsby site is live.
 
 Since you want your blog to show up on the homepage, you can edit the file called `index.js` to do this. Let's take a look at this file before you make any changes:
 
@@ -483,7 +483,7 @@ module.exports = {
 }
 ```
 
-If you look at the code above, you'll notice you have added two new routes to the gatsby-source-wordpress. These routes are created automatically by the plugin inside of WordPress without any additional configuration. Remember, after making changes to files outside of the src folder, you need to restart your development server by running `gatsby develop`. After restarting, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) and query for the menu information, which will look like the screenshot below.
+If you look at the code above, you'll notice you have added two new routes to the gatsby-source-wordpress. These routes are created automatically by the plugin inside of WordPress without any additional configuration. Remember, after making changes to files outside of the src folder, you need to restart your development server by running `gatsby develop`. After restarting, you can visit `http://localhost:8000/___graphql` and query for the menu information, which will look like the screenshot below.
 
 ![GraphiQL query to get menu items from WordPress](./images/gatsby6.png)
 

docs/blog/2019-11-13-getting-set-up-to-manually-test-web-accessibility/index.md

@@ -82,8 +82,8 @@ To access localhost from your Android device you'll need to do (more than) a few
 3. Connect your device to your development machine via USB.
 4. From Chrome, access the remote devices panel in DevTools (under `More Tools > Remote Devices`).
 5. You should see that there is a pending device at the top of the list of devices. Your phone should have a pop-up prompt asking you to accept remote debugging. Accept remote debugging from your phone.
-6. Now you need to enable Port Forwarding from Settings in the Remote devices tab in DevTools. (Settings are at the very bottom of the list of devices so you may have to scroll down to find them) Check the box to enable it and then click the _Add Rule_ button to create a port for your phone to access what's in your browser. Type in the port you want to use on your phone on one side (e.g. `3000`) and the local address you want to access from your computer (e.g. `localhost:9000` for a served Gatsby site)
-7. Boom! If you go to `localhost:3000` on your phone you'll see your site!
+6. Now you need to enable Port Forwarding from Settings in the Remote devices tab in DevTools. (Settings are at the very bottom of the list of devices so you may have to scroll down to find them) Check the box to enable it and then click the _Add Rule_ button to create a port for your phone to access what's in your browser. Type in the port you want to use on your phone on one side (e.g. `3000`) and the local address you want to access from your computer (e.g. `http://localhost:9000/` for a served Gatsby site)
+7. Boom! If you go to `http://localhost:3000/` on your phone you'll see your site!
 
 #### iOS
 

docs/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/index.md

@@ -189,9 +189,9 @@ Now we can replace the `<section>` element with the `dangerouslySetInnerHTML` at
 + <MDXRenderer>{post.body}</MDXRenderer>
 ```
 
-And... that's it! After these changes, a Gatsby blog should be able to use MDX files to render JSX alongside markdown. To test that everything works, add a `.mdx` file to `[your-blog]/content/blog/` and write some JSX. Then, run `gatsby develop` and check `localhost:8000/blog/` for your new post. The JSX should rendered as an element on the new post page.
+And... that's it! After these changes, a Gatsby blog should be able to use MDX files to render JSX alongside markdown. To test that everything works, add a `.mdx` file to `[your-blog]/content/blog/` and write some JSX. Then, run `gatsby develop` and check `http://localhost:8000/blog/` for your new post. The JSX should rendered as an element on the new post page.
 
-For example, the following code should render a test button. Navigate to `localhost:8000/blog/example/` and you should see a clickable button in your blog post!
+For example, the following code should render a test button. Navigate to `http://localhost:8000/blog/example/` and you should see a clickable button in your blog post!
 
 ````mdx:title=content/blog/example.mdx
 ---

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

@@ -44,7 +44,7 @@ If `gatsby develop` is running, restart it so Gatsby can pick up the new fields.
 
 Now, these fields are available in the data layer. To use field data, query it using `graphql`. All fields are available to query inside `frontmatter`
 
-Try running the following query in Graph<em>i</em>QL (`localhost:8000/___graphql`):
+Try running the following query in Graph<em>i</em>QL (`http://localhost:8000/___graphql`):
 
 ```graphql
 {

docs/docs/audit-with-lighthouse.md

@@ -26,7 +26,7 @@ gatsby build
 gatsby serve
 ```
 
-Once this starts, you can now view your site at `localhost:9000`.
+Once this starts, you can now view your site at `http://localhost:9000`.
 
 ## Run a Lighthouse audit
 

docs/docs/creating-and-modifying-pages.md

@@ -20,7 +20,7 @@ To see what pages are being created by your code or plugins, you can query for
 page information while developing in Graph*i*QL. Paste the following query in
 the Graph*i*QL IDE for your site. The Graph*i*QL IDE is available when running
 your sites development server at `HOST:PORT/___graphql` e.g.
-`localhost:8000/___graphql`.
+`http://localhost:8000/___graphql`.
 
 ```graphql
 {

docs/docs/gatsby-cli.md

@@ -103,7 +103,7 @@ You can now view gatsbyjs.org in the browser.
   On Your Network:  http://192.168.0.212:8000/ // highlight-line
 ```
 
-**Note**: To access Gatsby on your local machine, use either localhost:8000 or the "On Your Network" URL.
+**Note**: To access Gatsby on your local machine, use either `http://localhost:8000` or the "On Your Network" URL.
 
 ### `build`
 

docs/docs/local-https.md

@@ -27,9 +27,9 @@ After typing in your password, `devcert` will attempt to install some software n
     See https://github.com/davewasmer/devcert#how-it-works for more details
     -- Press <Enter> once you finish the Firefox prompts --
 
-If you wish to support Firefox (or Chrome on Linux), visit [localhost:52175](http://localhost:52175) in Firefox and follow the point-and-click wizard. Otherwise, you may press enter without following the prompts. **Reminder: you'll only need to do this once per machine.**
+If you wish to support Firefox (or Chrome on Linux), visit `http://localhost:52175` in Firefox and follow the point-and-click wizard. Otherwise, you may press enter without following the prompts. **Reminder: you'll only need to do this once per machine.**
 
-Now open the development server at [https://localhost:8000](https://localhost:8000) and enjoy the HTTPS goodness ✨. Of course, you may change the port according to your setup.
+Now open the development server at `https://localhost:8000` and enjoy the HTTPS goodness ✨. Of course, you may change the port according to your setup.
 
 Find out more about [how devcert works](https://github.com/davewasmer/devcert#how-it-works).
 

docs/docs/mdx/getting-started.md

@@ -22,7 +22,7 @@ your site.
    gatsby develop
    ```
 
-1. **Open the site** running at http://localhost:8000
+1. **Open the site** running at `http://localhost:8000`
 
 1. **Update the MDX content** by opening the `my-mdx-starter` directory
    in your code editor of choice and edit `src/pages/index.mdx`.

docs/docs/mdx/programmatically-creating-pages.md

@@ -129,8 +129,8 @@ to set up our page. `/blog${value}` is a [template
 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
 that will result in:
 
-- blog-1.mdx => localhost:8000/blog/blog-1/
-- blog-2.mdx => localhost:8000/blog/blog-2/
+- blog-1.mdx => http://localhost:8000/blog/blog-1/
+- blog-2.mdx => http://localhost:8000/blog/blog-2/
 
 [`createFilePath`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=gatsby-source#createfilepath)
 is a function from `gatsby-source-filesystem` that translates file

docs/docs/modifying-a-starter.md

@@ -32,7 +32,7 @@ If you'd like to read descriptions of all of these files, as well as the other f
 
 ## Adding content
 
-How exactly you add content to your site will depend somewhat on your starter's structure. The default starter includes the `src/pages/` directory, which contains `404.js`, `index.js`, and `page-2.js`. Adding a JavaScript file to this directory will automatically create a new route available at `localhost:8000/[file-name]`. For example, if you'd like to add a page to share your speaking experience, you might include `speaking.js` in `src/pages/` as written below:
+How exactly you add content to your site will depend somewhat on your starter's structure. The default starter includes the `src/pages/` directory, which contains `404.js`, `index.js`, and `page-2.js`. Adding a JavaScript file to this directory will automatically create a new route available at `http://localhost:8000/[file-name]`. For example, if you'd like to add a page to share your speaking experience, you might include `speaking.js` in `src/pages/` as written below:
 
 ```jsx:title=src/pages/speaking.js
 import React from "react"
@@ -58,7 +58,7 @@ const SpeakingPage = () => (
 export default SpeakingPage
 ```
 
-At this point, you can navigate to `localhost:8000/speaking` in your browser to view this page! You can also [add pages from Markdown](/docs/adding-markdown-pages/) or [source data from a content management system](/docs/headless-cms/) (CMS) like WordPress. You may even choose a specific starter _because_ it's built to work well with a certain CMS. Try explicitly searching the [Gatsby Starter Library](/starters/) for your preferred system. Once there, check out the category filter. You'll see several options prefixed with "CMS:". Choose the option(s) that best fit your goals for the project.
+At this point, you can navigate to `http://localhost:8000/speaking` in your browser to view this page! You can also [add pages from Markdown](/docs/adding-markdown-pages/) or [source data from a content management system](/docs/headless-cms/) (CMS) like WordPress. You may even choose a specific starter _because_ it's built to work well with a certain CMS. Try explicitly searching the [Gatsby Starter Library](/starters/) for your preferred system. Once there, check out the category filter. You'll see several options prefixed with "CMS:". Choose the option(s) that best fit your goals for the project.
 
 ## Querying data
 

docs/docs/performance-tracing.md

@@ -76,7 +76,7 @@ There are many OpenTracing compatible backends available. Below are examples of
     gatsby build --open-tracing-config-file node_modules/gatsby/dist/utils/tracer/jaeger-local.js
     ```
 
-4.  Once the build is complete, view your tracing information at [http://localhost:16686](http://localhost:16686). On the left menu, select the `build` operation to see your build's root trace.
+4.  Once the build is complete, view your tracing information at `http://localhost:16686`. On the left menu, select the `build` operation to see your build's root trace.
 
 ### Local Zipkin with Docker
 
@@ -96,7 +96,7 @@ There are many OpenTracing compatible backends available. Below are examples of
     gatsby build --open-tracing-config-file node_modules/gatsby/dist/utils/tracer/zipkin-local.js
     ```
 
-4.  Once the build is complete, view your tracing information at [http://localhost:9411](http://localhost:9411)
+4.  Once the build is complete, view your tracing information at `http://localhost:9411`
 
 ## Adding your own tracing
 

docs/docs/quick-start.md

@@ -37,7 +37,7 @@ cd gatsby-site
 gatsby develop
 ```
 
-Gatsby will start a hot-reloading development environment accessible by default at `localhost:8000`.
+Gatsby will start a hot-reloading development environment accessible by default at `http://localhost:8000`.
 
 Try editing the JavaScript pages in `src/pages`. Saved changes will live reload in the browser.