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...
For further actions, you may consider blocking this person and/or reporting abuse
Or add:
base: "/<repo>/",tovite.config.js,npm install gh-pages --save-devadd to
package.jsonand then run command
npm run deployto keep it simple.THIS is the best method. Much faster deployment time than the article's one.
For a custom domain, change
in
vite.config.jsbase: "/"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
Thanks bro
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?
This just saved my life. Thank you!!!
This is the way!
You saved me! Thanks
My pleasure :D
Hello Im trying to do the same but its still not working ?? can you help me out?
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.
Thanks a lot, man, great job! Very useful instruction!
Thanks master
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.
I have also encountered this problem and thought of sharing this to you all . My pleasure ^_^
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?
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' },
);
Thanks a lot! Adding
{ basename: '/repo-name'}as a second argument tocreateBrowserRouterfunction 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.
Hey, did you fix it?
If yes could you tell us how?
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.
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:
Published
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!
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.
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.
I got blank page after deploy, and i dont know why
Please help
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
It happened to me too. I used the first comment guy's suggestion and used
npm install gh-pages --save-devandgh-pages -d distcommand instead and it worked.Me too, did you solved it? i'm using Vue 2
How do I update the site once the page is deployed? I read a comment above about using
npm run deploybut I don't have that script in my package.jsonAwesome :D
Thank you!! 🙏🏼
Wow, Thank you so much!
thank you
Thank you so much <3
Thanks!!!!! Now I need to update some changes (after deploy). What should I do?
After changes just run the command
npm run deploy