How to Deploy a Vite Project (React/Vue) on GitHub Pages

Last update: 11-06-2024

In this tutorial, we’ll guide you through setting up a frontend project using Vite with frameworks like React or Vue, and then deploying it for free on GitHub Pages. This process allows you to get a site up and running quickly and without any hosting costs!

Step 1: Set Up Your Project Folder in Visual Studio Code

First, open Visual Studio Code and create a new folder where you’d like to set up your project. This folder will hold your Vite project files.

Step 2: Initialize a New Vite Project

With the folder open in Visual Studio Code, launch the terminal and run the following command to create a new Vite project in the current folder:

npm create vite .

Vite will prompt you to select a framework. For this tutorial, we’ll use React. When prompted for a language, select JavaScript. Once the selection is complete, Vite will create the necessary project files.

Step 3: Install Node Packages

After the project files are generated, install the required Node packages by running:

npm install

With the packages installed, your project is ready to run locally.

Step 4: Test Your Project Locally

To make sure everything is working as expected, start a local development server with:

npm run dev

Click on the link provided in the terminal output to view your project in the browser. You should see your React or Vue project running locally.

Step 5: Create a GitHub Repository

Next, go to GitHub and create a new repository for your project. For this tutorial, we’ll name it my-Vite-website and set it as public so anyone can access the deployed site.

Step 6: Update Vite Configuration for Deployment

In Visual Studio Code, open vite.config.js. In the defineConfig section, just under 'plugins' add a new entry whose key is 'base' and value is the name of the repository. It should look like this:

export default defineConfig({
  plugins: [react()],
  base: 'my-vite-website',
})

Replace my-Vite-website with the name of your GitHub repository. This change configures the base path for your site.

Step 7: Build the Project for Deployment

To prepare your project for deployment, stop the local server with Ctrl + C, and then build the project with:

npm run build

After building, you’ll see a dist folder containing all the files needed to deploy your site.

Step 8: Upload Project Files to GitHub

Go to your GitHub repository and navigate to the code section. If its empty, you can click on "Uploading an existing file." Select all files from the dist folder, then drag and drop them into the upload area. After the upload is complete, add a commit message such as first website version and commit the changes.

Step 9: Configure GitHub Pages

Go to the Settings tab of your GitHub repository, scroll down to Pages, and select the main branch as the publishing source. Save the settings, and after a minute or so, a link to your website will appear on the page.

Step 10: View Your Deployed Website

Click on the link labeled "Visit site" to see your deployed website. Your site is now live on GitHub Pages and accessible to anyone!

Conclusion

With just a few steps, you can set up a frontend project with Vite, host it on GitHub Pages, and have a fully functional website live for free. This setup is perfect for quickly deploying React or Vue projects.

Happy coding!