DEV Community

Veritechie
Veritechie

Posted on

Deploy tu proyecto de React.JS en Github-Pages

¡Ya está!, mi proyecto funciona en local y ya está subido y guardadito en un repositorio en github! ¡Quiero la magia de github pages!

Github-pages: Servicio que me ofrece Github para poder almacenar en la nube mi proyecto y visualizarlo.

  1. Abrimos la terminal de nuestro ID favorito donde tengamos ubicado nuestro proyecto e instalamos el paquete de Gh-pages
npm i -D gh-pages
Enter fullscreen mode Exit fullscreen mode

(Con -D lo instamamos en el package.json como devDependencies)

  1. En nuestro archivo package.json añadimos la siguiente linea, justo debajo de "name": "nombredetuproyecto", por ejemplo.
"homepage":"https://GITHUBUSER.github.io/REPONAME"
Enter fullscreen mode Exit fullscreen mode

Introduce tu nombre de usuario y el nombre de tu repositorio de Github y agrégalo arriba.

  1. En el mismo archivo, dentro de "scripts": {, añade:
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build"
Enter fullscreen mode Exit fullscreen mode
  1. ¡Volvemos a la terminal! Ahora ejecutamos:
npm run build
Enter fullscreen mode Exit fullscreen mode
  1. Y por último...
npm run deploy
Enter fullscreen mode Exit fullscreen mode

¿Cómo sé que he tenido éxito?, algo así te tiene que mostrar:
Deploy done

Además si actualizas tu repositorio en github verás que fue creada la rama de gh-pages. La url de acceso debería de verse así:

https://GITHUBUSER.github.io/REPONAME/
Enter fullscreen mode Exit fullscreen mode

Si te fijas bien podrás ver actualizado en tu repo que github-pages está activo!
enviroments

¡Enjoy!

Discussion (0)