Despliega tu proyecto en Github Pages con Vite: una guía para publicar tu sitio web en minutos #

¿Quieres compartir tu proyecto de React con Vite con el mundo? GitHub Pages es una excelente manera de hacerlo, ya que te permite subir tu proyecto a un sitio web gratuito y fácil de usar. A continuación, te mostraré cómo subir tu proyecto de React con Vite a GitHub Pages.

Códigos #

• Repositorio con código final

Install gh-pages #

• más info: El módulo gh-pages es un módulo de npm (Node Package Manager) que permite automatizar la publicación de archivos en una rama gh-pages de un repositorio de GitHub (o cualquier otra rama u otro servicio).

npm i gh-pages -D

vite.config.js #

• ver punto 1

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/el-nombre-de-tu-repositorio/",
});

package.json #

"deploy": "gh-pages -d dist"

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
}

Git init #

git init
git add .
git commit -m "first commit"

Crear repositorio en Github #

Subir el proyecto a Github

git remote add origin https://github.com/${nombre-cuenta}/${nombre-repositorio}.git
git branch -M main
git push -u origin main

npm run build && npm run deploy #

Estos comandos se repiten por cada actualización del proyecto:

npm run build
npm run deploy

Esperar... y listo! #

Es importante mencionar que al usar GitHub pages, no podrás usar funcionalidades que requieran un servidor, como peticiones a bases de datos. También es importante recordar que es recomendable tener un dominio personalizado para dar una mejor impresión a tus visitantes. Pero si lo que buscas es compartir tu proyecto con amigos, compañeros de trabajo o simplemente mostrar tu portafolio, GitHub pages es una excelente opción.