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.