Deploy Vue.js Application to GitHub Pages
Today we’re going to learn how to deploy Vue.js application to GitHub pages very easily. Let’s get started:
Table of Contents
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.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.