How to deploy Vite app to Github pages "Contineous deployment"
Contineous Deployment to Github.jpg
Shahroz Javed
Feb 08, 2024 . 34 views

Table Of Contents


Welcome to this tutorial, where we'll go through the process of deploying a Vite.js application on GitHub Pages. GitHub Pages provides a straightforward way to host and share your static websites, and with Vite's fast build system, you can have your modern web app up and running in no time.

In this tutorial, we'll cover the essential steps, from creating a new Vite project to configuring it for deployment on GitHub Pages.This guide will help you understand the deployment process and have your app live on the web.

Create a vite project:

npm create vite@latest my-vite-app -- --template vue
cd my-vite-app
npm install
npm run dev

Configuring Base Path:

base: 'my-vite-app',

Create a new repository on github:

After creating repository go Inside your project and run following commands to push code on repository

git init
git remote add origin
git add .
git commit -m "initial commit"
git push origin master

Deploy Using github actions:

  1. Open your git repository.
  2. Go inside repository settings.
  3. Go to pages menu from sidebar.
  4. Choosse source "GitHub Action" and configure static HTML.
  5. Edit 'static.yml', replace all code with following code in it.
  6. Commit changes
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

  # Runs on pushes targeting the default branch
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
  group: "pages"
  cancel-in-progress: false

  # Single deploy job since we're just deploying
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4


Access your Website from github pages:

Replace "githubusername" with your GitHub username and "my-vite-app" with your base path


that's it! You have successfully deployed your vite App to GitHub pages. Now you can share the link with others, and your app will be publicly accessible.

Related Terms:


Related Posts

Similar Posts