GitHub
github.com › sitek94 › vite-deploy-demo
GitHub - sitek94/vite-deploy-demo: Deploy Vite app to GitHub Pages using GitHub Actions · GitHub
Otherwise, you won't be able to host your app using GitHub pages. Once the repo is created, copy and paste the instructions similar to these to your terminal · git remote add origin git@github.com:sitek94/vite-deploy-demo.git git branch -M main git push -u origin main
Starred by 383 users
Forked by 54 users
Languages JavaScript 52.8% | CSS 34.4% | HTML 12.8%
Medium
medium.com › @aishwaryaparab1 › deploying-vite-deploying-vite-app-to-github-pages-166fff40ffd3
Deploying Vite Deploying Vite App to GitHub Pages | by Aishwarya Parab | Medium
July 12, 2023 - import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], base: "/book-landing-page/" }) Install gh-pages package as a dev dependency.
Deploying First Vite Project on GitHub Pages
However, when I build and deploy my project for "gh-pages", a new branch is created which only contains a "dist" folder. Yes this is the intention. When deploying to Github Pages, the `gh-pages` branch is a "special" branch that just contains your build output so that Github Pages can read and serve it. More on reddit.com
5
0
June 12, 2024Problems with hosting react/vite project on github pages with a custom domain
Have you tried one of these guides? https://vitejs.dev/guide/static-deploy.html https://github.com/sitek94/vite-deploy-demo More on reddit.com
18
0
July 8, 2023Error while deploying react vite app to github pages
Football More on reddit.com
6
1
July 23, 2024I have a react/vite app that I am struggling to deploy to GH pages
Add base:"./" to your vite config, that makes it deploy to a sub-URI better https://vite.dev/guide/build#relative-base e.g. export default defineConfig({ plugins: [react()], base: './' }) More on reddit.com
1
0
January 18, 2025Videos
07:39
How To Deploy A React Vite App To Github Pages (Simple) - YouTube
22:17
Build & Deploy React Vite Website on Github Pages (CI/CD) - YouTube
05:22
How to Deploy Vite + React App to GitHub Pages in 5 Minutes! 🌍 ...
02:27
How to deploy a Vite (React/Vue) project on Github pages - Host ...
Deploy Vite React App to GitHub Pages (2024) - YouTube
Deploy Vite React App to GitHub Pages (2025) - YouTube
Vite
vite.dev › guide › static-deploy
Deploying a Static Site | Vite
When you are ready to go into production, use the prod flag: netlify deploy --prod. Push your code to a git repository (GitHub, GitLab, BitBucket, Azure DevOps). Import the project to Netlify.
Savas Labs
savaslabs.com › blog › deploying-vite-github-pages-single-github-action
Deploying Vite to GitHub Pages with a Single GitHub Action | Savas Labs
April 15, 2025 - First, you’ll need to adjust the GitHub Pages settings. You’ll find that setting at https://github.com/{orgName}/{repoName}/settings/pages - Under Build and deployment, you’ll want to set the Source to GitHub Actions.
GitConnected
levelup.gitconnected.com › deploy-your-vite-app-to-github-pages-a-lazy-devs-guide-37b0b472fa35
Vite to live in 5 minutes! The Lazy Dev’s Guide to GitHub Pages | by Deepak Surya | Level Up Coding
April 2, 2025 - After deployment, head over to your repo settings, find the Pages section, and set the source to gh-pages. Boom — your app is now live at https://{username}.github.io/{repo-name}/. You need to add a basename so the routing doesn’t break.
Medium
mkay11.medium.com › how-to-deploy-your-vite-vue-3-application-in-github-pages-2023-2b842f50576a
How to Deploy Your Vite/Vue 3 Application in GitHub Pages 2023 | by Monica K | Medium
July 7, 2023 - You have to simply prefix all links in your application with <REPONAME> to get it to work in GitHub pages. Luckily, Vite has a build option that will allow you to do just that.
GitHub
github.com › marketplace › actions › vite-github-pages-deployer
Vite Github Pages Deployer · Actions · GitHub Marketplace
name: Vite Github Pages Deploy on: # Runs on pushes targeting the default branch push: branches: ["master", "main"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: # Build job build: runs-on: ubuntu-latest environment: name: demo url: ${{ steps.deploy_to_pages.outputs.github_pages_url }} steps: - name: Checkout uses: actions/checkout@v3 - name: Vite Github Pages Deployer
Reddit
reddit.com › r/reactjs › deploying first vite project on github pages
r/reactjs on Reddit: Deploying First Vite Project on GitHub Pages
June 12, 2024 -
Hello, I'm creating a simple Note Recorder app with Vite. As many people suggest, I'm trying to track my project with Git and Github. My repository is working fine and I learned how to push recent changes.
However, when I build and deploy my project for "gh-pages", a new branch is created which only contains a "dist" folder.
Is it a good practice to have a "main" branch for inspecting my code as it is originally structured and a "gh-pages" (or whatever name) branch for deploying it?
The purpose of all this is having a portfolio on my resume so recruiters can take a look. This project is simple and uses Local Storage. I want to add more projects in the future using other tools such as Nextjs and a Mongo or Postgres database.
Top answer 1 of 3
4
However, when I build and deploy my project for "gh-pages", a new branch is created which only contains a "dist" folder. Yes this is the intention. When deploying to Github Pages, the `gh-pages` branch is a "special" branch that just contains your build output so that Github Pages can read and serve it.
2 of 3
1
I did the same. But for some reason, none of the gifs and images that I had in my pre-build are no longer being displayed. What's wrong? Can anyone help me with this? I am also facing another issue, my website is a multi-page vite+react app. When I get onto the webapp homepage using the direct url, everything is alright, I am able to navigate to the other sub-pages of the website as well, but if I directly type the url with the path to the subpage in the url itself, the website shows 404 error. What is wrong and how to handle this? I don't know if I am making sense above. Please help me out.
DEV Community
dev.to › dwtoledo › deploying-a-vite-app-on-github-pages-using-github-actions-with-github-secrets-1hn0
Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets - DEV Community
August 10, 2024 - In my case, the secret name is "VITE_OPEN_AI_KEY" and the value is "My OpenAI Key Value": ... Select GitHub Actions on Build and Deployment Source. ⚠️ This file is important because it will trigger GitHub Actions to use GitHub Secrets, build, ...
DEV Community
dev.to › shashannkbawa › deploying-vite-app-to-github-pages-3ane
Deploying Vite App to GitHub Pages - DEV Community
May 29, 2022 - function App() { const router = createBrowserRouter( createRoutesFromElements( <Route path="/" element={<Tag />}> ...................................... </Route>, ), { basename: '/repo-name' }, ); ... 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.
GitHub
github.com › ErickKS › vite-deploy
GitHub - ErickKS/vite-deploy: Guide for vite react app deploy · GitHub
name: Deploy on: push: branches: - main jobs: build: name: Build runs-on: ubuntu-latest steps: - name: Checkout repo uses: actions/checkout@v3 - name: Setup Node uses: actions/setup-node@v3 - name: Install dependencies uses: bahmutov/npm-install@v1 - name: Build project run: npm run build - name: Upload production-ready build files uses: actions/upload-artifact@v3 with: name: production-files path: ./dist deploy: name: Deploy needs: build runs-on: ubuntu-latest if: github.ref == 'refs/heads/main' steps: - name: Download artifact uses: actions/download-artifact@v3 with: name: production-files path: ./dist - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist ·
Starred by 355 users
Forked by 67 users
Languages CSS 51.2% | TypeScript 38.3% | HTML 10.5%
GitHub
github.com › The-Marcy-Lab-School › 2-3-3-resource_deploying-with-github-pages
GitHub - The-Marcy-Lab-School/2-3-3-resource_deploying-with-github-pages: This resource covers deploying a front-end Vite web app using Github Pages · GitHub
This resource covers deploying a Vanilla JS Vite app using Github Pages. Note: An alternate (and more complex, but potentially smoother) approach can be found on Vite's own docs. ... A Github repo with that Vite project inside. ... ... a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. There are a few ways to utilize Github Pages but the most straightforward is to have an index.html in the root of our repo that Github Pages can easily find and serve.
Author The-Marcy-Lab-School
Educative
educative.io › answers › deploying-vite-project-to-github-pages
Deploying Vite project to GitHub Pages
We set the base URL of our project in our vite.config.ts file. Here projectname is the name of our repository. ... We create a create a .github folder. In this folder, we make a folder named as workflows which keeps all our workflows to be implemented on our GitHub repository. This folder contains our yml file named as deploy.yml.
YouTube
youtube.com › learnvue
How to Deploy Your Vite App to Github Pages - YouTube
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 ...
Published May 16, 2021 Views 62K
GitHub
github.com › skywarth › vite-github-pages-deployer
GitHub - skywarth/vite-github-pages-deployer: Deploy your Vite application to Github pages, plug-and-play. · GitHub
name: Vite Github Pages Deploy on: # Runs on pushes targeting the default branch push: branches: ["master", "main"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: # Build job build: runs-on: ubuntu-latest environment: name: demo url: ${{ steps.deploy_to_pages.outputs.github_pages_url }} steps: - name: Checkout uses: actions/checkout@v3 - name: Vite Github Pages Deployer
Starred by 39 users
Forked by 5 users
DevGenius
blog.devgenius.io › how-to-deploy-your-vite-react-app-to-github-pages-with-and-without-react-router-b060d912b10e
How to Deploy Your Vite React App to GitHub Pages (With and Without React Router) | by Fitrahtur Rahman | Dev Genius
November 8, 2023 - This is because GitHub Pages is looking for about.html while our app is a single page application which has only index.html. To prevent this, update the following line on our deploy.yml: ... By default, GitHub Pages will look for 404.html if there is no specified document provided. What happens here is we create a copy of our index.html as 404.html. Join Medium for free to get updates from this writer. ... The source code of this guide can be found here. This method is only for those who want to deploy their Vite React app to https://<OUR_GITHUB_USERNAME>.github.io/<REPO_NAME>/ path.
DEV Community
dev.to › rashidshamloo › deploying-vite-react-app-to-github-pages-35hf
Deploying Vite / React App to GitHub Pages - DEV Community
April 15, 2023 - Change YOUR_REPOSITORY_NAME to the name of your GitHub repository. ... 🎉 You now have a gh-pages branch in your repository and your app is deployed (you can check it under Settings -> Pages ) P.S. To update your app deployment, just run the ...
Briangrinstead
briangrinstead.com › blog › publishing-vite-project-to-github-pages
Automatically Publishing a Vite Project to GitHub Pages - Brian Grinstead
If you don't already have one npm create vite@latest, and cd into the directory. Then: git init git add . git commit -m "initial commit" git branch -M main git remote add origin http://github.com/username/repo-name.git git push -u origin main · If you don't already have a gh-pages branch you ...
Medium
ucilasmana.medium.com › deploying-a-static-vite-app-on-github-pages-with-github-actions-03a67bb9ac4e
Deploying a Static Vite App on GitHub Pages with GitHub Actions | by Uci Lasmana | Medium
August 15, 2025 - # Simple workflow for deploying static content to GitHub Pages name: Deploy static content to Pages on: # Runs on pushes targeting your default branch push: branches: ['master'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow one concurrent deployment concurrency: group: 'pages' cancel-in-progress: true jobs: # Single deploy job since we're just deploying deploy: environment: name: github-pages url: ${{ steps.deployment.outp
DEV Community
dev.to › ishmam_abir › publish-a-vuejs-3vite-project-on-github-pages-2a0b
Publish a Vue.js 3/Vite Project on GitHub Pages - DEV Community
June 3, 2025 - Go to your GitHub repository. Navigate to Settings > Pages. In the Source section,select 'Deploy from a branch', then select the 'gh-pages' branch.