How To Deploy Your Vue App to GitHub Pages

Deploy vue-cli 3 project to github pages

<aside> 📌 Everytime you have modified code, make sure to depoly first then commit to main branch on GitHub repo

</aside>

Deploy a vue project on GitHub repository with GitHub pages

1. Create a repo on GitHub and clone to localhost

2. Create your own vure project

3. comment out /dist in .gitignore of vue project if you have .gitignore

4. Add the folowing code in vue.config.js

   • Replace /REPO_NAME/ to / if want to depoly to https://username.github.io

   module.exports = {
     publicPath: process.env.NODE_ENV === "production" ? "/REPO_NAME/" : "/",
   };
   

5. Run the following comment to push vue project to GitHub Repo (Same for new commit)

   # build the vue project for deploy
   npm run build
   
   # add to dist and commit
   git add dist && git commit -m "COMMIT_MESSAGE"
   
   # push dist to GitHub with branch gh-pages as the subtree of master
   git subtree push --prefix dist origin gh-pages
   

6. Go to GitHub repo pages and “page” in “setting”

7. Choose “gh-pages” and save it

   

8. Wait for about 10 minute and click the link above, you can see your vue project on GitHub page