How to Deploy Your Vite App to Github Pages

[@sebastianteaca7794]

Wow, this is probably one of the best tutorials I have ever watched on youtube. 10/10. Literally 100% to the point, easy, coherent, adheres to best practices and explains everything. I don't usually comment on videos, but this tutorial really impressed me.

[@kevincarter1645]

To recommit new changes and push up to the remote repository: 1. On remote repository delete the "gh-pages" branch. 2. In you local repository run this command: npm run build (1:56) 3. git add dist -f (2:05) 4. git commit -m [your commit message here] (2:17) 5. git subtree push --prefix dist origin gh-pages (2:20) 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.

[@chriskim8566]

Hey! I didn't have to delete my "gh-pages" branch. I just pushed up my new dist file. Github made the changes live within a few minutes.

[@filipradinovic9309]

@@chriskim8566 For me it says 'rejected' (non-fast-forward) when I run git subtree push --prefix dist origin gh-pages the second time. Any tips?

[@Joshbo5H]

@@filipradinovic9309 I had this problem when going between devices and making changes. I had to delete my gh-pages branch then it worked.

[@Joshbo5H]

Does your master branch contain the dist folder? I either added mine then pushed to master by accident or it does it automatically.

[@annieleonhart-f3x]

thank you, kind man, I'm a beginner and your comment helped me out

[@vuchke]

1 like is not enough for this.... spent 1 hour googling, then came here and did it in 2 mins hats off my good man

[@LearnVue]

glad it still works! haha

[@vuchke]

@@LearnVue ❤

[@jordan_w]

Finally someone who explains the meaning behind the steps! Managed to get my Threejs project deployed finally, thank you! :D

[@LearnVue]

Glad it helped!

[@zerolelouch22]

Did you follow fireship-io's tutorial for threejs?

[@jordan_w]

@@zerolelouch22 yes!

[@zerolelouch22]

@@jordan_w haha nice same here!

[@keakash7906]

After almost 3 years also, your tutorial is working perfectly and awesome. Thankyou.

[@ksmith4135]

I'm not even using Vue in my Vite project but after an entire day of trying to get my pages site to work this was what finally did it. simple, clear explanation that doesn't omit necessary details but also doesn't waste time. you're a hero dude.

[@L0Ls0ul]

That's one of the best tutorials I've ever watched. I didn't expect to get everything I need in just 4 minutes!

[@molnarcsaba2158]

Man, you are a legend! I struggled to deploy my page on GitHub for two days, following numerous tutorials and forums, but only this method worked for me. Thank you !

[@Maracunator]

I just published my first PWA on GitHub thanks to you!

[@נועהניסים-נ8ה]

You saved me after hours of trying to upload my project to github! Thank you!

[@LearnVue]

glad i could help!

[@Frater-Binyamin]

me too!

[@YogeshYadav-sj4yu]

Thanks a lot , After numerous failed attempts , this video helped me to deploy my applications .

[@aakash8649]

DUDE YOU ARE A GOD, i absolutely hate how confusing it is to update vite codes. thank you

[@weler2491]

The first tutorial that accually worked for me. Thanks a lot :)

[@dennyfedyna9707]

3 minutes ONLY enough to deploy the app, thank you!

[@mlucas5354]

Super quick and to the point. Love it! Got it working right away, thanks a bunch

[@AgustinNazer]

maaan you saved me, after hours of trying to upload my project, i was looking exactly this, thanks!

[@haizu.kun1]

For those who wants to deploy to gh-pages with your own custom domain, at 1:41, omit the "base: ..." line altogether. I spent 2 hours debugging why my website 404, that is the cause. Hope this helps!

[@guiguitoLemon]

hands down the best explanation/method by far

[@anselmosantos4955]

Beast, your explanation was without a doubt the best of the tutorials here on youtube. Thank you very much!

[@depres1on481]

wow, thank you so much! i have been struggling to make it work but finally i did it because of your video!

[@muratkarakaya656]

I will live 2 hours longer thanks to this chanell

[@naqieuddinazman4677]

Thank you very much !!! Finally I can deploy on GitHub pages after 2 days trying to solve this issue 😭😭

[@Lily-um8pl]

Thank you It's my first time to use router and deploy to github, thank you I love you

[@mr-pr0cesss]

Thanks a lot for explaining it instead of just showing the commands

[@CrazyDiamond24]

I'm getting this error for some reason..any insight? Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"

[@Turist_Turist_]

Thank you. i had hard time to understand what i did wrong, your tutorial really help me out

[@MichaelEvans-le8zr]

Thanks for all the help! Do I need to `git add dist -f `, `git commit` , and `git subtree push --prefix dist origin gh-pages` every time? Or is there a quicker way to push?

[@zackplauche]

Hey @LearnVue please reply to this one ^ Tell us how to do it everytime lmao.

[@MVNHD]

@@zackplauche did you figure it out?

[@granmini]

Thank you very much! And then I was tormented with the publication on git-hub pages. I've never had this problem with vue-cli before. Vite is cool, but there are still some points that are worth learning.

[@learnerforlife1338]

