Deploy Vite to GitHub Pages

Configure Vite for GitHub Pages#

The key is setting the correct base path in your Vite config. GitHub Pages serves your site from https://<username>.github.io/<repository-name>/, so your assets need to be prefixed accordingly.

Create a GitHub Repository and Push Your Code#

If you haven't already, set up your repository and push your code:

1. Create a new repository on GitHub
2. Initialize Git in your local project folder (git init)
3. Add the GitHub repository as a remote (git remote add origin <your-repo-url>)
4. Stage, commit, and push your initial project code (including the updated vite.config.js) to the main (or master) branch

Set Up GitHub Actions for Automatic Deployment#

This method automatically builds and deploys your site whenever you push changes to your main branch.

Create the Workflow#

1. Create the workflow directory: In your project root, create a folder path .github/workflows/
2. Create a workflow file: Inside .github/workflows/, create a new file named deploy.yml (or any other .yml name)
3. Paste the following workflow configuration into deploy.yml:

Commit and Push the Workflow File#

Configure GitHub Pages Settings#

1. Go to your GitHub repository on the web
2. Click on the "Settings" tab
3. In the left sidebar, click on "Pages"
4. Under "Build and deployment":
   • For "Source", select "GitHub Actions" (This option should appear automatically once your workflow runs successfully for the first time after pushing the .yml file)

Verify Deployment#

1. Go to the "Actions" tab in your GitHub repository — you should see the workflow running (or completed) after you pushed the deploy.yml file or pushed new code to main
2. Once the workflow completes successfully, go back to Settings → Pages
3. GitHub Pages will display the URL where your site is published (e.g., https://<username>.github.io/<repository-name>/)
4. It might take a minute or two for the site to become live after the first deployment

Summary#

With this setup, every push to main will automatically build your Vite project and deploy it to GitHub Pages. No manual build steps required — just push and your site updates.