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:
- If you haven't set up a Vite project yet, initiate one with the following command. Feel free to choose any template—whether it's for React, Vanilla JavaScript, or another framework. In this tutorial, we'll use the Vue template, but the process remains consistent regardless of the chosen template.
npm create vite@latest my-vite-app -- --template vue
cd my-vite-app
npm install
npm run dev
Configuring Base Path:
- In your vite.config.js, add the following line:
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:
- Open your git repository.
- Go inside repository settings.
- Go to pages menu from sidebar.
- Choosse source "GitHub Action" and configure static HTML.
- Edit 'static.yml', replace all code with following code in it.
- 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:
- How To Deploy Vue App to GitHub Pages
- Vite.js Deployment: From Zero to GitHub Pages Hero
- Your Ultimate Guide to Vite.js Deployment on GitHub Pages