Copied!
React
Vite
Vue
How to deploy Vite app to Github pages "Contineous deployment"
Contineous Deployment to Github.jpg
Shahroz Javed
Feb 08, 2024 . 44 views

Table Of Contents

 
 

Introduction:

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 https://github.com/username/your-repo.git
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

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

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

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  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.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          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
        with:
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

		  
 

Access your Website from github pages:

https://jgithubusername.github.io/my-vite-app/

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

Conclusion:

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:

13 Shares

Related Posts

Similar Posts