Github-pages usando gh-pages y Vite

Vite para generar tus páginas con React, tienes que saber que se requiere un proceso diferente para poder subir nuestras páginas en github pages usando la alternativa de npm gh-pages , y hoy aprenderás como hacerlo.
Lo primero será 설치 gh-pages
npm install gh-pages --save-dev
Según ladocumentación si tu repositorio es del tipo
https://github.com/<USERNAME>/<REPO>
lo primero seria dirigirnos a nuestro archivo vite.config.js y añadir `la propiedad base con el nombre del repositorio.
export default defineConfig({
base:'/REPO/',
plugins: [react()]
})
Luego creamos un nuevo archivo en la carpeta raíz llamado deploy.sh donde pegaremos el siguiente frarmento de código
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run build
# navigate into the build output directory
cd dist
# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME
git init
git checkout -b main
git add -A
git commit -m 'deploy'
# if you are deploying to https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main
# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages
cd -
Y modificamos la ultima linea cambiando el USERNAME Y REPO
git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-
`
Dentro de el archivo package.json deberémos agregar el los scripts "deploy": "gh-pages -d dist" para hacer el deploy de forma más sencilla.
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"deploy": "gh-pages -d dist"
},
Ahora para terminar tendremos que ejecutar:
git add .
git commit -m 'gh-pages deploy'
npm run build
Con el último comando generaremos una nueva carpeta llamada dist la cual tiene toda la información de nuestra aplicación para poder ser subida a github pages. Por ultimo en la consola
npm run deploy
Si has seguido los pasos en la consola verás que sale un mensaje diciendo Published y en tu pagina de github abajo a la derecha te saldrá lo siguiente.
En caso de que algo mal ocurra y te diga:
fatal: Una rama llamada 'gh-pages' ya existe.latten
Puedes probar con este comando para eliminarla (en linux funciona bien).
rm -rf node_modules/.cache/gh-pages
Reference
이 문제에 관하여(Github-pages usando gh-pages y Vite), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/av952/github-pages-usando-gh-pages-y-vite-1n0n
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)