Github-pages usando gh-pages y Vite
Published: 2022-09-14 15:24:49

![viteimage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zcpr2ev8f4fyzn05e4c.png)

Si utilizas Vite para generar tus páginas con React, tienes que saber que se requiere un proceso diferente para poder subir nuestras páginas en github pages usando la alternativa de **npm** [gh-pages](https://www.npmjs.com/package/gh-pages), y hoy aprenderás como hacerlo.

Lo primero será instalar gh-pages

    npm install gh-pages --save-dev

Según la [documentación](https://vitejs.dev/guide/static-deploy.html) si tu repositorio es del tipo ``https://github.com/<USERNAME>/<REPO>`` lo primero seria dirigirnos a nuestro archivo **vite.config.js** y añadir `la propiedad *base* con el nombre del repositorio.

<pre>
<code>
export default defineConfig({
  base:'/REPO/',
  plugins: [react()]
})
</code>
</pre>
Luego creamos un nuevo archivo en la carpeta raíz llamado **deploy.sh** donde pegaremos el siguiente frarmento de código

<pre><code><span class="line"><span style="color:#676E95;">#!/usr/bin/env sh</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># abort on errors</span></span>
<span class="line"><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;"> -e</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># build</span></span>
<span class="line"><span style="color:#A6ACCD;">npm run build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># navigate into the build output directory</span></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> dist</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># if you are deploying to a custom domain</span></span>
<span class="line highlighted"><span style="color:#676E95;"># echo 'www.example.com' &gt; CNAME</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">git init</span></span>
<span class="line"><span style="color:#A6ACCD;">git checkout -b main</span></span>
<span class="line"><span style="color:#A6ACCD;">git add -A</span></span>
<span class="line"><span style="color:#A6ACCD;">git commit -m </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">deploy</span><span style="color:#89DDFF;">'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># if you are deploying to https://&lt;USERNAME&gt;.github.io</span></span>
<span class="line highlighted"><span style="color:#676E95;"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git main</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;"># if you are deploying to https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;</span></span>
<span class="line highlighted"><span style="color:#676E95;"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;REPO&gt;.git main:gh-pages</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> -</span></span>
<span class="line"></span></code></pre>

Y modificamos la ultima linea cambiando el **USERNAME** Y **REPO**

```
     git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-
````

Dentro de el archivo **package.json** deberémos agregar el los scripts **"deploy": "gh-pages -d dist"** para hacer el deploy de forma más sencilla.

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


Ahora para terminar tendremos que ejecutar:

    git add .
    git commit -m 'gh-pages deploy'
    
    npm run build
    
Con el último comando generaremos una nueva carpeta llamada **dist** la cual tiene toda la información de nuestra aplicación para poder ser subida a *github pages*. Por ultimo en la consola

    npm run deploy

Si has seguido los pasos en la consola verás que sale un mensaje diciendo **Published** y en tu pagina de github abajo a la derecha te saldrá lo siguiente.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6cx0qwkczscms8m1y5s.png)

En caso de que algo mal ocurra y te diga:

    fatal: Una rama llamada 'gh-pages' ya existe.latten 

Puedes probar con este comando para eliminarla (en linux funciona bien).

    rm -rf node_modules/.cache/gh-pages