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:

Solving The Node.js Console.Time Is Not A Function Error

Solving the Node.js console.time is not a function error

Explore the two variants of the `console.time is not a function` error, their possible causes, and how to debug.

Joseph Mawa
Nov 1, 2024 â‹… 6 min read
Why jQuery 4 Is A Good Reminder To Stop Using jQuery

Why jQuery 4 is a good reminder to stop using jQuery

jQuery 4 proves that jQuery’s time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.

Shalitha Suranga
Oct 31, 2024 â‹… 11 min read
How to Create a Multilevel Dropdown Menu in React

How to create a dropdown menu in React

See how to implement a single and multilevel dropdown menu in your React project to make your nav bars more dynamic and user-friendly.

Ibadehin Mojeed
Oct 30, 2024 â‹… 12 min read
Purple background with different connections between icons for an article about building Node.js modules with Rust and NAPI-RS.

Building Node.js modules in Rust with NAPI-RS

NAPI-RS is a great module-building tool for image resizing, cryptography, and more. Learn how to use it with Rust and Node.js.

Rahul Padalkar
Oct 30, 2024 â‹… 7 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