3

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:

`> gatsby-starter-dimension-v2@1.0.0 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! gatsby-starter-dimension-v2@1.0.0 deploy: `gatsby build && gh-pages -d public -b master`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-dimension-v2@1.0.0 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 eslint-config-react-app@4.0.1 requires a peer of eslint-plugin-flowtype@2.x but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp@1.1.4 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 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: fsevents@2.0.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ gh-pages@2.1.1
updated 1 package and audited 20651 packages in 58.504s
found 0 vulnerabilities`
bkleeman
  • 109
  • 1
  • 14

2 Answers2

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.

Benjamin
  • 69
  • 9
0

If you wish to invoke gh-pages via the cli, here are two options.

Option A: Install gh-pages globally

npm install gh-pages --global

gh-pages --help

By default, npm install places packages in the local ./node_modules/ directory. By using the --global switch, you can change that behavior so you can access the command more conveniently.

global

  o Default: false

  o Type: Boolean

  Operates in "global" mode, so that packages are installed into the prefix folder instead  of  the  current  working
  directory. See npm help folders for more on the differences in behavior.

  o packages are installed into the {prefix}/lib/node_modules folder, instead of the current working directory.

  o bin files are linked to {prefix}/bin

  o man pages are linked to {prefix}/share/man

Option B: Invoke gh-pages locally

npm install gh-pages --save-dev

node node_modules/gh-pages/bin/gh-pages.js --help

This same command you ran, as suggested in the Gatsby Docs. It is then followed by a direct invocation of the full path to the local gh-pages.js.

sfgeorge
  • 356
  • 3
  • 6