How to Set Up Continuous Deployment for Vue.js Apps on Github Pages?

Continuous Deployment (CD) is an essential practice for modern web development. For Vue.js apps, deploying on GitHub Pages offers a cost-effective solution, facilitating hassle-free updates. This guide will walk you through setting up continuous deployment for Vue.js apps on GitHub Pages.

Why Choose GitHub Pages?

GitHub Pages is a popular choice for hosting static sites due to its integration with Git workflows, free tier options, and simplicity. Although it’s ideal for static sites, Vue.js apps fit the bill perfectly if you pre-render or export them as static assets.

Prerequisites

To get started, ensure you have:

• Node.js and npm installed.
• A GitHub account and a Vue.js app ready for deployment.

Step-by-Step Guide

Step 1: Set Up Your Vue.js App

If you haven’t created your Vue.js app yet, you can do so using Vue CLI. Run the following command:

1
2

npm install -g @vue/cli
vue create my-vue-app

Step 2: Configure Your Repository

1. Initialize a Git Repository:

   1 2 3 4

   cd my-vue-app git init git add . git commit -m "Initial commit"

2. Create a GitHub Repository:

   • Go to GitHub and create a new repository for your Vue.js project.

3. Link Your Local Repository with GitHub:

   1 2	git remote add origin https://github.com/[your-username]/[repository-name].git git push -u origin master

Step 3: Configure Vue.js for GitHub Pages

In your vue.config.js file, add the following configuration:

1
2
3

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

Step 4: Add Deployment Script

Add a script in package.json for deploying to GitHub Pages:

1
2
3

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

Step 5: Install gh-pages

Use gh-pages to simplify deployment:

1

npm install --save-dev gh-pages

Step 6: Set Up GitHub Actions for Continuous Deployment

Create a .github/workflows/deploy.yml file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

name: Deploy Vue.js App

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install Dependencies and Build
      run: |
        npm install
        npm run build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

Step 7: Push Changes and Trigger Deployment

Whenever you push changes to the master branch, the GitHub Action will automatically deploy your app to GitHub Pages.

Conclusion

Setting up continuous deployment for Vue.js apps on GitHub Pages is straightforward and incredibly beneficial for keeping your application updated seamlessly. By integrating GitHub Actions, you can ensure that your deployment process is automated and efficient.

For more options on hosting Vue.js applications, consider reading these articles:

• Vue.js Hosting Options
• Choosing the Right Vue.js Hosting Solution
• Vue.js Hosting
• Vue.js Hosting Options
• Vue.js Hosting

Ensure your CI/CD pipeline is set up correctly to enjoy hassle-free deployments and keep your applications in top form. “` This article is crafted to be SEO optimized with appropriate keywords and structured to provide detailed information on setting up continuous deployment for Vue.js applications on GitHub Pages.