Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    npm create vite@latest nombre-proyecto --template react
    cd nombre-proyecto
    npm install
    npm create vite@latest nombre-proyecto --template react cd nombre-proyecto npm install
    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:

      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      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()],
      });
      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()], });
      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
      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      npm install gh-pages --save-dev
      npm install gh-pages --save-dev
      npm install gh-pages --save-dev

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

      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      {
      "scripts": {
      "deploy": "gh-pages -d dist"
      }
      }
      { "scripts": { "deploy": "gh-pages -d dist" } }
      {
        "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
      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      npm run build
      npm run deploy
      npm run build npm run deploy
      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!

      0

      Deja un comentario