chore(docs): migrate back to global installs (gatsbyjs#12245)

* Remove npx fom bug report template

* Remove npx from question issue template

* Revert npx in README

* Remove npx references in docs/blog

* Remove references to npx in docs/docs

* Remove npx from e2e-tests directory

* Remove npx references from examples/

* Remove npx from packages/

* Remove npx from starters directory

* Add global Gatsby CLI installation instructions via npm

.github/ISSUE_TEMPLATE/bug_report.md

@@ -31,4 +31,4 @@ What happened.
 
 ### Environment
 
-Run `npx gatsby info --clipboard` in your project directory and paste the output here.
+Run `gatsby info --clipboard` in your project directory and paste the output here.

.github/ISSUE_TEMPLATE/question.md

@@ -28,7 +28,7 @@ about: Usage question or discussion about Gatsby.
 ### Environment (if relevant)
 
 <!--
-  Required. Run `npx gatsby info --clipboard` in your gatsby project directory and paste its contents here.
+  Required. Run `gatsby info --clipboard` in your gatsby project directory and paste its contents here.
 -->
 
 ### File contents (if changed)

README.md

@@ -99,7 +99,7 @@ You can get a new Gatsby site up and running on your local dev environment in 5
 
     ```sh
     # create a new Gatsby site using the default starter
-    npx gatsby new my-blazing-fast-site
+    gatsby new my-blazing-fast-site
     ```
 
 2.  **Start the site in `develop` mode.**

docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md

@@ -39,7 +39,7 @@ Gatsby ships with a great CLI (command line interface) that contains the
 functionality of scaffolding out a working site, as well as commands to help
 develop the site once created.
 
-`npx gatsby new personal-blog && cd $_`
+`gatsby new personal-blog && cd $_`
 
 This command will create the folder `personal-blog` and then change into that
 directory. A working `gatsby` statically generated application can now be

docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md

@@ -82,7 +82,7 @@ are many ways you could do this but I'll go over what I did.
 To get all the Gatsby files you can use the Gatsby CLI.
 
 ```yaml
-npx gatsby new temp-gatsby-files # Initialize gatsby in a temp directory
+gatsby new temp-gatsby-files # Initialize gatsby in a temp directory
 cp -R temp-gatsby-files/* ./ # Copy all the files into your root directory
 rm -rf temp-gatsby-files     # Remove the temp directory
 ```

docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md

@@ -15,7 +15,7 @@ I recently decided to tackle a redo of my blog. I wanted to do something differ
 
 I generated a new site using the [default starter](https://github.com/gatsbyjs/gatsby-starter-default) and read through what it gave me. Assuming you have the [Gatsby CLI](/docs/) installed, run:
 
-`npx gatsby new gatsby-example-site`
+`gatsby new gatsby-example-site`
 
 That gets us a new site directory with a couple (mostly) empty "gatsby"-prefixed files and a src directory with some basic scaffolding. The configuration and lifecycle hooks for Gatsby get put in those "gatsby"-prefixed files, `gatsby-config.js`, `gatsby-node.js` and `gatsby-browser.js`.
 

docs/blog/2018-04-04-gatsby-contentful-starter-tutorial/index.md

@@ -33,7 +33,7 @@ This guide assumes that you have [GatsbyJS installed](/docs/) and, optionally, a
 Start by using this with the Gatsby CLI:
 
 ```bash
-npx gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter
+gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter
 ```
 
 Alternatively, you can also clone a sample repo from GitHub:

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

@@ -39,7 +39,7 @@ npm install --global gatsby-cli
 Create a new site based on the Gatsby Cosmic JS starter:
 
 ```bash
-npx gatsby new gatsby-blog-cosmicjs
+gatsby new gatsby-blog-cosmicjs
 ```
 
 Enter in your project's folder:

docs/blog/2018-06-08-life-after-layouts/index.md

@@ -122,7 +122,7 @@ For a full list of what's new, check out our [V2 migration guide](/docs/migratin
 - You can get started using Gatsby V2 right now by installing our V2 default starter:
 
   ```
-  npx gatsby new my-gatsby-v2-site https://github.com/gatsbyjs/gatsby-starter-default
+  gatsby new my-gatsby-v2-site https://github.com/gatsbyjs/gatsby-starter-default
   ```
 
   Huge thanks to [Yuki Takemoto](https://github.com/mottox2) for upgrading the starter to V2!

docs/blog/2018-07-07-graphic-design-class/index.md

@@ -69,7 +69,7 @@ Here’s a list of what they love about Gatsby:
 * _Docs:_ While not perfect, the Gatsby tutorial and documentation. was “approachable”
 * _Speed_: They never heard of static site generators or the JAMstack, but the speed immediately impressed them
 * _Built off previous knowledge:_ They were able to use the routing knowledge they gleaned from NextJS
-* _Uses simple commands:_ They work locally and type `$ npm run develop`. A server opens up and they see and can edit their site in real time. Easy peasy. They want to build for production they use `$ npx gatsby build && npx gatsby serve`. Simple!
+* _Uses simple commands:_ They work locally and type `$ npm run develop`. A server opens up and they see and can edit their site in real time. Easy peasy. They want to build for production they use `$ gatsby build && gatsby serve`. Simple!
 * _Netlify:_ When I showed them Netlify and how they could quickly (and freely) push their site to GitHub and hook it up to Netlify so that it would automatically build it and make their site live! They were blown away.
 * _Fast to build:_ They were able to create their final projects in 3 weeks
 

docs/blog/2018-08-24-gatsby-aws-hosting/index.md

@@ -26,7 +26,7 @@ npm install --global gatsby-cli
 Next, we'll create a new Gatsby site:
 
 ```sh
-npx gatsby new my-gatsby-site
+gatsby new my-gatsby-site
 ```
 
 Finally, change into the new site directory:

docs/blog/2018-1-18-strapi-and-gatsby/index.md

@@ -144,7 +144,7 @@ $ npm install --global gatsby-cli
 In the folder `gatsby-strapi-tutorial` that you previously created, generate your brand new blog:
 
 ```bash
-$ npx gatsby new blog
+$ gatsby new blog
 ```
 
 ### Start in development mode

docs/blog/2018-10-26-export-a-drupal-site-to-gatsby/index.md

@@ -19,7 +19,7 @@ mysqldump --skip-extended-insert --compact DB_name > dump_mysql.sql
 To do this yourself, you'll build a simple blog using the excellent [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) project. Create a new project and then add a [sqlite library](https://github.com/JoshuaWise/better-sqlite3) as a dev dependency:
 
 ```
-npx gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
+gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
 git init # so you can keep track of the changes
 npm i --save-dev better-sqlite3
 ```

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

@@ -19,7 +19,7 @@ $ npm install --global gatsby-cli
 Then, still in your Terminal, head over to a folder you'd want to get started in and type in:
 
 ```terminal
-$ npx gatsby new GatsbyLightbox https://github.com/gatsbyjs/gatsby-starter-default
+$ gatsby new GatsbyLightbox https://github.com/gatsbyjs/gatsby-starter-default
 ```
 
 Once it's done scaffolding the starter application, type in:

docs/blog/2018-11-05-deploying-gatsby-to-azure/index.md

@@ -45,7 +45,7 @@ Next you will create the blog from the handy [Gatsby Starter Blog](https://githu
 From your terminal run
 
 ```bash
-$ npx gatsby new azure-blog https://github.com/gatsbyjs/gatsby-starter-blog
+$ gatsby new azure-blog https://github.com/gatsbyjs/gatsby-starter-blog
 
 info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-blog.git
 Cloning into 'azure-blog'...

docs/blog/2019-01-31-using-react-context-api-with-gatsby/index.md

@@ -22,7 +22,7 @@ Let's do a deep dive into how this feature was actually implemented step by step
 
 First of all, you have to initialize a Gatsby project and start it in develop mode.
 
-1. npx gatsby new gatsby-dark-mode
+1. gatsby new gatsby-dark-mode
 1. cd gatsby-dark-mode
 1. npm start
 

docs/docs/adding-search-with-js-search.md

@@ -17,7 +17,7 @@ The full code and documentation for this library is [available on GitHub](https:
 You'll start by creating a new Gatsby site based on the official _hello world_ starter. Open up a terminal and run the following command:
 
 ```bash
-npx gatsby new js-search-example https://github.com/gatsbyjs/gatsby-starter-default
+gatsby new js-search-example https://github.com/gatsbyjs/gatsby-starter-default
 ```
 
 After the process is complete, some additional packages are needed.

docs/docs/authentication-tutorial.md

@@ -17,7 +17,7 @@ In production, you should use a tested and robust solution to handle the authent
 Start by creating a new Gatsby project using barebones `hello-world` starter:
 
 ```shell
-npx gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world
+gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world
 cd gatsby-auth
 ```
 

docs/docs/centralizing-your-sites-navigation.md

@@ -15,7 +15,7 @@ What this section will cover:
 
 You will be using `gatsby-config.js` to store the data for your links. `gatsby-config.js` is a file used for configuring Gatsby, located in the root path of every Gatsby project. A plain old JavaScript object is exported from this file; this object contains the `siteMetadata` object which you can query through graphql when generating your static pages.
 
-This guide will use the Gatsby starter project `gatsby-starter-default`, which can be downloaded through the Gatsby command line interface tool using the command `npx gatsby new [project-name] https://github.com/gatsbyjs/gatsby-starter-default`.
+This guide will use the Gatsby starter project `gatsby-starter-default`, which can be downloaded through the Gatsby command line interface tool using the command `gatsby new [project-name] https://github.com/gatsbyjs/gatsby-starter-default`.
 
 ### Creating the link data
 

docs/docs/creating-global-styles.md

@@ -19,7 +19,7 @@ The best way to add global styles is with a [shared layout component](/tutorial/
 To create a shared layout with global styles, start by creating a new Gatsby site with the [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world).
 
 ```shell
-npx gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 Open your new site in your code editor and create a new directory at `/src/components`. Inside, create two new files:
@@ -73,7 +73,7 @@ Run `npm run develop` and you’ll see the global styles applied.
 To start, create a new Gatsby site with the [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) and install [`gatsby-plugin-emotion`](/packages/gatsby-plugin-emotion/) and its dependencies:
 
 ```shell
-npx gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd global-styles
 npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
 ```
@@ -133,7 +133,7 @@ In some cases, using a shared layout component is not desirable. In these cases,
 First, open a new terminal window and run the following commands to create a new default Gatsby site and start the development server:
 
 ```shell
-npx gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default
+gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default
 cd global-style-tutorial
 npm run develop
 ```

docs/docs/deploying-to-netlify.md

@@ -24,7 +24,7 @@ npm install --global gatsby-cli
 Next, we'll create a new Gatsby site:
 
 ```shell
-npx gatsby new my-gatsby-site
+gatsby new my-gatsby-site
 ```
 
 Finally, change into the new site directory:

docs/docs/deploying-to-now.md

@@ -17,7 +17,7 @@ npm install --global gatsby-cli
 Then generate a project with the following command:
 
 ```shell
-npx gatsby new <your project name>
+gatsby new <your project name>
 ```
 
 ## Step 2: Getting Now

docs/docs/deploying-to-s3-cloudfront.md

@@ -16,7 +16,7 @@ npm install --global gatsby-cli
 Next, we'll create a new Gatsby site:
 
 ```shell
-npx gatsby new my-gatsby-site
+gatsby new my-gatsby-site
 ```
 
 Finally, change into the new site directory:

docs/docs/ecommerce-tutorial/index.md

@@ -49,7 +49,7 @@ Stripe offers a [hosted checkout](https://stripe.com/docs/payments/checkout) tha
 Create a new Gatsby project by running the `gatsby new` command in the terminal and change directories into the new project you just started:
 
 ```shell
-npx gatsby new ecommerce-gatsby-tutorial
+gatsby new ecommerce-gatsby-tutorial
 cd ecommerce-gatsby-tutorial
 ```
 

docs/docs/emotion.md

@@ -11,7 +11,7 @@ Emotion is a performant and flexible CSS-in-JS library. Building on many other C
 First, open a new terminal window and run the following to create a new site:
 
 ```shell
-npx gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 Second, install the necessary dependencies for Emotion and Gatsby.

docs/docs/gatsby-cli.md

@@ -28,15 +28,13 @@ Now we have the `develop` script available to be used which will use our package
 
 ## How to use
 
-By using [npx](https://www.npmjs.com/package/npx) you can utilize the Gatsby command line tool without installing it globally. This lets you scaffold a project with just one command!
+The Gatsby CLI is available via [npm](https://www.npmjs.com/) and should be installed globally by running `npm install -g gatsby-cli` to use it locally.
 
-For example you can run `npx gatsby new your-site-name` to generate a new Gatsby site.
-
-Run `npx gatsby --help` for full help.
+Run `gatsby --help` for full help.
 
 ### `new`
 
-`npx gatsby new gatsby-site`
+`gatsby new gatsby-site`
 
 See the [Gatsby starters docs](/docs/starters/)
 for a comprehensive list of starters to get started with Gatsby.
@@ -92,7 +90,7 @@ At the root of a Gatsby site, serve the production build of your site for testin
 
 At the root of a Gatsby site, get helpful environment information which will be required when reporting a bug:
 
-`npx gatsby info`
+`gatsby info`
 
 #### Options
 

docs/docs/glamor.md

@@ -16,7 +16,7 @@ With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to
 First, open a new terminal window and run the following to create a new site:
 
 ```shell
-npx gatsby new glamor-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new glamor-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 Second, install the necessary dependencies for Glamor and Gatsby.

docs/docs/image-tutorial.md

@@ -19,7 +19,7 @@ First you’ll need to install the `gatsby-source-wordpress` plugin that has ima
 Create a new Gatsby project and change directories into the new project you just created:
 
 ```shell
-npx gatsby new images-tutorial-site
+gatsby new images-tutorial-site
 cd images-tutorial-site
 ```
 

docs/docs/migrating-from-v1-to-v2.md

@@ -1030,17 +1030,17 @@ _Starters:_ If you'd rather use one of the official starters, install your favou
 `gatsby-starter-default` with v2:
 
 ```
-npx gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default
+gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default
 ```
 
 `gatsby-starter-hello-world` with v2:
 
 ```
-npx gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 `gatsby-starter-blog` with v2:
 
 ```
-npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
+gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
 ```

docs/docs/quick-start.md

@@ -15,7 +15,7 @@ Video hosted on [egghead.io][egghead].
 ### Create a new site.
 
 ```shell
-npx gatsby new gatsby-site
+gatsby new gatsby-site
 ```
 
 ### Change directories into site folder.
@@ -52,6 +52,6 @@ Gatsby starts a local HTML server for testing your built site. Remember to build
 
 ### Access documentation for CLI commands.
 
-To see detailed documentation for the CLI commands, run `npx gatsby --help` in the terminal.
+To see detailed documentation for the CLI commands, run `gatsby --help` in the terminal.
 
-For specific commands, run `npx gatsby COMMAND_NAME --help` e.g. `npx gatsby new --help`.
+For specific commands, run `gatsby COMMAND_NAME --help` e.g. `gatsby new --help`.

docs/docs/source-plugin-tutorial.md

@@ -53,7 +53,7 @@ Your plugin will have the following behavior:
 Create a new Gatsby project and change directories into the new project you just created.
 
 ```shell
-npx gatsby new source-tutorial-site https://github.com/gatsbyjs/gatsby-starter-default
+gatsby new source-tutorial-site https://github.com/gatsbyjs/gatsby-starter-default
 cd source-tutorial-site
 ```
 

docs/docs/sourcing-from-buttercms.md

@@ -32,7 +32,7 @@ For example, if you wanted to enable a non-technical person to be able to add cu
 
 Run this in your terminal:
 
-`npx gatsby new butter-site`
+`gatsby new butter-site`
 
 ## Install the source plugin
 

docs/docs/sourcing-from-netlify-cms.md

@@ -31,7 +31,7 @@ directory called `netlify-cms-tutorial` that contains the starter site, but you
 "netlify-cms-tutorial" in the command below to be whatever you like.
 
 ```shell
-npx gatsby new netlify-cms-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new netlify-cms-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 Now move into the newly created directory and install the Gatsby plugin for Netlify CMS:

docs/docs/sourcing-from-prismic.md

@@ -31,7 +31,7 @@ In order for Gatsby to grab all information from Prismic you'll need to generate
 First, open a new terminal window and run the following command to create a new site:
 
 ```shell
-npx gatsby new prismic-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new prismic-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 This will create a new directory called `prismic-tutorial` that contains the starters site, but you can change `prismic-tutorial` in the command above to whatever name you prefer!

docs/docs/starters.md

@@ -4,15 +4,15 @@ title: "Gatsby Starters"
 
 The Gatsby CLI tool lets you install “starters”. These are boilerplate Gatsby sites maintained by the community.
 
-`npx gatsby new` helps you start your project by cloning the boilerplate, installing dependencies, and clearing Git history.
+`gatsby new` helps you start your project by cloning the boilerplate, installing dependencies, and clearing Git history.
 
 When creating a new site, you can optionally specify a starter to base your new site on e.g.
 
-`npx gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]`
+`gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]`
 
 For example, to quickly create a blog using Gatsby, you could install the Gatsby Starter Blog by running:
 
-`npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog`
+`gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog`
 
 This downloads the files and initializes the site by running `npm install`
 

docs/docs/styled-components.md

@@ -17,7 +17,7 @@ Video hosted on [egghead.io](https://egghead.io/lessons/gatsby-style-gatsby-site
 First, open a new terminal window and run the following to create a new site:
 
 ```shell
-npx gatsby new styled-components-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new styled-components-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 Second, install the necessary dependencies for `styled-components`, including the Gatsby plugin.

docs/docs/wordpress-source-plugin-tutorial.md

@@ -25,7 +25,7 @@ If you’d like to look at the growing number source plugins available to you, s
 Create a new Gatsby project and change directories into the new project you just created:
 
 ```shell
-npx gatsby new wordpress-tutorial-site
+ gatsby new wordpress-tutorial-site
 cd wordpress-tutorial-site
 ```