1. vue-gh-pages
Automated build tool to update and push vue-cli projects to gh-pages
vue-gh-pages
Package: vue-gh-pages
Created by: KieferSivitz
Last modified: Tue, 28 Jun 2022 19:33:31 GMT
Version: 1.19.1
License: MIT
Downloads: 80
Repository: https://github.com/KieferSivitz/vue-gh-pages

Install

npm install vue-gh-pages
yarn add vue-gh-pages

license

npm-downloads
npm version

vue-gh-pages

Since I could not find a clean way of deploying vue-cli apps to github pages, I made this one.

Step 1: Install the module:

npm install --save-dev vue-gh-pages

Alternatively, with yarn:

yarn add vue-gh-pages

Step 2: Add the following to the script section of your package.json:

"deploy": "node ./node_modules/vue-gh-pages/index.js"

Step 2.5: If you are using the 'webpack-simple' template, you will need to do a couple extra things:

First, make sure the build.js is referenced correctly.

You can do this in one of two ways:

1.) Add to your package.json:

"wst": "/dist/"

Making sure the path is the same path from the index.html path to build.js. Though this should be the default, so unless it was modified the above should work.

2.) Change the path from the index.html in the root of your project from

<script src="/dist/build.js"></script>

to

<script src="build.js"></script>
Second, modify your 'webpack.config.js' and change the 'publicPath' for the output to the empty string:
output: {

...

publicPath: '',

...

},

This will make sure your files are referenced correctly after building.

Step 3: Add homepage field to your package.json file:

This will automatically push your builds to github.

"homepage": "https://github.com/myusername/my-app",

If you are using ssh you will need to add the ssh link instead:

"homepage": "[email protected]:myusername/my-app

If this is left off you will have to commit and push the changes manually.

Step 4: Now when you're ready to push to github, run:

npm run deploy

This will create an optimized production build of your project ready for github pages.

Step 5: Finally, if this is your first commit to gh-pages, go to your repository's settings on github, scroll down to the gh-pages section and change the source to:

master branch /docs folder

If you get any errors about filename lengths, run the following command:

(May need administrator privileges)

git config --system core.longpaths true

This may happen as a result of node_modules filenames being overly verbose.

If you would like to change the output directory of the docs folder

You can use the command line argument

--output <path-to-file> 

or 

-o <path-to-file>

to specify the output directory for the docs folder.

You can use either a relative path or an absolute path.

Examples:

node ./node_modules/vue-gh-pages/index.js -o C:\Users\MyUser\Documents\Folder

node ./node_modules/vue-gh-pages/index.js --output ../DeleteMe

If you would like to preserve the docs folder after pushing to Github:

Use the command line argument

-p

Examples:

node ./node_modules/vue-gh-pages/index.js -p

If you would like to push to the gh-pages branch:

Use the command line argument

--branch <branch> 

or 

-b <branch>

Examples:

node ./node_modules/vue-gh-pages/index.js -b gh-pages

node ./node_modules/vue-gh-pages/index.js --branch gh-pages

If you would like to specify the commit message:

Use the command line argument

--message <message>

or

-m <message>

Examples:

node ./node_modules/vue-gh-pages/index.js -m "deploy to gh-pages"

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin