Cómo publicar una web React con Vite en GitHub

Tiempo de lectura: 2 minutos

Crearemos un sitio web simple, lo subiremos a GitHub y lo publicaremos en GitHub Pages. 🌟

Paso 1: Crear tu Aplicación con Vite

Primero, necesitamos nuestra aplicación React lista. Si aún no la tienes, sigue estos comandos:

npm create vite@latest nombre-proyecto --template react
cd nombre-proyecto
npm install

Paso 2: Configurar Vite para GitHub Pages

GitHub Pages requiere que las rutas estén bien definidas, por lo que debemos ajustar nuestro archivo vite.config.js:

Abre vite.config.js y añade la propiedad base con el nombre de tu repositorio:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: '/nombre-repositorio/', // Cambia 'nombre-repositorio' por el nombre de tu repo
  plugins: [react()],
});

Paso 3: Preparar el Despliegue con gh-pages

Para facilitar el proceso de despliegue, vamos a usar la herramienta gh-pages. Sigue estos pasos:

1. Instala gh-pages como dependencia

npm install gh-pages --save-dev

2. Agrega un nuevo script en tu package.json para realizar el despliegue

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

Paso 4: Construir y Desplegar

A continuación vamos a generar la versión y subirla a GitHub Pages.

1. Crea una rama que se llame gh-pages
2. Genera los archivos.
3. Despliega la aplicación

npm run build
npm run deploy

Esto subirá los archivos de tu carpeta dist/ a la rama gh-pages.

Paso 5: Configurar GitHub Pages

Ahora ve al repositorio en GitHub:

1. Dirígete a Settings > Pages.
2. En la sección Source, selecciona la rama gh-pages.
3. Guarda los cambios y espera unos minutos.

Tu aplicación estará disponible en:
https://tu-usuario.github.io/nombre-repositorio/

Espero que les sirva de ayuda y que tengan un feliz día!