--- 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/)