Deploying a Vue.js Application on GitHub Pages: A Comprehensive Guide

GitHub Pages is an exceptional tool when it comes to the deployment of static pages. Today, we will be showcasing a step-by-step walkthrough to deploy a Vue.js application on GitHub Pages.

Step 1: Setting up the GitHub Repository

Before initiating the deployment process, the first step involves setting up a new repository on GitHub. Here is how you do it:

  • Navigate to the top-right corner of the GitHub page, click on the ‘+’ button and select ‘New Repository’.
  • Provide an appropriate name for the repository. You can also choose the repository’s visibility (public or private) based on your requirements.
  • Upon completion of the form, click ‘Create Repository’.

For the purpose of this guide, we already have a Vue.js repository that we will deploy, which can be found at ( which we have created using vitejs

Step 2: Building the Vue.js Application

To build your Vue.js application:

  • Open a terminal and clone the repository in your local machine.
  • Navigate to your project’s directory and install the necessary dependencies using npm install.
  • Run npm run build. This command will create a dist directory containing the built project files.

Step 3: Pushing the Application to GitHub

To upload your local application to the GitHub repository:

  • Initialize your project directory as a Git repository using git init.
  • Add the files to the repository using git add -A.
  • Commit the files using git commit -m "Initial commit".
  • Link your local repository to your GitHub repository using git remote add origin<your-username>/<your-repository-name>.git, substituting <your-username> with your GitHub username and <your-repository-name> with your GitHub repository name.
  • Push the files to the repository using git push -u origin master.

Step 4: Deploying the Application with GitHub Pages

To deploy your Vue.js application with GitHub Pages:

  • Go to the settings of your GitHub repository.
  • Scroll down to the GitHub Pages section.
  • Under ‘Source’, select the branch you want to deploy from. In most cases, this will be the master branch. If you’re deploying a built Vue.js/React.js app, it could be the gh-pages branch.
  • Click ‘Save’.

Step 5: Accessing the Deployed Application

Upon successful deployment, your Vue.js application will be accessible at https://<your-username><your-repository-name>/.

Please note, the base in vite.config.ts will need to be adjusted if you’re deploying to a subfolder. For example, if you’re deploying to https://<your-username><your-repository-name>/, set base to '/<your-repository-name>/<directory>'. In our case, the base value is ‘/vue-layers/dist/’

It’s important to keep in mind that GitHub Pages is specifically designed for static websites, so it won’t handle server-side logic or databases.

In conclusion, GitHub Pages is an excellent tool for deploying static applications such as Vue.js. By following these steps, you can easily share your Vue.js applications with others. Happy coding!

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at

We also offer freelancing services. Please email us at for any query.

Leave a ReplyCancel reply