A question, now if we make changes in origin/master repo ,do they reflect on our site or we have to again build a Dist and match it with gh-pages?

[@StephanieDawson85]

any answer? wondering the same thing.

[@MVNHD]

@@StephanieDawson85 same here, any luck?

[@ashuzon]

I tried the same, and it does not work together. One need to push the chnages I guess. However, my approach might be solely wrong.

[@Alexony21]

Buddy you are a life saver thanks alot for this amazing step by step tutorial

[@anatoliitytarenko4926]

Awesome it's exactly what I found. Ty a lot man, very understandable and short as it needed

[@olegbukovskiy7484]

Дякую, мені це дуже допомогло :))

[@Gadrawingz]

Precise! My app is successfully deployed!

[@_Enj0y_]

Thanks, Man, :) finally, it worked. you save my day.

[@sunjin222]

This is literally what i wanted thanks this was very helpful

[@sen1817]

IT WORKED! THANK YOU SO MUCH!

[@vahesevachyan9399]

Worked beautifully, thank you!

[@丅-u2h]

Thanks you so much ! -btw if u have some errors! just create an another folder en copy/paste content file in the new one then retry this tuto )

[@PrattsYT]

Simplest Tutorial That best Explaination !!!!!

[@cjay-dcode]

Thanks a lot. This solved my issue of page not found after reloading.

[@kadircanyazc2460]

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?

[@sguitas]

Me too. Any solutions? I did exactly as the video said, many times, but it just display an error 404 page.

[@DanBowles]

You saved me from writing yaml. Bless you 😅

[@rithikguleria8278]

Tried everthing yesterday night but nothing worked thankyou so muchh for this❤️❤️

[@adityapathak300]

please help me how to get the vite.config.js file

[@arthurq7843]

Great vid!!! Helped a lot THANKS!!!!

[@janhorak5363]

I have a problem, that when i push to my main repo, the created dist folder is pushed also, as it was forcefully added. How do i prevent this?

[@enoligareta3278]

Perfect! Thank you very much!

[@ukyawminthein2578]

Thanks for your sharing and it is very useful to me for upload to github.

[@ryandaepic1838]

How do it push to main branch? If I do git push origin main it still pushes the dist folder as well

[@mariia-travels]

Thank you so much for this tutorial!

[@shivanshsharma7422]

Thank you so much this really helped me out bro.

[@LearnVue]

No problem 👍

[@ahmedallawi8638]

Thank you very much, but there is still a problem, which is that when I am not on the home page and reload, a 404 error appears

[@iligol3]

Thank you very much, very quick and helpful!

[@SowmyaNaik-u5y]

Can you create a video for organisation level repositories. This seems to be working perfectly fine for personal repo, but shows 404 error on org repo.

[@mrchedda]

Thanks so much for this video. It really helped me solve the problem of pushing staged items to a separate branch. But now I'm experiencing a couple things. 1. my dist folder is not getting added to staged area anymore. 2. How do you push updates to the gh-pages subtree now? Thanks in advance for any help from you or anyone!

[@vanhelsingx69x]

@mrchedda did you find a sollution for updating gh-pages?

[@mrchedda]

@@vanhelsingx69x this comment is one newborn old, I forget if I solved it or not 🙁

[@hymerrathebarbarian]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@efemenaekagha3406]

Wow every step worked, thanks alot.

[@arnabsaha8436]

Thanks a lot. For explaning step by step.

[@dhaniprolink611]

hey, thanks for the tutorial, it works, but mine, all of the images are gone undetected... maybe because it's placement has been changed... how do i fix it?

[@alexbcn77]

Amazing video! If it's a Vue3 ts project do I need to add a vue.config.js file? Thank you!

[@ickass]

super helpful! thank you!

[@velkanalpha]

Thanks man... perfect explained.

[@moisesn]

excellent tutorial! Thanks!

[@АйдынГалымжанулы]

Bro, i have broblem when i update the page i have error 404, how can i solve this in vue app?

[@eugeniakapusta4902]

after git subtree push --prefix dist origin gh-pages, I have mistake: git: 'subtree' is not a git command. See 'git --help'.

[@VijayCse-k6i]

Sir addFolder in dist folder this folder media only datas how to config.js

[@Isythos]

So I have a question. Does this mean if I commit to the master branch in the future the dist folder will automatically be commited to the gh_pages branch separately?

[@ilordepic]

thanks man it was a huge help

[@ianshaw6085]

Hey great video. What is the best way to push further changes to the gh-pages branch?

[@ianshaw6085]

I was having issue updating the subtree and in the end deleted it on github and then re-pushed. This isn't obviously the correct way but it works. Any pointers how to update the subtree properly?

[@indiekidney3890]

you just have to redeploy it if you want to update the site: npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@anthonyngooo]

@@indiekidney3890 been trying this and run into errors: error: failed to push some refs to 'url', hint: updates were rejected because a pushed branch tip is behind its remote. using a different branch resolved the issue, but like OP said doesn't seem to be the correct way

[@thehero9]

