Deploying to Pages with Vue Webpack CLI

Have you ever tried to deploy your project using the Vue Webpack CLI to Pages? The CLI is a great system that allows us to take advantage of many features, such as ES6 syntax and Vue Template

As software developer Theodore Roosevelt once said,

“Nothing in the world is worth having or worth doing unless it means effort, pain, difficulty.”

While many people may think Vue developers have it easy, as most of the time we do, deploying to gh-pages for your first time can be a nightmare .

**********************************************************

Here are two options

Option 1: How to Deploy to -Pages with a Master Branch and Docs folder:

1. On your master branch, run the terminal command: `npm run build`.
2. Change the name of your `dist` folder to `docs`
3. In your newly created `docs` folder, go to the index.html and remove the `/` in the beginning of every script and link tag’s `src` attribute.
4. Go to your repository’s settings.
5. Scroll to the Pages settings.
6. Change your `Source` in your Pages settings from `gh-pages branch` to `master branch/docs folder`.
7. Now, you can push your master branch to , and it will be hosted by Pages.
8. If you want to make a change to your master branch and have it detected by Pages, you’ll need to delete your docs folder, and follow the instructions from step 1.

Option 2. How to Deploy to -Pages with a gh-pages branch

1. Make sure your gh-pages branch is merged with all the changes that you want to deploy live and that your app is ready for production.
2. While in your gh-pages branch, run the terminal command: `npm run build`.

3. This command will create a `dist` folder in your root directory which will contain your production-ready code. You will need this folder to continue.

4. Make sure to remove `/dist/` from your `.gitignore` file. You want to be able to push this folder to .

5. Go into your `/dist` folder. You will want to copy all of your link and script tags. When your dist folder is created, it will minify these files, but [SHIFT]+[ALT]+[F] in VS Code should allow you to reformat your code so you can easily view your script and link tags.

6. Copy all of these tags and paste them into the `index.html` file in the root of your project.

7. If you have script or link tags that were already in the `index.html` in your root directory, such as bootstrap, materialize, etc, **LEAVE THEM ALONE**.

8. After you past the link and script tags from your dist folder, add `dist/` at the beginning of the `src` in all of the tags that you pasted.

9. Now, will know to serve the files in your dist folder, which is where the production code lives.

10. If you want to make a change to your gh-pages branch, you will need to delete your `dist` folder, delete the tags to the `dist` folder inside your main index.html, and follow the instructions starting from step 2.