Deploying a React Vite App to GitHub Pages with GitHub Actions

A step-by-step guide to deploying a React Vite application to GitHub Pages using automated GitHub Actions workflows.

Introduction

GitHub Pages offers free, reliable static hosting for React apps. Combining it with GitHub Actions automates deployment on every push.

Prerequisites

A Vite-built React application.

A GitHub repository.

GitHub Pages active in repository settings.

Steps

Configure Vite Base URL: Set base to your repository name in vite.config.js.

Create Workflow File: Add deploy.yml in .github/workflows/ with build/deploy jobs.

Enable GitHub Actions: Set Settings → Pages → Source to GitHub Actions.

Push to Main: Trigger automatic build and deployment by pushing to main.

Conclusion

Your portfolio site now updates automatically with every push. This setup eliminates all manual deployment steps completely.