@@anthonyngooo hey bro have you found a way to fix the "behind its remote"?

[@anthonyngooo]

@@thehero9 so I did what the OP did, except I re-pushed onto a new branch instead of deleting the gh-pages branch and pushing again to a “new” gh-pages branch Hope that makes sense

[@vanhelsingx69x]

How to update it? Like I deployed it yesterday on gh-pages. Today I have a new update.. how can I see the update in gh-pages?

[@hymerrathebarbarian]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@andilemasela2719]

Hi, How would I deploy the repo if it is an organization private repo?

[@thebunsenburner]

Trying to get this to run on a custom domain is such a pain. Really wish there were better directions available online for this. :'(

[@phantomx3710]

How can i update my gh-pages if i make changes to the main branch?

[@vanhelsingx69x]

@phantomx3710 Did you find a sollution?

[@hymerrathebarbarian]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@liubuntu]

Thank you a lot! That was extremely helpful.

[@synglrty]

help me pls, after visiting my site i have empty page and 0 errors ,wtf is this?

[@stratocaster1134]

This was a perfect video, thankyou! One question. How do I update the gh-pages when I have added more code to my project?

[@vanhelsingx69x]

@stratocaster did you find a solution?

[@hymerrathebarbarian]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@tatsumii1420]

does this method work with react also?

[@ИльяСкладник]

Cool! Thank you!

[@ArmandoPineda4]

You're awesome! Muchas gracias.

[@adimac9346]

Clear and fast!

[@zerolelouch22]

Does anyone else get error "loading module from (name of repo) was blocked because of a disallowed MIME type (“text/html”)"? It seems to block my index.html from linking the js files.

[@dodsamwan4099]

Hey, how did you solve this?

[@edgardevelops]

@@dodsamwan4099 you might have missed the base: part of the video on vite.config.js

[@mephistolezz]

@@edgardevelops I also have this error and I did put in the base?

[@edgardevelops]

@@mephistolezz if you are using the main repository, you have to make the root your base, if you are using other repository then you have to update the base repository depending on the url of the repo, if that make sense.

[@joemalone8685]

Awesome. Just awesome.

[@AgustinNazer]

Its the same with react ?

[@yogyyconst]

big help, thanks.

[@MP-xz7om]

it worked to host it, but my google popup signin is blocked when i try to login

[@MP-xz7om]

fixed it, had to add the github domain in firebase in authentication

[@codeAbinash]

Thanks a lot 💖💖💖💖

[@thangtrieu1499]

excellent ,thank you very much !

[@Pages_Perfected]

Very helpful vid Thanks

[@kaungmyat4438]

thanks sir, it's help me alot

[@dragon3602010]

awesome thanks, is it possible to make videos about Nuxtjs with Vite to make static websites, thanks in advance

[@LearnVue]

okay! would you be looking more for beginner level “how nuxtjs works and how to get setup” or more intermediate/advanced guides?

[@dragon3602010]

@@LearnVue for more intermediate level if it's possible 😊, thanks

[@estefonokaleidos3355]

Man, i love u!!!

[@zackplauche]

BE WARNED: OP only shows how to deploy it once, not more than once.

[@thuannguyenvo5831]

It says: It looks like either your git installation or your git-subtree installation is broken when I run git subtree push --prefix dist origin gh-pages. How should I fix this?

[@LearnVue]

what's the error you're getting?

[@mike110111]

@@LearnVue I'm getting this hint: Updates were rejected because a pushed branch tip is behind its remote hint: counterpart. Check out this branch and integrate the remote changes hint: (e.g. 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details.

[@mike110111]

I think it's because I used a custom domain name and github pages put a CNAME file into the gh-pages branch

[@mike110111]

No idea what to do now. Everything I do breaks for some reason

[@mike110111]

this seems to have fixed it: put this into vite.config.js export default { build: { emptyOutputDir: false } } (makes sure you don't clear the output folder on build)

[@victorpazb]

Gained another subscriber!

[@Frusticks]

What should I do if I want to update the page? the git subtree push command is being rejected because there's already a branch with that name. Do I delete it and repush?

[@KevinHernandez-wm9gj]

I got the same error, so. I deleted the branch and enviroment in github and push again the subtree command and it works

[@hymerrathebarbarian]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@eliabenascimentosilva8400]

Can you teach how to deploy vite into heroku?

[@Gabriel-yl8cb]

Thank you ❤️

[@LearnVue]

You’re welcome 😌

[@psybitcoin]

How to redeploy?

[@weirddev]

npm run build git add dist -f git commit -m "..." git subtree push --prefix dist origin gh-pages

[@ryandaepic1838]

@@weirddev But when you do the normal `git push origin -u main` after, it pushes the dist folder as well to the main branch remotely. Is there a fix for this or work-around?

[@shoebmerchant9797]

@@ryandaepic1838 Just undo the commit and remove the files from staging

[@_regman]

@@shoebmerchant9797

[@juancaycho6711]

Gracias, me sirvió bastante

[@gigatoxishvili9991]

omg bruh I cant thank you enough

[@webtech460]

Cool.. Thank You.