Como subir tu proyecto de React a GitHub Pages
Tags: react, github, spanish, webdev
Published: 2022-05-27 06:31:05

## Introducción

En esta ocasión de mostrare como hacer deploy de tu proyecto de react al servidor de paginas estáticas de github pages. Si sabes que es react seguramente sabrás que GitHub y tendrás tu cuenta, si es así  [sígueme en github](https://github.com/aramxD/). Por otro lado Github Pages es un servicio adicional de hosting de paginas estáticas (solo HTML, JavaScript y CSS) que **NO FUNCIONA COMO SERVIDOR BACKEND**, es un servicio gratuito y sencillo de usar.

## Preparación
Antes de iniciar el proceso de deploy en GitHub Pages debes tener lo siguiente:

 - [x] Cuenta de GitHub
 - [x] Git instalado en tu computadora
 - [x] Proyecto web en su repositorio en GitHub
 

## Instalación de gh-pages
El primer paso será instalar el paquete gh-pages que nos ayudara a convertir el código de react a archivos estáticos que nos acepte el hosting 

    npm install --save-dev gh-pages

recuerda que las banderas "--save-dev" asignan la instalación como dependencias de desarrollo. Una vez que se haya instalado verifica en el archivo package.json que se haya agregado el paquete

    },
    ...
    "devDependencies": {
	    "gh-pages": "^4.0.0"
	    }
	...
	   }

## Configuración package.json
Para configurar nuestro archivo package.json debemos agregar las siguientes reglas, la primera será **homepage** la vamos agregar después de "**devDependencies**"

     },
    ...
    "devDependencies": {
	    "gh-pages": "^4.0.0"
	    },
	 "homepage": "https://USUARIO_GITHUB.github.io/NOMBRE_DE_REPOSITORIO"
	...
	   }

Para esta regla de "homepage" es importante que coloques TU usuario de github y el nombre del repositorio que estas utilizando, por ejemplo

    "homepage": "https://aramxD.github.io/react-fetch-exercise"

Ahora vamos a agregar un par de scripts,  llamados "predeploy" y "deploy" que nos ayudara a preparar nuestra aplicación para subirla a los servidores de GitHub

    },
    "scripts": {
	    "start": "react-scripts start",
	    "build": "react-scripts build",
	    "test": "react-scripts test",
	    "eject": "react-scripts eject",
	    ...
	    "predeploy":"npm run build",
	    "deploy": "gh-pages -d build
	    ...
    },

No olvides guardar los cambios

## Ejecutamos Deploy
Con los scripts preparados ejecutamos en nuestra terminar el script "deploy"

    npm run deploy

No olvides que la terminal debe esta en la carpeta de nuestro proyecto.
Una vez que termine la ejecución de nuestro comando, podrás ver que se creo una carpeta llamada "build"


![carputa build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45tglu65gkxtbgyndoxg.png)

En esta carpeta encontraras lo archivos estáticos de nuestro proyecto

## Commit y push
Para finalizar debemos guardar los cambios y agregarlos a nuestro repositorio, primero agregamos los cambios con:

    git add --all
lo siguiente será crear el commit con los cambios

    git commit -m"deploy ready"
para finalizar enviamos los cambios al repositorio con "push"

    git push origin master

## Resultados
Para comprobar que todo haya salido bien, entra a tu repositorio y dirígete a settings, en el lado izquierdo encontraras el apartado de **Pages** ahí encontraras el link publico de tu proyecto.
![github settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp8t19ha3roqc53f17j6.png)
> Nota: En ocasiones es necesario esperar unos minutos para que se actualicen los servidores de GitHub Pages y se muestre nuestro proyecto