How to Deploy Your Vite App to Github Pages
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they followed for deploying a Vite project to GitHub Pages, usually when asking why the deployed site shows a blank page, a MIME type error, or breaks after adding a custom domain.
Recommended by 0 people across 0 different months, 2022 to 2023.
What it is
A short screencast by LearnVue (Matt Maribojoc) showing how to publish a Vite app, demonstrated with Vue 3, to GitHub Pages. It covers setting the base path in vite.config.js, building the app, and pushing the dist folder to a gh-pages branch.
What people said
Cites Santhosh Dhaipule Chandrakanth · 2022-02 · Stack Overflow · on “blank screen on website after configuring apex domain and www subdomain variant on github”
I am using vite+svelte wanted to host my webpage using github pages Deployed Vite app as showed in the video How to Deploy Your Vite App to Github Pages [this video] Create a repo repo1 on github all stuff git init git add . git commit -m "comment" git branch -M main git remote add origin https:// ........git Changed the base url inside vite.config.js import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' // [LINK] export default defineConfig({ base: '/repo1/', plugins: [svelte()] }) npm run build git add dist -f git commit -m "add dist" git subtree push --prefix dist origin gh-pages Got website running with this extension [LINK] Wanted to add a custom domain to
Cites AntAnt · 2022-11 · Stack Overflow · on “Lost local files after git pull --rebase origin [branch]”
Was trying to deploy my vue/vite project onto github pages and use a custom domain, but ran into some issues and messed things up by using git commands I didn't fully understand The deployed project worked before I tried adding a custom domain Followed instructions from the following video to deploy a vite project onto github pages: [this video] Followed instructions from here to add custom namecheap domain: [LINK] npm run build, git add dist -f git commit -m "adding dist" git subtree push --prefix dist origin gh-pages // [rejected] error: failed to push some refs to 'url', hint: Updates were rejected because the remote contains work that you do not have locally. This is usually caused by another
Cites Rens Jespers · 2023-06 · Stack Overflow · on “Loading module from “website.js” was blocked because of a disallowed MIME type (“text/html”)”
I have followed this tutorial [this video] my github repository file is located at ..\WPL\WalnutCoding\WalnutCoding so the codes i had to run from the tutorial where the next git add walnutcoding\dist -f git commit -m"new" git subtree push --prefix walnutcoding\dist origin gh-pages this is the repository adress [LINK] and this should be the website it is build upon [LINK] the build is succesfull apperently, but it's still not showing anything, so I assume there is an issue with the base I've set in my vite.config.ts, <- typescript this is the vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // [LINK] export defau