Why won't git bash recognize gh-pages as a valid command after npm installing gh-pages? [GatsbyJS, GitHub Pages]

Question

My Problem

I'm trying to deploy a GatsbyJS static site to my GitHub pages index page but for some reason the terminal/command line won't recognize gh-pages as a valid command. I'm using git bash in vscode but have tried Windows cmd as well. I am expecting that when I run the deploy script I've added to package.json, the site will post to my GitHub pages site at .github.io. I am getting a variety of error messages and haven't found sufficient answers to similar issues.

My Setup

package.json:

{
  "name": "gatsby-starter-dimension-v2",
  "description": "Gatsby Starter - Dimension V2",
  "version": "1.0.0",
  "author": "Hunter Chang",
  "dependencies": {
    "gatsby": "^2.0.76",
    "gatsby-plugin-manifest": "^2.0.24",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.2",
    "gatsby-plugin-sass": "^2.0.7",
    "node-sass": "^4.11.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "gatsby build && gh-pages -d public -b master"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "prettier": "^1.14.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

What I've Tried

Following the Gatsby docs, I ran npm install gh-pages --save-dev, and added a custom deploy script to my package.json file:

`{
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master"
  }
}`

After I added that script I ran npm run deploy. Results posted at the end of this post.

There were no issues with running gatsby build, so I tried running gh-pages expecting to see something, but it says command not found.

I found this post and ran npm cache clean --force, deleted node_modules and package-lock.json, and ran npm install again.

I've been searching around for similar questions for a while now. Got any ideas? This is my first post here, please go easy on me...

Terminal Output (per command)

$ gh-pages
bash: gh-pages: command not found

$ gh-pages -d public -b master
bash: gh-pages: command not found

$ npm run deploy:

`> [email protected] deploy C:\Users\Benjamin\Desktop\repos\personal-website-gatsby
> gatsby build && gh-pages -d public -b master
<various success messages, minor warnings, and info's>
...
...
fatal: HttpRequestException encountered.
   An error occurred while sending the request.
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `gatsby build && gh-pages -d public -b master`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Benjamin\AppData\Roaming\npm-cache\_logs\2019-09-16T00_04_41_443Z-debug.log`

`Benjamin@DESKTOP-5T102UF MINGW64 ~/Desktop/repos/personal-website-gatsby (master)
$ npm install gh-pages --save-dev
npm notice save gh-pages is being moved from dependencies to devDependencies
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
updated 1 package and audited 20651 packages in 58.504s
found 0 vulnerabilities`

Answer 1

See https://www.npmjs.com/package/gh-pages#basic-usage

What you need to do is create a js script to use the module. I would suggest you create it under a scripts directory under the root of your project.

Paste the code you need to run. I recommend the following for configuring uploading to a public directory:

ghpages.publish( 'public', { branch: 'master', repo: '', }, () => { console.log('Deploy Complete!') } )

Enter your repo property. => defines the callback function outputting to the console.

Next, open package.json under the root of your project directory. You will see "scripts" defined with default Gatsby scripts, you will need to add one for deployment.

Add the following at the end: deploy:github": "npm run build && node ./scripts/deploy-github"

Save the file, execute npm run and you will see the list of scripts you can execute. Execute npm run deploy:github when you want to deploy.