Shashank sharma

Posted on Jan 26, 2022 • Updated on May 29, 2022

Deploying Vite App to GitHub Pages

#vite #githubpages #git #deploy

GitHub Pages

You can use GitHub Pages to showcase some open source projects, host a blog, or even share your resume. This will guide you to get started on creating your next website.Github-pages

It will create a website with a domain, username.github.io. Eg. Let's consider your username as peter101 and your repo name as OnTheGo. Then it will make a website with the domain peter101.github.io/OnTheGo/.

Steps for the Deployment

The following steps must be followed in serial-wise.

We will create a seperate gh-pages branch that will contain our /dist folder.

Push your code to your repository (using Terminal)

cd to your Vite App.
Run the following commands in your Terminal
1. $ git init
2. $ git add .
3. $ git commit -m "first-commit"
4. $ git branch -M main
5. $ git remote add origin http://github.com/username/repo-name.git
6. $ git push -u origin main

Now, you will able to see your code in your repository.

Deploying (Static)

Go to your vite.config.js file. And add your base url to it.

To be more precise, your base url will be /repo-name/.
In my case, my repo-name is Tech-To. So, my base url will be /Tech-To/.

Run npm run build in your Terminal.

By default, the build output will be placed at dist. You may deploy this dist folder to any of your preferred platforms.

Add /dist folder into your repo. By running.

$ git add dist -f

-f is required, as your .gitignore will not consider your /dist folder. Hence, it is required for git to consider it as well.

Run $ git commit -m "Adding dist" in your Terminal.
Run $ git subtree push --prefix dist origin gh-pages

Your Deployed website

Visit your repository.
Go to Settings.
Scroll down to Pages.
There will be a link to your website.

You did it!!

Thank You for referring to this post. Your comments will be helpful for the betterment of this post.

Top comments (34)

Arnas • Oct 31 '22 • Edited

Or add: base: "/<repo>/", to vite.config.js,

npm install gh-pages --save-dev

add to package.json

 "homepage": "https://<username>.github.io/<repo>/",
  ...
  "scripts": {
...
"build": "vite build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
...

and then run command npm run deploy to keep it simple.

Porkopek • Nov 15 '22

THIS is the best method. Much faster deployment time than the article's one.
For a custom domain, change
in vite.config.js

base: "/"

and in package.json

"homepage": "your-custom-domain",

Besides that, you'll be free of git errors ocasionated by adding -f to git the dist folder and if an error is found, the folder dist got added to git, so your deploy is not going to work

Xaypanya Phongsa • Feb 5 '23

Thanks bro

Selim Elyahyioui • Nov 20 '22

I wish I had a vite.config.js but I don't (I config 2 projects with Vite + Vanilla JS (no TS) and added Tailwind to one of them). I don't know how to create a github page
Can you help me?

Anjanique M. • Nov 16 '22

This just saved my life. Thank you!!!

Reckson Zirsangzela Khiangte • Nov 16 '22

This is the way!

Obed Sánchez • Mar 22 '22

You saved me! Thanks

Shashank sharma • Apr 6 '22

My pleasure :D

Kainat18 • Apr 9 '22

Hello Im trying to do the same but its still not working ?? can you help me out?

Shashank sharma • Apr 12 '22

Try to go through the steps thoroughly from the scratch. If still unable to deploy then search it on YouTube...from there you can have a better explanation of steps.

Kent • Sep 2 '22

Thanks master

Asif Rana • Mar 11 '22

OMG I just want to say a Huge thanks to you. I have been struggling past 3 days deploying my vite app to gh-pages. You saveed my life.

Shashank sharma • Apr 6 '22

I have also encountered this problem and thought of sharing this to you all . My pleasure ^_^

Władysław Kulik • Aug 5 '22

Thanks a lot, man, great job! Very useful instruction!

Bilal Mohmand • May 17 '23

To recommit new changes and push up to the remote repository:

On remote repository delete the "gh-pages" branch.
In you local repository run this command: npm run build
git add dist -f
git commit -m [your commit message here]
git subtree push --prefix dist origin gh-pages

if anyone has a quicker process please feel free to update this! but I found this the fastest way to push up to gh-pages.

tiago-academia-do-programador • Aug 17 '22

I have a multi-page static website setup, but when i host it on GH Pages, the only page that actually gets pre-pended '/repo-name/' is index.html, when i click a link to another page, i get a 404 error because the links do not incluse the repository name on the path.

How do i fix this?

Henschel NKETCHOGUE M. • Mar 30 '23

Please kindly add a basename attribute to your App component as shown below:

function App() { const router = createBrowserRouter( createRoutesFromElements( <Route path="/" element={<Tag />}> ...................................... </Route>, ), { basename: '/repo-name' }, );

Nad Hr • Apr 23 '23 • Edited

Thanks a lot! Adding { basename: '/repo-name'} as a second argument to createBrowserRouter function fixed my problem.

I had added to base to vite.config and created a workflow, so the page was successfully deployed on Github pages. But when I opened it I got my custom error page, which has a Go home button. When I clicked it, it navigated back from the repo name to my main pages url 'username.github.io/' and then my page would work without the '/repo-name' in the url.

Mohammad Rafivulla • Nov 29 '22

Hey, did you fix it?
If yes could you tell us how?

𝒛𝑪𝒐𝒅𝒆𝒓! • Apr 27 '22

Hi! I did everything to the letter, as indicated in your tutorial; I go to Github, check my repository, and indeed this the "main" branch with the entire project (including the "dist" folder), then I go to the gh-pages branch, and oh! problem; there are only the images (assets), and the index.html, but there are none of the components (the project, well). In setting-page, indeed there is the link, but of course when I click on it, only a blank page appears in the browser. Please, could you guide me? Thank you!

Shashank sharma • May 29 '22

I think the problem is in your github branch , Try to do the steps in order and start the deployment again. You are pushing the files in the wrong branch i think.

Subhayan Guha Thakurta • Jun 26 '23

Please advise. I deployed my app. But when I go to the link: subycuro46.github.io/curo46-app/ --> it gives me a blank screen
The code is saved in folder called "curo46-app". and in github it is stored in repo "curo46-app" in main branch.

here's my package.json
{
"name": "mosaic-react",
"version": "0.1.0",
"homepage": "subycuro46.github.io/curo46-app/",
"scripts": {
"dev": "vite",
"build": "vite build",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.3",
"chart.js": "^4.3.0",
"chartjs-adapter-moment": "^1.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flatpickr": "^3.10.13",
"react-router-dom": "^6.11.2",
"react-transition-group": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.14",
"gh-pages": "^5.0.0",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2",
"vite": "^4.3.9"
}
}
here's my vite config

import { defineConfig } from 'vite'
import postcss from './postcss.config.js'
import react from '@vitejs/plugin-react'

// vitejs.dev/config/
export default defineConfig({

define: {
'process.env': process.env
},
css: {
postcss,
},
plugins: [react()],
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
],
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
}
}
})

