How to Deploy a Vue Project on GitHub

So, you’ve built a Vue.js project, and now you want to share it with the world. Whether it’s a personal project or a professional portfolio, deploying your Vue app on GitHub is a great way to showcase your work. In this guide (Deploy Vue Project on GitHub), we’ll go step by step to help you deploy your Vue project on GitHub Pages easily.

Prerequisites

Before we begin, make sure you have the following:

• A Vue.js project ready to be deployed
• A GitHub account
• Git installed on your system
• Node.js and npm installed

If you haven’t set up Git, install it from the official Git website.

Step 1: Install Vue CLI (If Not Installed)

If you haven’t installed Vue CLI, run the following command:

npm install -g @vue/cli

This will install Vue CLI globally on your system.

Step 2: Configure Your Vue Project for Deployment

Navigate to your project folder and open the vue.config.js file (create one if it doesn’t exist). Add the following configuration:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-repository-name/' : '/'
}

Replace your-repository-name with the actual name of your GitHub repository.

Step 3: Build the Project

Run the following command to generate the production-ready files:

npm run build

This will create a dist folder containing the compiled project files.

Step 4: Initialize a Git Repository

If you haven’t already initialized a Git repository in your project folder, do so with the following commands:

git init
git add .
git commit -m "Initial commit"

Step 5: Create and Link Your GitHub Repository

1. Go to GitHub and create a new repository.
2. Copy the repository URL.
3. Run the following commands to add the remote repository and push your code:

git remote add origin https://github.com/your-username/your-repository-name.git
git branch -M main
git push -u origin main

Step 6: Install and Configure gh-pages

To deploy your Vue app, install gh-pages as a dev dependency:

npm install gh-pages --save-dev

Modify the package.json file by adding the following under scripts:

"scripts": {
  "deploy": "vue-cli-service build && gh-pages -d dist"
}

Step 7: Deploy Your Vue Project

Now, deploy your project by running:

npm run deploy

This will push the built files to the gh-pages branch of your repository.

Step 8: Enable GitHub Pages

1. Go to your GitHub repository.
2. Click on Settings → Pages.
3. Under Source, select the gh-pages branch.
4. Click Save.

Your Vue project is now live! You can access it at:

https://your-username.github.io/your-repository-name/

Deploying a Vue.js project on GitHub is a straightforward process that allows you to share your work effortlessly. By following these steps, you can make your project accessible to a wider audience.

If you’re looking for expert web development services, consider checking out CodeHunger.