---
# System prepended metadata

title: Desplegar proyecto de React a gh-pages con vite

---

---
title: "Desplegar proyecto de React a gh-pages con vite"
breaks: false
---
{%hackmd @themes/dracula %}

## Iniciar un nuevo proyecto


**Iniciar un nuevo proyecto basado en React**

```
npm create vite react-rick-and-morty -- --template react
```

**Ingresamos al proyecto**

```
cd react-rick-and-morty
```

**Instalamos las dependencias**

```
npm install
```

---

## Desplegando a gh-pages

**Instalamos el paquete `gh-pages` como dependencia de desarrollo**

```bash!
npm i -D gh-pages
```
**En el archivo `package.json` añadimos lo siguiente**

![](https://hackmd.io/_uploads/HkzmM25Hh.png)

**En el archivo `vite.js` añadimos lo siguiente**

![](https://hackmd.io/_uploads/B1QqYaqB2.png)


**Inciamos un nuevo repositorio local**

```
git init
```

**Usando la herramienta [gh-cli](https://cli.github.com/) creamos un nuevo repositorio remoto basado en este proyecto y lo agrega a la conexión remota**

```
gh repo create --public -s=. -r=origin
```


**Creamos un script de bash, para automatizar los deploy**:

```bash=
#!/usr/bin/env sh
set -e # aborta en caso de error
npm run build # build
cd dist # navegamos a la carpeta dist
git init
git checkout -b main
git add -A
git commit -m "deploy"
# -------------------
#                        tu usuario / tu repo
#                           👇           👇
git push -f git@github.com:mach-911/react-rick-and-morty.git main:gh-pages
cd -
rm -rf dist
```

![](https://hackmd.io/_uploads/B1iFopcH3.png)

---

## Ejecutar el deploy

**Ya hacemos solo algo sencillo en el componente `App.jsx`**


   
[gist](https://gist.github.com/mach-911/b0edfbfc857fbac59d6006f59649a8a4)
 
<iframe frameborder=0 
        style="min-width: 200px; width: 60%; height: 460px;" 
        scrolling="no" 
        seamless="seamless" 
        srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/5e0507d93d4c89023b2ba5f39f27f722.js"></script></body></html>'
        ></iframe>
 


**Y finalmente hacemos el deploy**

```
npm run deploy
```

@[demo](https://mach-911.github.io/react-rick-and-morty/)


