Github-pages usando gh-pages y Vite

Si utilizas 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á instalar gh-pages

npm install gh-pages --save-dev

Según la documentació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 [e-mail]:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f [e-mail]:<USERNAME>/<REPO>.git main:gh-pages

cd -

Y modificamos la ultima linea cambiando el USERNAME Y REPO


git push -f [e-mail]:<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