diff --git a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md b/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md index b1f069504229d..9f1e887172851 100644 --- a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md +++ b/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 diff --git a/docs/blog/2018-11-03-building-an-accessible-lightbox/index.md b/docs/blog/2018-11-03-building-an-accessible-lightbox/index.md index a6a04fc915300..243b568c3196c 100644 --- a/docs/blog/2018-11-03-building-an-accessible-lightbox/index.md +++ b/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) diff --git a/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md b/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md index 8e7ab5a347823..0646d3adcb98a 100644 --- a/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md +++ b/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. diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md index 3e91e50a38a37..a59f2907802e1 100644 --- a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md +++ b/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. diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md index d3ff33e26f99b..fa292aa0ba4ad 100644 --- a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md +++ b/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) diff --git a/docs/blog/2019-11-13-getting-set-up-to-manually-test-web-accessibility/index.md b/docs/blog/2019-11-13-getting-set-up-to-manually-test-web-accessibility/index.md index 49b6824497e24..8d8e857c1c5f2 100644 --- a/docs/blog/2019-11-13-getting-set-up-to-manually-test-web-accessibility/index.md +++ b/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 diff --git a/docs/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/index.md b/docs/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/index.md index 4b2599b427a26..b97e486899336 100644 --- a/docs/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/index.md +++ b/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 `
` element with the `dangerouslySetInnerHTML` at + {post.body} ``` -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 --- 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 840cf89219010..e648ffad707bc 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/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 GraphiQL (`localhost:8000/___graphql`): +Try running the following query in GraphiQL (`http://localhost:8000/___graphql`): ```graphql { diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md index d10122a2d43b6..3426d0c6dca96 100644 --- a/docs/docs/audit-with-lighthouse.md +++ b/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 diff --git a/docs/docs/creating-and-modifying-pages.md b/docs/docs/creating-and-modifying-pages.md index 8484f70475e54..a0abff99ef9fa 100644 --- a/docs/docs/creating-and-modifying-pages.md +++ b/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 { diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md index 1922e831a1c4d..a061269db602b 100644 --- a/docs/docs/gatsby-cli.md +++ b/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` diff --git a/docs/docs/local-https.md b/docs/docs/local-https.md index 7667270bbf852..79cc643c8349e 100644 --- a/docs/docs/local-https.md +++ b/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 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). diff --git a/docs/docs/mdx/getting-started.md b/docs/docs/mdx/getting-started.md index f1ee4ff96175e..d3b524ac74aeb 100644 --- a/docs/docs/mdx/getting-started.md +++ b/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`. diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 9446d202a140c..48140863e99ee 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/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 diff --git a/docs/docs/modifying-a-starter.md b/docs/docs/modifying-a-starter.md index 0b8e0a61da86a..6503ea7b0a211 100644 --- a/docs/docs/modifying-a-starter.md +++ b/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 diff --git a/docs/docs/performance-tracing.md b/docs/docs/performance-tracing.md index 28e545273f8e7..00918f49eb161 100644 --- a/docs/docs/performance-tracing.md +++ b/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 diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 622fa8e74050a..401c7e5741177 100644 --- a/docs/docs/quick-start.md +++ b/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. diff --git a/docs/docs/recipes/sourcing-data.md b/docs/docs/recipes/sourcing-data.md index cda9179e8f3d2..74304d5b0b5b2 100644 --- a/docs/docs/recipes/sourcing-data.md +++ b/docs/docs/recipes/sourcing-data.md @@ -325,7 +325,7 @@ exports.createPages = async ({ graphql, actions }) => { 5. Run `gatsby-develop` to see the newly generated pages and navigate through them. -6. Open the `GraphiQL IDE` at `localhost:8000/__graphql` and open the Docs or Explorer to observe the queryable fields for `allWordpressPosts`. +6. Open the `GraphiQL IDE` at `http://localhost:8000/__graphql` and open the Docs or Explorer to observe the queryable fields for `allWordpressPosts`. The dynamic pages created above in `gatsby-node.js` have unique paths for navigating to particular posts, using a template component for the posts and a sample GraphQL query to source WordPress post content. @@ -400,7 +400,7 @@ plugins: [ 7. Run `gatsby develop` and make sure the site compiled successfully. -8. Query data with the [GraphiQL editor](/docs/introducing-graphiql/) at . The Contentful plugin adds several new node types to your site, including every content type in your Contentful website. Your example space with a "Blog Post" content type produces a `allContentfulBlogPost` node type in GraphQL. +8. Query data with the [GraphiQL editor](/docs/introducing-graphiql/) at `http://localhost:8000/___graphql`. The Contentful plugin adds several new node types to your site, including every content type in your Contentful website. Your example space with a "Blog Post" content type produces a `allContentfulBlogPost` node type in GraphQL. ![the graphql interface, with a sample query outlined below](../images/recipe-sourcing-contentful-graphql.png) diff --git a/docs/docs/setting-up-gatsby-without-gatsby-new.md b/docs/docs/setting-up-gatsby-without-gatsby-new.md index 84dae65910e40..7a794cacd2a8f 100644 --- a/docs/docs/setting-up-gatsby-without-gatsby-new.md +++ b/docs/docs/setting-up-gatsby-without-gatsby-new.md @@ -65,4 +65,4 @@ cd ../../ gatsby develop ``` -And that's it! You should now have your initial page running on `localhost:8000` with a GraphiQL IDE running on `localhost:8000/___graphql`. From here, you can follow the rest of the [Gatsby tutorial](/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](/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. diff --git a/docs/docs/sourcing-from-buttercms.md b/docs/docs/sourcing-from-buttercms.md index b5c1cb2abc9cc..24516aa184c8b 100644 --- a/docs/docs/sourcing-from-buttercms.md +++ b/docs/docs/sourcing-from-buttercms.md @@ -257,7 +257,7 @@ in your terminal, run gatsby develop ``` -Now open up [localhost:8000/home](http://localhost:8000/home) to see the home page populated with the content you created on butter. +Now open up `http://localhost:8000/home` to see the home page populated with the content you created on butter. ### Create multiple pages using Page Types @@ -295,7 +295,7 @@ gatsby develop ### Testing with GraphiQL -You can test out your GraphQL queries with GraphiQL (a GraphQL debugger) fire up GraphiQL on [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) +You can test out your GraphQL queries with GraphiQL (a GraphQL debugger) fire up GraphiQL on `http://localhost:8000/___graphql` Once GraphiQL is open, paste the query below : diff --git a/docs/docs/sourcing-from-forestry.md b/docs/docs/sourcing-from-forestry.md index f0d8b83d13913..6ea04e0c49bce 100644 --- a/docs/docs/sourcing-from-forestry.md +++ b/docs/docs/sourcing-from-forestry.md @@ -145,7 +145,7 @@ sections: - blog ``` -Because Forestry's `admin.html` file is in the `/static` directory, this page will only be available once your Gatsby site is built. Run `gatsby build && gatsby serve`. Once the server is running, it will print the address to open for viewing. It's typically localhost:8000. Now navigate to /admin - so if your site is at localhost:8000, go to localhost:8000/admin. +Because Forestry's `admin.html` file is in the `/static` directory, this page will only be available once your Gatsby site is built. Run `gatsby build && gatsby serve`. Once the server is running, it will print the address to open for viewing. It's typically `http://localhost:8000`. Now navigate to `/admin` - so if your site is at `http://localhost:8000`, go to `http://localhost:8000/admin` You should now be viewing your Forestry login page. Login to view your dashboard. If you don't have a user yet, create one on the Forestry Dashboard. This will allow you to login on the Gatsby site admin login page. On the left side of your dashboard you will see "Posts". If you click on it you can add a new post. When you save your post, Forestry will push the change directly to your GitHub repo. diff --git a/docs/docs/sourcing-from-netlify-cms.md b/docs/docs/sourcing-from-netlify-cms.md index b194e661c6a51..5e3c0c69f3dd9 100644 --- a/docs/docs/sourcing-from-netlify-cms.md +++ b/docs/docs/sourcing-from-netlify-cms.md @@ -79,9 +79,9 @@ collections: Then in your terminal run `gatsby develop` to start the Gatsby development server. Once the server is running, it will print the address to open for -viewing. It's typically `localhost:8000`. Open that in a browser and you should see the text +viewing. It's typically `http://localhost:8000`. Open that in a browser and you should see the text "Hello World" in the top left corner. Now navigate to `/admin/` - so if your site is at -`localhost:8000`, go to `localhost:8000/admin/`. **The trailing slash is required!** +`http://localhost:8000`, go to `http://localhost:8000/admin/`. **The trailing slash is required!** You should now be viewing your Netlify CMS instance. You defined a "blog" collection in the configuration above, so you can create new blogs, but Netlify CMS will only store them in memory - diff --git a/docs/docs/sourcing-from-wordpress.md b/docs/docs/sourcing-from-wordpress.md index ba05cc8381cf4..14c65a5c52520 100644 --- a/docs/docs/sourcing-from-wordpress.md +++ b/docs/docs/sourcing-from-wordpress.md @@ -120,7 +120,7 @@ A [Gatsby page is defined](/docs/api-specification/#concepts) as "a site page wi When you restart your server with the `gatsby develop` command, you'll be able to navigate to the new pages created for each of your posts at their respective paths. -In the GraphiQL IDE at [localhost:8000/\_\_graphql](http://localhost:8000/__graphql) you should now see queryable fields for `allWordpressPosts` in the docs or explorer sidebar. +In the GraphiQL IDE at `http://localhost:8000/__graphql` you should now see queryable fields for `allWordpressPosts` in the docs or explorer sidebar. ## Wrapping up diff --git a/docs/docs/testing-components-with-graphql.md b/docs/docs/testing-components-with-graphql.md index 0444ff842a949..2c66afbdd229e 100644 --- a/docs/docs/testing-components-with-graphql.md +++ b/docs/docs/testing-components-with-graphql.md @@ -72,7 +72,7 @@ describe("Index", () => This should fix the `StaticQuery` error, but in a more real-world example you may also be using a page query with the `graphql` helper from Gatsby. In this case, there is no GraphQL data being passed to the component. You can pass this in too, but the structure is a little more complicated. Luckily there's a way to get some suitable data. Run `npm run develop` and go to -http://localhost:8000/___graphql to load the GraphiQL IDE. You can now get the +`http://localhost:8000/___graphql` to load the GraphiQL IDE. You can now get the right data using the same query that you used on the page. If it is a simple query with no fragments you can copy it directly. That is the case here, run this query copied from the index page: diff --git a/docs/docs/troubleshooting-common-errors.md b/docs/docs/troubleshooting-common-errors.md index 2cfaf53960e68..5b3d5258b56ce 100644 --- a/docs/docs/troubleshooting-common-errors.md +++ b/docs/docs/troubleshooting-common-errors.md @@ -79,7 +79,7 @@ Gatsby's GraphQL data layer provides access to build time data, there are someti ### Unknown field 'A' on type 'B' -If the data you are requesting in a GraphQL query differs from what has been [sourced](/docs/content-and-data/) in the GraphQL schema you might encounter an error like `Unknown field 'A' on type 'B'`. As the error suggests, a field you are asking for is not defined under the type that is listed. If your site is still building okay, you can open up `localhost:8000/___graphql` and examine your schema, which includes the definition of what fields are included on the type provided by the error. This can help you identify what fields aren't being created and locate where those fields should be created, whether by a plugin or in your code. +If the data you are requesting in a GraphQL query differs from what has been [sourced](/docs/content-and-data/) in the GraphQL schema you might encounter an error like `Unknown field 'A' on type 'B'`. As the error suggests, a field you are asking for is not defined under the type that is listed. If your site is still building okay, you can open up `http://localhost:8000/___graphql` and examine your schema, which includes the definition of what fields are included on the type provided by the error. This can help you identify what fields aren't being created and locate where those fields should be created, whether by a plugin or in your code. If the error is describing an `Unknown field 'X' on type 'Query'`, the content type you are trying to source is likely not processing correctly. The `Query` type represents the top-level root queries that are included in the GraphQL schema. Source plugins will often create root nodes that you can query like `mdx` (created by `gatsby-plugin-mdx`) or for a collection of root nodes like `allFile` (created by `gatsby-source-filesystem`). @@ -103,7 +103,7 @@ Some ideas for debugging these errors include verifying the following: - the structure of your content being sourced matches your GraphQL schema as well as the way you are querying the data -Comparing your GraphQL query to your site's schema in [GraphiQL at `localhost:8000/___graphql`](http://localhost:8000/___graphql) and whatever plugin or code you are using to source data is a great way to find these errors as they should all express the data in the same shape. +Comparing your GraphQL query to your site's schema in `http://localhost:8000/___graphql` and whatever plugin or code you are using to source data is a great way to find these errors as they should all express the data in the same shape. - neither any source plugins you are using nor your own implementation of the [`sourceNodes` API](/docs/node-apis/#sourceNodes) are misconfigured diff --git a/docs/docs/using-graphql-playground.md b/docs/docs/using-graphql-playground.md index 5fdc13b982514..84c8d9d18caa5 100644 --- a/docs/docs/using-graphql-playground.md +++ b/docs/docs/using-graphql-playground.md @@ -18,7 +18,7 @@ To access this experimental feature utilizing GraphQL Playground with Gatsby, ad "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop", ``` -Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on +Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `http://localhost:8000/___graphql` To still be able to use `gatsby develop` you would require the dotenv package to your gatsby-config.js file and add an [environment variable](/docs/environment-variables/) file, typically called `.env.development`. Finally, add `GATSBY_GRAPHQL_IDE=playground` to the `.env.development` file. diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index e64dd2e981fe4..f578392ec384c 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -45,7 +45,7 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -After running `gatsby develop`, you’ll see the following at `localhost:8000/no-data/`: +After running `gatsby develop`, you’ll see the following at `http://localhost:8000/no-data/`: ![Screenshot of the page generated by the previous code snippet.](./images/why-gql-no-data.png) @@ -94,7 +94,7 @@ const WithContext = ({ pageContext }) => ( export default WithContext ``` -Start the development server with `gatsby develop` and visit `localhost:8000/page-with-context/` to see the created page: +Start the development server with `gatsby develop` and visit `http://localhost:8000/page-with-context/` to see the created page: ![Screenshot of a page with hard-coded context.](./images/why-gql-with-context.png) @@ -180,7 +180,7 @@ const Product = ({ pageContext }) => ( export default Product ``` -Run `gatsby develop`, then open `localhost:8000/product/space-socks/` to see one of the generated products. +Run `gatsby develop`, then open `http://localhost:8000/product/space-socks/` to see one of the generated products. ![Screenshot of a rendered product page.](./images/why-gql-product-json.png) @@ -376,7 +376,7 @@ A few notes about this file: 3. The query uses a [GraphQL fragment](/packages/gatsby-image/#fragments) to query all the required data for optimized images. GraphQL fragments _do not work_ in the GraphQL Playground. 4. The `img` tag has been swapped out for a `gatsby-image` component named `Image`. Instead of a `src` attribute, it accepts an object with optimized image data. -Save this file, run `gatsby develop`, then open `localhost:8000/gql/purple-hat/`: +Save this file, run `gatsby develop`, then open `http://localhost:8000/gql/purple-hat/`: ![Lazy loaded image of an angry cat wearing the purple hat.](./images/why-gql-images.gif) diff --git a/docs/tutorial/blog-netlify-cms-tutorial/index.md b/docs/tutorial/blog-netlify-cms-tutorial/index.md index 63c20fe958697..818019263fe57 100644 --- a/docs/tutorial/blog-netlify-cms-tutorial/index.md +++ b/docs/tutorial/blog-netlify-cms-tutorial/index.md @@ -30,7 +30,7 @@ cd [your-project-name] gatsby develop ``` -Now you can go to [`localhost:8000`](http://localhost:8000) to see your new site, but what's extra cool is that Netlify CMS is pre-installed and you can access it at [`localhost:8000/admin`](http://localhost:8000/admin). +Now you can go to `http://localhost:8000` to see your new site, but what's extra cool is that Netlify CMS is pre-installed and you can access it at `http://localhost:8000/admin` A CMS, or content management system, is useful because you can add content like blog posts from a dashboard on your site, instead of having to add posts manually with Markdown. However, you'll likely want to be able to access the CMS from a deployed website, not just locally. For that, you'll need to deploy to Netlify through GitHub, set up continuous deployment, and do a few configurations. You'll go over this in [Step-5](#step-5). diff --git a/docs/tutorial/building-a-theme.md b/docs/tutorial/building-a-theme.md index e7a17a346dad2..2e561db8b602f 100644 --- a/docs/tutorial/building-a-theme.md +++ b/docs/tutorial/building-a-theme.md @@ -632,9 +632,9 @@ To test that the root path (`"/"`) and individual event pages are building succe yarn workspace gatsby-theme-events develop ``` -You should see the placeholder `events.js` component at [localhost:8000](http://localhost:8000/). +You should see the placeholder `events.js` component at `http://localhost:8000/`. -If you hit [http://localhost:8000/404](http://localhost:8000/404) (for example -- or any route that doesn't exist) you should see a listing of event pages, all building with the placeholder `event.js` component. +If you hit `http://localhost:8000/404` (for example -- or any route that doesn't exist) you should see a listing of event pages, all building with the placeholder `event.js` component. ## Display sorted data with `useStaticQuery` @@ -764,7 +764,7 @@ const EventsTemplate = () => { export default EventsTemplate ``` -To test that it's working, open up [localhost:8000](http://localhost:8000/) again. You should see the "Gatsby Events Theme" header from `` component, and the stringified event data from the `` component. +To test that it's working, open up `http://localhost:8000/` again. You should see the "Gatsby Events Theme" header from `` component, and the stringified event data from the `` component. ![The root path view, with a header of "Gatsby Events Theme", and stringified JSON event data](./images/building-a-theme-events-page-data.png) @@ -809,7 +809,7 @@ export default EventList - The date of the event - The location of the event -Checking [localhost:8000](http://localhost:8000/) again, you should see the new markup: +Checking `http://localhost:8000/` again, you should see the new markup: ![The events page, shown with markup defined](./images/building-a-theme-events-page-markup.png) @@ -1081,13 +1081,13 @@ yarn workspace site develop Once this is running, you'll observe two things: 1. An "events" directory has automatically been generated for you in `site/events`. -2. If you hit [localhost:8000/404](http://localhost:8000/404) (or any other route that doesn't exist), you'll see that the site has created an `/events` page. +2. If you hit `http://localhost:8000/404` (or any other route that doesn't exist), you'll see that the site has created an `/events` page. However, you don't have any event data in the site. Copy the `events.yml` file from `gatsby-theme-events/data` into `site/events`. Then, restart the dev server: ![Running the site, the basepath is now `/events`](./images/building-a-theme-changed-basepath.png) -The events listing page will now be accessible at [http://localhost:8000/events](http://localhost:8000/events). Hitting [the root path](http://localhost:8000/) will return a 404. +The events listing page will now be accessible at `http://localhost:8000/events`. Hitting `http://localhost:8000/` will return a 404. ## Make themes extendable with gatsby-plugin-theme-ui diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 613ba5725d718..12ee6b7fec175 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -99,9 +99,9 @@ module.exports = { ### See your site hot reload in the browser! -Run `npm run develop` in the terminal, which starts a development server and reloads changes you make to your site so you can preview them in the browser. Open up your browser to [localhost:8000](http://localhost:8000/) and you should see a default homepage. +Run `npm run develop` in the terminal, which starts a development server and reloads changes you make to your site so you can preview them in the browser. Open up your browser to `http://localhost:8000/` and you should see a default homepage. -> **NOTE**: If you have already started your Gatsby development server using `npm run develop`, you will need to restart the server by pressing CTRL + C in the terminal where the command was run and running `npm run develop` again to see changes in your `gatsby-config.js` reflected on [localhost:8000](http://localhost:8000/) +> **NOTE**: If you have already started your Gatsby development server using `npm run develop`, you will need to restart the server by pressing CTRL + C in the terminal where the command was run and running `npm run develop` again to see changes in your `gatsby-config.js` reflected on `http://localhost:8000/` ### How does the StripeJS plugin work? @@ -284,7 +284,7 @@ const IndexPage = () => ( export default IndexPage ``` -If you go back to [localhost:8000](http://localhost:8000/) in your browser and you have `npm run develop` running, you should now see a big, enticing "BUY MY BOOK" button. C'mon and give it a click! +If you go back to `http://localhost:8000/` in your browser and you have `npm run develop` running, you should now see a big, enticing "BUY MY BOOK" button. C'mon and give it a click! ### Advanced: Import SKUs via source plugin @@ -383,7 +383,7 @@ export default props => ( ) ``` -You can validate your query and see what data is being returned in GraphiQL, which is available at http://localhost:8000/___graphql when running `npm run develop`. +You can validate your query and see what data is being returned in GraphiQL, which is available at `http://localhost:8000/___graphql` when running `npm run develop`. Once you're happy with your query, create a new page where you can import the newly created Sku component: @@ -406,7 +406,7 @@ const AdvancedExamplePage = () => ( export default AdvancedExamplePage ``` -When navigating to http://localhost:8000/advanced/ you should now see a list of paragraphs with your SKU names. +When navigating to `http://localhost:8000/advanced/` you should now see a list of paragraphs with your SKU names. #### Create a component that presents a single SKU diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index cd4583c523b6b..49d500149a579 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -44,7 +44,7 @@ gatsby build gatsby serve ``` -Once this starts, you can view your site at [`localhost:9000`](http://localhost:9000). +Once this starts, you can view your site at `http://localhost:9000`. ### Run a Lighthouse audit diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index a402d0c8d57c4..fad8ced4aaff5 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -209,7 +209,7 @@ export const query = graphql` ` ``` -And now visit [http://localhost:8000/my-files](http://localhost:8000/my-files)… 😲 +And now visit `http://localhost:8000/my-files`… 😲 ![my-files-page](my-files-page.png) diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 1fb81d38d78cc..6f57915c1dbee 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -165,7 +165,7 @@ export default () => ( ) ``` -2. Navigate to http://localhost:8000/about/. +2. Navigate to `http://localhost:8000/about/` ![New about page](05-about-page.png) diff --git a/docs/tutorial/part-zero/index.md b/docs/tutorial/part-zero/index.md index 6ce7dfdef7699..cf22b12e1ce7d 100644 --- a/docs/tutorial/part-zero/index.md +++ b/docs/tutorial/part-zero/index.md @@ -155,15 +155,15 @@ gatsby develop ### View your site locally -Open up a new tab in your browser and navigate to [**http://localhost:8000**](http://localhost:8000/). +Open up a new tab in your browser and navigate to `http://localhost:8000/` ![Check homepage](04-home-page.png) Congrats! This is the beginning of your very first Gatsby site! 🎉 -You’ll be able to visit the site locally at [**_http://localhost:8000_**](http://localhost:8000/) for as long as your development server is running. That’s the process you started by running the `gatsby develop` command. To stop running that process (or to “stop running the development server”), go back to your terminal window, hold down the “control” key, and then hit “c” (ctrl-c). To start it again, run `gatsby develop` again! +You’ll be able to visit the site locally at `http://localhost:8000/` for as long as your development server is running. That’s the process you started by running the `gatsby develop` command. To stop running that process (or to “stop running the development server”), go back to your terminal window, hold down the “control” key, and then hit “c” (ctrl-c). To start it again, run `gatsby develop` again! -**Note:** If you are using VM setup like `vagrant` and/or would like to listen on your local IP address, run `gatsby develop --host=0.0.0.0`. Now, the development server listens on both 'localhost' and your local IP. +**Note:** If you are using VM setup like `vagrant` and/or would like to listen on your local IP address, run `gatsby develop --host=0.0.0.0`. Now, the development server listens on both `http://localhost` and your local IP. ## Set up a code editor diff --git a/docs/tutorial/prismic-source-graphql-tutorial.md b/docs/tutorial/prismic-source-graphql-tutorial.md index 4ced53836c26a..9e107765e96fc 100644 --- a/docs/tutorial/prismic-source-graphql-tutorial.md +++ b/docs/tutorial/prismic-source-graphql-tutorial.md @@ -49,7 +49,7 @@ You will setup the Gatsby source plugin so it can fetch data from the Prismic re }, ``` -If you run `gatsby develop` now, you should be able to access the data from Prismic through the GraphiQL interface in [`http://localhost:8000/___graphql`](http://localhost:8000/___graphql). You can check this by trying a query that uses the Prismic source. +If you run `gatsby develop` now, you should be able to access the data from Prismic through the GraphiQL interface in `http://localhost:8000/___graphql`. You can check this by trying a query that uses the Prismic source. ```graphql { @@ -135,7 +135,7 @@ export default ({ data }) => { } ``` -Save the file and check on your site running at [`http://localhost:8000`](http://localhost:8000) +Save the file and check on your site running at `http://localhost:8000` You can use the helper function `RichText` to [render formatted text](https://prismic.io/docs/reactjs/rendering/rich-text) and generally, this is the process you will use to query your Prismic repository and then render it. You can clean this up and include a function that will render the array of queried blog posts. @@ -305,7 +305,7 @@ And with this last step you should be able to see all of your blog posts rendere One of the most exciting features that this Gatsby Prismic source plugin provides is the ability to preview changes to your documents without having to publish them or rebuild your Gatsby app. To activate this, you first need to setup an endpoint in your Prismic repository. -In your repository, go to **Settings > Previews > Create a New Preview** and fill in the fields for your setup. For a default local development environment, you should use [`http://localhost:8000`](http://localhost:8000) as the Domain, with `/preview` as the optional Link Resolver. Don't worry about including the toolbar script, the plugin will take care of it. +In your repository, go to **Settings > Previews > Create a New Preview** and fill in the fields for your setup. For a default local development environment, you should use `http://localhost:8000` as the Domain, with `/preview` as the optional Link Resolver. Don't worry about including the toolbar script, the plugin will take care of it. Finally, return to your Gatsby configuration file to activate the feature. diff --git a/docs/tutorial/wordpress-image-tutorial.md b/docs/tutorial/wordpress-image-tutorial.md index 082b34310cb58..5f00ed65c5859 100644 --- a/docs/tutorial/wordpress-image-tutorial.md +++ b/docs/tutorial/wordpress-image-tutorial.md @@ -129,7 +129,7 @@ Run: npm run develop ``` -Open localhost:8000 and localhost:8000/\_\_\_graphql. +Open `http://localhost:8000` and `http://localhost:8000/___graphql`. Here’s an example of creating specific widths and heights for images: diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 6bffbb6ce4466..8dad27ede6a59 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -112,7 +112,7 @@ Run: gatsby develop ``` -In your browser, open localhost:8000 to see your site, and open localhost:8000/\_\_\_graphql so that you can create your GraphQL queries. +In your browser, open `http://localhost:8000` to see your site, and open `http://localhost:8000/___graphql` so that you can create your GraphQL queries. As an exercise, try re-creating the following queries in your GraphiQL explorer. This first query will pull in the blogpost content from WordPress: @@ -194,7 +194,7 @@ export const pageQuery = graphql` //highlight-end ``` -Save these changes and look at localhost:8000 to see your new homepage with a list of sorted blog posts! +Save these changes and look at `http://localhost:8000` to see your new homepage with a list of sorted blog posts! ![WordPress home after query](./images/wordpress-source-plugin-home.jpg) @@ -322,7 +322,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like [http://localhost:8000/asdf](http://localhost:8000/asdf), you should see the two sample posts created and be able to click on them to go to the sample posts: +You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like `http://localhost:8000/asdf`, you should see the two sample posts created and be able to click on them to go to the sample posts: ![Sample post links](./images/wordpress-source-plugin-sample-post-links.gif) diff --git a/examples/using-page-loading-indicator/README.md b/examples/using-page-loading-indicator/README.md index 736fba710ce52..fa691a5474420 100644 --- a/examples/using-page-loading-indicator/README.md +++ b/examples/using-page-loading-indicator/README.md @@ -8,6 +8,6 @@ Then you'll need to open up the chrome (or equivalent in other browsers) devtools and go to the Network tab. There where it says "No throttling" along the top, click that and use the "Slow 3G" preset (or an equivalent slow speed). -Then open the built site (generally at localhost:9000) and (important) wait +Then open the built site (generally at `http://localhost:9000`) and (important) wait until the initial four JavaScript files are downloaded then click on the "Page 2" link and after a second, you'll see the nprogress bar along the top come in. diff --git a/packages/gatsby-graphiql-explorer/README.md b/packages/gatsby-graphiql-explorer/README.md index fae0ad4bd8cb7..16c9e475d88ad 100644 --- a/packages/gatsby-graphiql-explorer/README.md +++ b/packages/gatsby-graphiql-explorer/README.md @@ -2,7 +2,7 @@ A package to extend the default [GraphiQL][graphiql] IDE with useful features for Gatsby users. -_Note:_ accessible at http://localhost:8000/___graphql after running `gatsby develop` +_Note:_ accessible at `http://localhost:8000/___graphql` after running `gatsby develop` ![Gatsby GraphiQL Explorer](./assets/gatsby-graphiql-explorer.png) diff --git a/packages/gatsby-transformer-yaml/README.md b/packages/gatsby-transformer-yaml/README.md index 5d41aa331abfd..40a591b958445 100644 --- a/packages/gatsby-transformer-yaml/README.md +++ b/packages/gatsby-transformer-yaml/README.md @@ -120,7 +120,7 @@ Then the following three nodes would be created. ## How to query -You can query the nodes using GraphQL, like from the GraphiQL browser: `localhost:8000/___graphql`. +You can query the nodes using GraphQL, like from the GraphiQL browser: `http://localhost:8000/___graphql`. Regardless of whether you choose to structure your data in arrays of objects or single objects, you'd be able to query your letters like: diff --git a/starters/gatsby-starter-theme-workspace/example/README.md b/starters/gatsby-starter-theme-workspace/example/README.md index 74e6437186f43..20cdfaff0e494 100644 --- a/starters/gatsby-starter-theme-workspace/example/README.md +++ b/starters/gatsby-starter-theme-workspace/example/README.md @@ -2,5 +2,5 @@ A usage of [gatsby-theme-minimal](https://github.com/ChristopherBiscardi/gatsby-theme-minimal) -that does nothing but use the theme. As a result you will see `Error: Missing resources for /` when navigating to `localhost:8000`. To get +that does nothing but use the theme. As a result you will see `Error: Missing resources for /` when navigating to `http://localhost:8000`. To get rid of that, create a page in `src/pages/index.js`.