How to Deploy Your Vite App to Github Pages

Deploying a Vue 3 Vite app is nothing to be afraid of. In this video, I'll walk you through the exact steps to deploy your vue 3 app to Github Pages.

Github Pages lets you serve static files straight from a repository, making it an extremely quick and simple way to publish content online.

The main steps are working with your Vite configuration and setting the base path to connect with your Github Pages URL, building your app, and setting up a special gh-pages branch on your repo for Github Pages.

What do you want to see next on LearnVue? Leave a comment to help decide future videos on this channel!

LINK TO THE CODE

FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

INTRO
Daily (Prod. by Lukrembo)

[kevincarter]

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.

[sebastianteaca]

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.

[jordan_w]

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

[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

[ksmith]

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.

[keakash]

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

[LLsul]

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

[molnarcsaba]

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 !

[aakash]

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

[qbxhtdy]

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

[YogeshYadav-sjyu]

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

[naqieuddinazman]

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

[dennyfedyna]

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

[rithikguleria]

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

[mlucas]

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!

[weler]

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

[muratkarakaya]

I will live 2 hours longer







thanks to this chanell

[kadircanyazc]

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?

[Lily-umpl]

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