2021-11-05
1247
#vue
Nwose Lotanna
23205
Nov 5, 2021 ⋅ 4 min read

Automatically build and deploy a Vue.js app with GitHub Pages

Nwose Lotanna Web Developer and Writer

Recent posts:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
View all posts

16 Replies to "Automatically build and deploy a Vue.js app with GitHub Pages"

  1. Got this error:

    Command failed with exit code 1: git –work-tree dist commit -m gh-pages
    error: cannot spawn G:/app-name/.git/hooks/pre-commit: No such file or directory

  2. Sorry but it isn’t working. I get an empty page when I access github.io/project_name.
    Also, each time I run “npm run deploy” the vue.config.js goes back to publicPath: ‘/project name/’ and the changes made to package.json go to default, meaning no deploy script and no execa dependencies.

  3. I had the same problem but fixed it by changing the publicPath to:
    publicPath: ”,

    Remember to also change gh-pages-deploy.js incase you are using a branch other than master. You have to change the following line:
    await execa(“git”, [“checkout”, “-f”, “master”]);

  4. Change to get to work on windows npm install –save-dev rimraf
    And change
    await execa(“rm”, [“-r”, folderName]);
    to
    await execa(“rimraf”, [folderName]);

  5. Hi, I have a problem. After run deploy i get this error:
    Error: Cannot find module ‘C:\Users\islam\dev\RODRI\coresuite\scripts\gh-pages-deploy.js’
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at internal/main/run_main_module.js:17:11 {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: []
    }
    Somebody had the same problem ? Thanks!

  6. I think I figured it out, you need to make sure to push your changes for vue.config.js and the gh-pages-deploy.js to your main branch so that they are saved. Otherwise, when you run gh-pages-deploy.js, it temporarily creates a local gh-pages branch, pushes all the changes to the remote gh-pages, then deletes the branch which effectively deletes your changes to vue.config.js and gh-pages-deploy.js

  7. You have probably created a “Scripts” folder instead of “scripts” (case sensitive). The article says “Scripts” and I had the same the same error.

  8. My project seems to build, and I get a message saying it has been successfully deployed, but all it shows is the readme when going to the gh-pages url. Anyone have the same experience?

    1. same issue and ive been through every single stackoverflow post and every web tutorial i could find. no matter what i try, i only see the readme file

Leave a Reply