Today we’re going to learn how to deploy Vue.js application to GitHub pages very easily. Let’s get started:

Table of Contents

1. Push Project to GitHub
2. Config Vue App
3. Create Deploy Script
4. Add SSH to GitHub
5. Deploy to GitHub

Push Project to GitHub

At first, go to we have to init git in our project root folder like this:

# git initilize
git init
# add files to git
git add .
# first commit
git commit -m "init"

Then we need to create a GitHub repository and have to push to the repository. I’ve created a repo named vue-deploy. Now I’m going to push the project to the GitHub repository:

# add origin
git remote add origin https://github.com/mdobydullah/vue-deploy.git
# push
git push -u origin master

So, our project is on GitHub now.

Config Vue App

Go to the root directory of your project and create a file called vue.config.js. Then paste the below code:

module.exports = {
    publicPath: '/vue-deploy/'
}

The publicPath will be your GitHub repo name. Don’t forget to set your own repo name.

Create Deploy Script

In the root folder, make a file named deploy.sh & insert this code:

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f [email protected]:YOUR_USERNAME/REPO_NAME.git master:gh-pages

cd -

Don’t forget to replace YOUR_USERNAME/REPO_NAME with yours.

Add SSH to GitHub

If you’ve already added your SSH key to GitHub then you don’t need to follow this step.

Run this command to generate SSH key:

ssh-keygen -t rsa -b 4096 -C "[email protected]"

Copy the content of id_rsa.pub file. On Windows, you can find the SSH key at this location: C:\Users\USERNAME\.ssh\id_rsa.pub.

After copying the SSH key, go to your Github profile -> Settings -> SSH and GPG Keys -> New SSH key & paste the key.

Deploy to GitHub

We’ve completed all the tasks. Now run this command to deploy to GitHub pages:

bash deploy.sh

Within a few seconds, your project will be deployed to GitHub pages. To check, go to the Project Settings tab & scroll down. You’ll see a success message with URL like this:

That’s it. Thank you.