How to deploy vite projects into Github Pages

This Gist will be a guide of how to be able to deploy frontend web applications that use vite, regardless of the framework (Vue, React, etc) in Github Pages. In this guide we are going to use gh-pages, a very simple package that will help us to deploy our project.

First we need to install gh-pages in our project.

npm install gh-pages

After the installation we need to do some changes on our package.json file, we need to add a homepage rule and a new script to deploy our project. It’s important replace the github-user with your Github username and the github-repo with the name of your repository in Github.

{
	...
	"homepage": "https://{github-user}.github.io/{github-repo}/",
	"scripts": {
		...
		"deploy": "gh-pages -d dist"
	}
	...
}

Note: By default the build result folder in vite it’s named dist that is why in our deploy script we indicate that name, adapt the script according to the needs of your project.

Now we need to add the next configuration to our vite.config.js. We must replace github-repo with the name of your repository in Github (as in the package.json file).

export default defineConfig({
	base: "/{github-repo}/",
	...
});

That it’s all, before deploy our project we will have to run the script to build our project and then we can deploy our project with the script that we create in this guide.

npm run build

and then

npm run deploy

With this a new branch in Github will be created with the name gh-pages.

image

By default Github will take this branch and will deploy our static page from this branch.

Important notes

As mentioned Github let’s took the gh-page branch and will deploy out project from this branch, in the case that is not like that, we will have to change the definition of our project to take this branch for Github Pages. Go to Settings -> Pages and change the branch in Branch section.

image