Issue with npm gh-pages and deployment

Question

I've been dealing with an issue when using the gh-pages npm module wherein running npm run deploy is not triggering deployment on GitHub reliably - sometimes it works, most of the time it doesn't.

I've tried running

NODE_DEBUG=gh-pages npm run deploy

Which outputs

GH-PAGES 28395: Cloning https://github.com/JRiggles/jriggles.github.io.git into /Users/jriggles/Documents/GitHub/jriggles.github.io/node_modules/.cache/gh-pages/https!github.com!JRiggles!jriggles.github.io.git
GH-PAGES 28395: Cleaning
GH-PAGES 28395: Fetching origin
GH-PAGES 28395: Checking out origin/gh-pages 
GH-PAGES 28395: Removing files
GH-PAGES 28395: Copying files
GH-PAGES 28395: Adding all
GH-PAGES 28395: Committing
GH-PAGES 28395: Pushing
Published

And it appears to "publish" without any errors. But when I look at the main branch of https://github.com/JRiggles/jriggles.github.io it appears that the deployment action hasn't run and the gh-pages branch hasn't been updated.

The last time I got the deployment to work, something got mixed up during the build and my CSS broke - you can see the result of that mess at https://jriggl.es (I've also included some partial screenshots below)

For additional context I'm using Pug and Bulma to build the site and Parcel to put everything together. My packages.json includes these scripts:

"scripts": {
    "copy static files": "mkdir ./dist/static && cp ./src/img/IQS5xx.py.svg ./dist/static/",
    "dev": "npx parcel src/index.pug",
    "predeploy": "rm -rf .parcel-cache && rm -rf dist && npx parcel build src/index.pug --public-url 'https://github.com/JRiggles/jriggles.github.io' && cp CNAME ./dist && npm run 'copy static files'",
    "deploy": "npx gh-pages -d dist",
    "clean gh-pages cache": "node node_modules/gh-pages/bin/gh-pages-clean"
},

...and these dependencies

  "devDependencies": {
    "@parcel/transformer-pug": "^2.12.0",
    "@parcel/transformer-sass": "^2.12.0",
    "gh-pages": "^4.0.0"
  },
  "dependencies": {
    "bulma": "^0.9.4",
    "feather-icons": "^4.29.1"
  },

I remove .parcel-cache during predeploy to avoid other issues, but as you can see I've also tried cleaning the gh-pages module cache (to no avail). I've also tried removing node_modules/.cache as suggested here

I've also made sure node and my dependencies are up to date. And on the off-chance it makes any difference at all, I'm running Mac OS Sonoma 14.3.1 and working in VS Code.

For completeness' sake, here's a clip of what the site looks like when running on localhost:1234 via npm run dev

And heres what it looks like at the actual URL (if you don't feel like clicking the link above)

That is of course assuming I can get the deployment to work at all...this was the result of deployment #38, approximately 18 hours ago at time of writing. I have tried to deploy multiple times since then and had nothing happen.

Any help is very much appreciated - and thank you in advance for sticking with me through the long post.

Answer 1

After quite a lot of poking around, I tried changing the --public-url passed to parcel, and that seems to have fixe the issue

"predeploy": ... --public-url 'https://jriggles.github.io' ..."

As it turns out, the other URL was causing my custom domain to run into 404 errors because it couldn't locate my CSS or JS files on GitHub. I hope this helps somebody else avoid my mistake(s)!