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.

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

export default defineConfig({
  plugins: [react()],
  base: "https://hectorbliss.github.io/borrame", // <= agrega la llave base
});

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:

git remote add origin https://github.com/HectorBlisS/borrame.git

Paso 2: Instalando gh-pages

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

npm install gh-pages --save-dev

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.

// ...
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
// ...

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:

npm run deploy

¡Super! Hosting gratuito sin dolor.

¿Genial no?

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

https://hectorbliss.github.io/borrame

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

Abrazo. blissmo. 🤓