Remove npm/npx commands - Tutorial (#12273)

* Remove npm/npx commands - Part Zero

* Remove npm/npx commands - Part One

* Remove npm/npx commands - Part Two

* Remove npm/npx commands - Part Three

* Remove npm/npx commands - Part Four

* Remove npm/npx commands - Part Eight

* Instruct user to install gatsby globally.

* Add back the link to pages helping with NPM permissions problems

docs/tutorial/part-eight/index.md

@@ -32,15 +32,15 @@ First, you need to create a production build of your Gatsby site. The Gatsby dev
 1.  Stop the development server (if it's still running) and run:
 
 ```shell
-npm run build
+gatsby build
 ```
 
 > 💡 As you learned in [part 1](/tutorial/part-one/), this does a production build of your site and outputs the built static files into the `public` directory.
 
 2.  View the production site locally. Run:
 
 ```shell
-npm run serve
+gatsby serve
 ```
 
 Once this starts, you can now view your site at `localhost:9000`.

docs/tutorial/part-four/index.md

@@ -88,7 +88,7 @@ Create another new site for this part of the tutorial. You're going to build a M
 Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`, and navigate to the new directory:
 
 ```shell
-npx gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd tutorial-part-four
 ```
 
@@ -199,7 +199,7 @@ module.exports = {
 }
 ```
 
-Add the above files and then run `npm run develop`, per usual, and you should see the following:
+Add the above files and then run `gatsby develop`, per usual, and you should see the following:
 
 ![start](start.png)
 

docs/tutorial/part-one/index.md

@@ -10,13 +10,13 @@ In the [**previous section**](/tutorial/part-zero/), you prepared your local dev
 In [**tutorial part zero**](/tutorial/part-zero/), you created a new site based on the “hello world” starter using the following command:
 
 ```shell
-npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
 When creating a new Gatsby site, you can use the following command structure to create a new site based on any existing Gatsby starter:
 
 ```shell
-npx gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
+gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
 ```
 
 > 💡 See a list of the existing [**official and community starters**](/starters/)!
@@ -33,7 +33,7 @@ _Note: Again, the editor shown here is Visual Studio Code. If you’re using a d
 
 Let’s take a look at the code that powers the homepage.
 
-> 💡 If you stopped your development server after running `npm run develop` in the previous section, start it up again now — time to make some changes to the hello-world site!
+> 💡 If you stopped your development server after running `gatsby develop` in the previous section, start it up again now — time to make some changes to the hello-world site!
 
 ## Familiarizing with Gatsby pages
 
@@ -359,13 +359,13 @@ npm install --global surge
 surge
 ```
 
-Next, build your site by running the following command in the terminal at the root of your site (tip: make sure you're running this command at the root of your site, in this case in the hello-world folder, which you can do by opening a new tab in the same window you used to run `npm run develop`):
+Next, build your site by running the following command in the terminal at the root of your site (tip: make sure you're running this command at the root of your site, in this case in the hello-world folder, which you can do by opening a new tab in the same window you used to run `gatsby develop`):
 
 ```shell
-npm run build
+gatsby build
 ```
 
-The build should take 15-30 seconds. Once the build is finished, it's interesting to take a look at the files that the `npm run build` command just prepared to deploy.
+The build should take 15-30 seconds. Once the build is finished, it's interesting to take a look at the files that the `gatsby build` command just prepared to deploy.
 
 Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory:
 

docs/tutorial/part-three/index.md

@@ -34,7 +34,7 @@ For an initial introduction to using plugins, we'll install and implement the Ga
 As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then, open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory:
 
 ```shell
-npx gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd tutorial-part-three
 ```
 
@@ -86,7 +86,7 @@ export default typography
 4. Start the development server.
 
 ```shell
-npm run develop
+gatsby develop
 ```
 
 Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you’ll see that the typography plugin added a `<style>` element to the `<head>` element with its generated CSS:

docs/tutorial/part-two/index.md

@@ -36,7 +36,7 @@ Start by creating a new Gatsby site. It may be best (especially if you're new to
 Open a new terminal window, create a new "hello world" gatsby site, and start the development server:
 
 ```shell
-npx gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd tutorial-part-two
 ```
 
@@ -120,7 +120,7 @@ import "./src/styles/global.css"
 3. Start the development server:
 
 ```shell
-npm run develop
+gatsby develop
 ```
 
 If you take a look at your project in the browser, you should see a lavender background applied to the "hello world" starter:

docs/tutorial/part-zero/index.md

@@ -71,20 +71,22 @@ The steps to download and install Git depend on your operating system. Follow th
 
 ## Using the Gatsby CLI
 
-The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package. Rather than installing the Gatsby CLI tool locally you can run it using [npx](https://www.npmjs.com/package/npx).
+The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package.
 
-To see the commands available to run `npx gatsby --help`.
+The Gatsby CLI is available via npm and should be installed globally by running `npm install -g gatsby-cli`.
 
-> 💡 If you are unable to successfully run npx due to a permissions issue, you may want to check out the [npm docs on fixing permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions), or [this guide](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md).
+To see the commands available to run `gatsby --help`.
+
+> 💡 If you are unable to successfully run the Gatsby CLI due to a permissions issue, you may want to check out the [npm docs on fixing permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions), or [this guide](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md).
 
 ## Create a Gatsby site
 
 Now you are ready to use the Gatsby CLI tool to create your first Gatsby site. Using the tool, you can download “starters” (partially built sites with some default configuration) to help you get moving faster on creating a certain type of site. The “Hello World” starter you’ll be using here is a starter with the bare essentials needed for a Gatsby site.
 
 1.  Open up your terminal.
-2.  Run `npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`. (_Note: Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install_).
+2.  Run `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`. (_Note: Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install_).
 3.  Run `cd hello-world`.
-4.  Run `npm run develop`.
+4.  Run `gatsby develop`.
 
 <video controls="controls" autoplay="true" loop="true">
   <source type="video/mp4" src="./03-create-site.mp4"></source>
@@ -94,11 +96,9 @@ Now you are ready to use the Gatsby CLI tool to create your first Gatsby site. U
 What just happened?
 
 ```shell
-npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
-- Starting with `npx` executes an npm package binary without installing it locally.
-- `gatsby` tells npx, ‘hey, we want to use the gatsby-cli tool!’.
 - `new` is a gatsby command to create a new Gatsby project.
 - Here, `hello-world` is an arbitrary title — you could pick anything. The CLI tool will place the code for your new site in a new folder called “hello-world”.
 - Lastly, the GitHub URL specified points to a code repository that holds the starter code you want to use.
@@ -110,7 +110,7 @@ cd hello-world
 - This says 'I want to change directories (`cd`) to the “hello-world” subfolder'. Whenever you want to run any commands for your site, you need to be in the context for that site (aka, your terminal needs to be pointed at the directory where your site code lives).
 
 ```shell
-npm run develop
+gatsby develop
 ```
 
 - This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet).
@@ -123,9 +123,9 @@ Open up a new tab in your browser and navigate to [**http://localhost:8000**](ht
 
 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 `npm run 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 `npm run develop` again!
+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!
 
-**Note:** If you are using VM setup like `vagrant` and/or would like to listen on your local IP address, run `npm run 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 'localhost' and your local IP.
 
 ## Set up a code editor