GitHub Pages + Vue CLI 3

In this post, I will show you how to run your Vue CLI 3 project on GitHub Pages in a few simple steps. GitHub Pages is ideally for your personal website, documentation, demos, or your wife's website 😊 ... basically, any static project that you want to display to the world quickly.

For the purpose of this tutorial, I will be using mejiamanuel5/gh-pages-vue-cli-3 a project that I created for a better demonstration. You can clone my repo, use your existing Vue CLI 3 project or create a new one. If you don't know how to create one, this guide can help you.

Ready? let's start:

1) At the root of your project create a file called deploy.sh and add this script:

# abort on errors 
set -e 

# build 
echo Linting.. 
npm run lint 
echo Building. this may take a minute... 
npm run build 

# if you are deploying to a custom domain add a CNAME (uncomment the next 3 lines) 
#cd docs 
#echo 'yourcustomdomain.com' > CNAME 
#cd - 

# deploy 
echo Deploying.. 
git add -A 
git commit -m 'deploy' 
git push -f https://github.com/mejiamanuel57/gh-pages-vue-cli-3.git master

Substitute mejiamanuel57 with your GitHub username and gh-pages-vue-cli-3 with the name of the repo you are pointing to. This script will lint, commit and deploy your code to GitHub.

2) In your package.json, change your "scripts": section for this:

"scripts": { 
 "dev": "vue-cli-service serve --open", 
 "build": "vue-cli-service build --dest docs", 
 "lint": "vue-cli-service lint", 
 "deploy": "bash deploy.sh" 
}

Now your output directory for the "build" will be docs (We will use this directory in GitHub Pages later) . Also we have added "deploy": to run the script from step 1.

3) At the root of your project create vue.config.js and add this configuration:

module.exports = { 
 publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/' 
}

Substitute gh-pages-vue-cli-3 with the name of your repo. This will tell to GitHub Pages where your public path starts.

4) Now, in your terminal run npm run deploy to build and deploy.

5) On GitHub go to your repo -> settings -> GitHub Pages - > Source and select master branch /docs folder

🌟Bonus: if you want to improve the SEO and routing of your Vue project, add the prerender-spa-plugin package:

1) Run npm install -D prerender-spa-plugin

2) Change your vue.config.js for this:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/',
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') return

    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'docs'),
          routes: ['/', '/about'],
          minify: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true,
            keepClosingSlash: true,
            sortAttributes: true
          },
          renderer: new Renderer({ headless: true })
        })
      ]
    }
  }
}

Substitute gh-pages-vue-cli-3 with the name of your repo and use routes: [] to add the routes of your current project.

Note: if you are going to use a custom domain (www.mydomain.com) remove or comment the publiPath line:

publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/',

3) ....and run npm run deploy in your terminal.

That's all, enjoy your Vue project hosted on GitHub Pages with SEO optimization.👍

Source of the project.

I hope this post help you. If you have any question please, leave a comment, also stay tuned for the updates about how to run a Vue CLI 4 project on GitHub Pages.

Originally published at blog.manuelmejiajr.com