✓ 209 modules transformed.
dist/assets/icon-01-e89d7385.svg 0.97 kB │ gzip: 0.41 kB
dist/assets/icon-02-d3838050.svg 0.97 kB │ gzip: 0.41 kB
dist/assets/icon-03-53e50533.svg 0.97 kB │ gzip: 0.41 kB
dist/index.html 1.33 kB │ gzip: 0.60 kB
dist/assets/favicon-17e50649.svg 1.52 kB │ gzip: 0.80 kB
dist/assets/user-36-01-9a55a891.jpg 22.39 kB
dist/assets/user-36-05-ba984a9e.jpg 1,317.07 kB
dist/assets/index-ab4d7545.css 63.47 kB │ gzip: 10.66 kB
dist/assets/index-f908d944.js 680.48 kB │ gzip: 209.43 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:

Using dynamic import() to code-split the application
Use build.rollupOptions.output.manualChunks to improve chunking: rollupjs.org/configuration-options...
Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. ✓ built in 1.98s

mosaic-react@0.1.0 deploy
gh-pages -d dist

Published

SaTy • Oct 13 '22

Wow, Thank you so much!

srgeneroso • Nov 24 '23

I don't like this approach. I use git actions to build and deploy after pushing to main branch. I'm trying to get/set some env variables to modify the base parameter in vite.config.

Esteban Hidalgo • Feb 28 '23

How do I update the site once the page is deployed? I read a comment above about using npm run deploy but I don't have that script in my package.json

Vyctoria Karina • Jan 26 '23

Awesome :D

Thank you!! 🙏🏼

thechallengerr • Aug 18 '22

I got blank page after deploy, and i dont know why

Please help

Subhayan Guha Thakurta • Jun 27 '23 • Edited

Follow this: and make sure you create your repository as github.io so that the homepage reads as "https://.github.io/" and not https://.github.io/repo

npm install gh-pages --save-dev

add to package.json
"homepage": "https://.github.io/",
...
"scripts": {
.......keep everything unchanged, just add the following three lines in script and make sure commas are proper....
"build": "vite build",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
...
and then run command npm run deploy

Dennis Quesada Cruz • Sep 25 '22

Me too, did you solved it? i'm using Vue 2

lidorbt • Nov 26 '22

It happened to me too. I used the first comment guy's suggestion and used npm install gh-pages --save-dev and gh-pages -d dist command instead and it worked.