Cómo Publicar tu proyecto Vite en Github Pages con el método más fácil

Subir tu proyecto Vite a Github Pages debería ser fácil, pero por una extraña razón se nos complica bastantito.

Por eso, en esta entrada quiero enseñarte la manera más sencilla de subir tu proyecto Vite a Github Pages para que dejes de sufrir, en solo 3 pasos facilísimos. 🤯

No importa si es un proyecto React, Svelte, Vue u otro, este método funciona para cualquier proyecto Vite. ⚡️

Paso 1: Configura tu proyecto

Ve a tu archivo vite.config.js y agrega la llave base con el nombre de tu repo. Este link es el de la página, NO EL DE TU REPO.

Este link se arma así https://<TU_USUARIO>.gihtub.io/<REPO> .

También, asegúrate de que el remote origin sea el del mismo repo, si no, agrégalo con el comando:

Paso 2: Instalando gh-pages

Instala la biblioteca gh-pages como herramienta de desarrollo con npm.

Paso 3: Agrega el script (comando)

Añade el comando a tu lista de scripts en tu archivo package.json para que en el futuro sea aún más fácil.

Observa que agregue el comando "predeploy" para generar la carpeta build antes de subir. 🤓

👀 Basta con ejecutar deploy para que predeploy se ejecute primero.

Ahora publicamos nuestro proyecto:

¡Super! Hosting gratuito sin dolor.

¿Genial no?

Ahora ya puedes visitar tu sitio web, en mi caso en:

No olvides suscribirte para no perderte nada de Fixtergeek. También checa nuestros cursos, seguro alguno te ayuda a mejorar tus habilidades.

Abrazo. blissmo. 🤓