Deploy Vite App to GitHub Pages Step by Step

Deploying a Vite app to GitHub Pages is a straightforward process that requires a few simple steps.

First, you need to create a new repository on GitHub and link it to your local project. This is done by running the command `git add .` and then `git commit -m "initial commit"` in your terminal.

Next, you'll need to create a new file in your project's root directory called `gh-pages`. This file will serve as the source for your GitHub Pages site.

To configure your GitHub Pages site, you'll need to create a new file called `vite.config.js` and add the following code to it: `export default defineConfig({ base: '/your-project-name/', });`

For more insights, see: How to Host a Site on Github

To deploy your Vite app to GitHub Pages, you'll need to meet a few basic requirements.

You'll need a project built using Vite, which is the foundation of our deployment process.

A GitHub repository (repo) is also necessary, with your Vite project inside.

Here are the specific prerequisites you'll need to get started:

In today's fast-paced development landscape, having efficient workflows for deploying web applications is crucial. Creating such workflows is essential for developers to keep up with the pace.

Deploying a web application can be a tedious process, but GitHub Pages and GitHub Actions have made it much easier. These tools have emerged as powerful solutions for automating the deployment process.

Developers can use GitHub Actions to automate the deployment of their applications, making it a more streamlined process. GitHub Actions can be used to automate various tasks, including deployment.

By the end of this tutorial, developers will have a comprehensive understanding of how to set up an automated deployment pipeline for their Vite app.

If this caught your attention, see: Deploy Web App to Azure

To configure Vite for deployments, you'll need to create a production version of your application. Run the command `vite build` to create the production version in a folder called dist/. However, for GitHub Pages to work, you need to configure Vite to build in the root of the repo.

Create a Vite configuration file and add the following code:

```javascript

build: {

outDir: '.',

},

base: '/my-vite-app/',

```

This will determine where to put your compiled application and how the index.html file connects to the .js and .css files in your assets/ folder.

You can see what the "deployed" version will look like by running the command `vite preview` which will serve the application at http://localhost:4173/.

To deploy your Vite app, you need to make changes and push them to the main branch. Commit the deployment workflow and push the changes to GitHub.

GitHub Actions will automatically trigger the workflow defined in deploy.yml on the push event. To fix a permission issue, enable the write permission in Actions Settings.

Once the workflow completes successfully, your Vite app will be deployed to the GitHub Pages URL specified in the base field of vite.config.js. Access your deployed app at the GitHub Pages URL, which is usually https://yourusername.github.io/my-vite-app.

For another approach, see: How Does Nextjs App Be Deployed to the Public

Here's a step-by-step process to deploy your Vite app:

1. Make Changes and Push

2. Commit the deployment workflow and push the changes to GitHub.

3. GitHub Actions Workflow

4. Accessing Deployed App

Note: Ensure that you have enabled the write permission in Actions Settings for the GitHub Actions workflow to work correctly.

To deploy your Vite app to GitHub Pages, you'll need to create an action file. Create a `.github` folder at your project root and a `yml` file inside it, named `vite-github-pages-deploy.yml`.

The action file path is `./.github/workflows/vite-github-pages-deploy.yml`. Copy the code below and paste it into the action file, then save.

This action will run on your next push to the master branch or manual run from the actions tab, deploying your project to GitHub Pages. You'll know it's done when you see the deployment succeed.

Here's a step-by-step guide to creating the action file:

1. Create a `.github` folder at your project root.

2. Create a `yml` file inside the `.github` folder, named `vite-github-pages-deploy.yml`.

3. Copy the code into the `vite-github-pages-deploy.yml` file and save.

That's it! Your action file is now set up, and your Vite app will be deployed to GitHub Pages on the next push to the master branch or manual run from the actions tab.

If you're having trouble deploying your Vite app to GitHub Pages, first check that you've installed the necessary packages, including `@vitejs/plugin-github-pages`.

Make sure you've set up a GitHub repository and linked it to your local project by running `git add .` and `git commit -m "Initial commit"`.

Verify that your `vite.config.js` file contains the correct configuration for GitHub Pages, including the `build` and `base` options.

If you're still encountering issues, try deleting the `dist` folder and running `vite build` to rebuild your app.