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 yourwife's website 😊 ... basically, any static project that you want to display to the world quickly.

For the purpose of this tutorial, I will be usingmejiamanuel5/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, thisguide can help you.

Ready? let's start:

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

# abort on errorsset-e# buildechoLinting.. npm run lintechoBuilding. 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 -# deployechoDeploying.. git add-A git commit-m'deploy' git push-f https://github.com/mejiamanuel57/gh-pages-vue-cli-3.git master

Substitutemejiamanuel57 with your GitHub username andgh-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 bedocs (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 createvue.config.js and add this configuration:

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

Substitutegh-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 runnpm run deploy to build and deploy.

5) On GitHub go to yourrepo -> settings -> GitHub Pages - > Source and selectmaster branch /docs folder

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

1) Runnpm install -D prerender-spa-plugin

2) Change yourvue.config.js for this:

constpath=require('path')constPrerenderSPAPlugin=require('prerender-spa-plugin')constRenderer=PrerenderSPAPlugin.PuppeteerRenderermodule.exports={publicPath:process.env.NODE_ENV==='production'?'/gh-pages-vue-cli-3/':'/',configureWebpack:(config)=>{if(process.env.NODE_ENV!=='production')returnreturn{plugins:[newPrerenderSPAPlugin({staticDir:path.join(__dirname,'docs'),routes:['/','/about'],minify:{collapseBooleanAttributes:true,collapseWhitespace:true,decodeEntities:true,keepClosingSlash:true,sortAttributes:true},renderer:newRenderer({headless:true})})]}}}

Substitutegh-pages-vue-cli-3 with the name of your repo and useroutes: [] 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 runnpm 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 atblog.manuelmejiajr.com