52

Guía para usar Github-Pages en tus proyectos de React.JS

header-02-min.png

Antes de iniciar, debemos dar por sentado que tu proyecto ya tiene un repositorio en GitHub y se encuentra enlazado con tu repositorio local.
Si aun no cuentas con los conocimientos necesarios en Git y GitHub te recomendamos que tomes el Curso Profesional de Git y GitHub aquí en Platzi.

  1. Abrimos nuestra terminal y nos dirigimos al directorio donde se encuentra nuestro proyecto.
  2. Instalamos Gh-pages mediante este comando:
npm install --save-dev gh-pages

3.Abrimos el archivo package.json que se encuentra en nuestro proyecto y agregamos la propiedad homepage de esta manera:

"homepage":"https://yourusername.github.io/repository-name"

Verifica tu nombre de usuario y el nombre de tu repositorio en GitHub y agrégalo debidamente en la dirección de arriba.

22299-02.png

4.En el mismo archivo package.json agregamos los siguientes scripts:

444-02.png
  1. Volvemos a nuestra terminal y ejecutamos:
npm run build

  1. Ahora solo nos queda ejecutar el ultimo comando que es:
npm run deploy

Si el proceso fue exitoso, la terminal nos mostrará la dirección de nuestro proyecto ya desplegado con GitHub-Pages.
final-02.png

Vayamos a nuestro repositorio en GitHub, veremos que ya fue creada automáticamente la rama Gh-pages y en el área de Settings podremos ver igual la dirección en la que se encuentra desplegado nuestro proyecto.

ffff-02.png

Gracias a estos simples pasos y a la ayuda de GitHub-Pages nuestro proyecto de React.js se encuentra en internet 😃

Escribe tu comentario
+ 2
Ordenar por:
9
78622Puntos

Excelente muchas gracias.

ademas, tras montarlo, si haces cambios se guardan haciendo nuevamente npm run build y npm run deploy así se actualiza la página

3
2 años

Si efectivamente cuando realizo algún cambio a mi proyecto en local y lo quiero subir ejecuto esos dos comandos y listo sin hacer nada mas ya están los cambios en github super bueno.

2

Hola, he visto que mucha gente tiene problemas, yo lo hice hoy(01/07/2020) y no tuve complicaciones, al instalar la dependencia me salian vulnerabilidades, eso sí no supe como resolverlo, pero aún así seguí con el procedimiento que sigue el articulo y todo funcionó.

tips:

  • Escriban bien la url en homepage
  • verifiquen la sintaxis de todo lo que se escribe en este articulo

nota:

  • La app que subí fue creada con el comando create-react-app
2
110Puntos

Al terminar el deploy el link de github está vació y en la consola. Aparece en siguiente error:

Failed to load resource: the server responded with a status of 404()
Manifest: Line : 1, column:1 Syntax error.

2
30746Puntos

Creo el repo y sigo todos los pasos, pero al final cuando ingreso a la pagina sale en blanco y la consola muestra errores de 404.
react_try.png

1
10441Puntos

¡Muchas gracias por estas instrucciones! Pude publicar mi primera github page desde la consola. Muy recomendado también el curso de Git y GitHub.

1
1986Puntos

lo hice con react y me quedo en blanco la pantalla 😦

2
14358Puntos
un año

Si estas redirigiendo hacia un dominio en que no sea el que te da github…

"homepage": "https://pocamularadio.com.ar",
"predeploy": "npm run build && echo pocamularadio.com.ar > ./build/CNAME",```

tenes que poner tu dominio en homepage y a predeploy le decis quete cree un CNAME redirigiendo a tu pagina y se soluciona

1
5099Puntos
un mes

muchas gracias! justo lo que estaba buscando 😄

1
14426Puntos

Solo tengo una duda. Creas un proyecto nuevo solo subiendo los archivos de build, es decir puedo hacer lo mismo, copiando los archivos de build a otra carpeta o creando un proyecto independiente con git init y despues agregarlo al remote para terminar con un git push???

1

Alguiene puede ayudar me sale esto al entrar al enlace de mi página

reactpractica
This project was bootstrapped with Create React App.

Available Scripts
In the project directory, you can run:

npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

0
15317Puntos
un año

Hola Jimmy, estoy teniendo el mismo problema… Has podido solucionarlo?

1
6937Puntos

¡Excelente artículo!
Me sirvió muchísimo para poder enviar una prueba laboral sin necesidad de aprender nada distinto (Netlify, Next.js, Heroku o algo…)

Quedo con una duda: luego de hacer el deploy a producción (que se vea en el gh-pages) ¿Cómo puedo abrir un entorno de desarrollo donde pueda hacer cambios sin que sea “en caliente”?

Lo digo porque después de estas instrucciones ya no me fuciona el “yarn start” que sacaba mi live-server!

1
28360Puntos

Hola, yo tengo 3 dias peleando con esto y quiero postear mis conclusiones, este metodo me funciona, pero usando una llave HTTPS para ponerlo en el remoto, con una llave ssh no me funciono, no se porque.

Si hiciste tu proyecto con React, sin create-react-app, con webpack y otras cosas extra como stylus, eslint etc mi recomendacion es no intentar postear tu app con react por medio de este metodo si no con lo que explica Oscar Barajas en este video, que usa netlify, https://platzi.com/clases/2242-webpack/36259-deploy-del-proyecto-con-reactjs/

1
4610Puntos
9 meses

Gracias me ayudaste mucho con esto ya que estaba trabado con la otra opción y había probado de todo! mil gracias!

1

Hola, cuando entro al link https://angelicage.github.io/ecommerce-tote/ solo me muestra el README no mi proyecto.

Segui paso por paso el tutorial, lo unico distinto es mi interfaz de github ademas de ingresar la rama me pide que seleccione un folder, tendra esto algo que ver?

pages.PNG
1
2 meses

Lo solucione jaja, al parecer tenia que seleccionar la branch gh-pages y folder /root

1

Al dar npm run deploy me sale este error

> [email protected]1.0.0 predeploy /mnt/c/Users/Nicolas/Documents/website.io
> npm run build


> [email protected]1.0.0 build /mnt/c/Users/Nicolas/Documents/website.io
> webpack --mode production

Hash: e1ed4f410724883b985a
Version: webpack 4.41.5Time:1330ms
Built at:01/29/20206:09:29 PM
       Asset       Size  Chunks             Chunk Names
./index.html  194 bytes          [emitted]
   bundle.js    128 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[7] ./src/index.js + 1 modules 321 bytes {0} [built]
    | ./src/index.js 177 bytes [built]
    | ./src/containers/App.jsx 134 bytes [built]
    + 7 hidden modules
Child html-webpack-plugin for"index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 176 bytes {0} [built]

> [email protected]1.0.0 deploy /mnt/c/Users/Nicolas/Documents/website.io
> gh-pages -d build

ENOENT: no such file or directory, stat '/mnt/c/Users/Nicolas/Documents/website.io/build'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nicolas/.npm/_logs/2020-01-29T23_09_29_998Z-debug.log

que podría ser?

1
4671Puntos
2 años

Instala el gh-pages
npm install gh-pages --save-dev

1
2 años

a mi me sale el mismo error y ya tengo instalado la dependencia, no se que podria ser…

1
15068Puntos
2 años

A mi también me sale ese error, lo pudieron resolver?

1
227Puntos
2 años

Hola, me sale el mismo error, lo pudiste resolver?

5
15068Puntos
2 años

Saludo, si me funcionó de la siguiente manera:
Ejecute:

  • npm cache clean --force
  • npm cache verify

Anexe el package.json: “homepage”: “https://usuario.github.io/proyecto” antes lo tenía así: “homepage”: "https://usuario.github.io/proyecto.git” eln error estaba que no tenía que agregar el .git
En el sección de script de package.json le anexe esto:

  • “predeploy”: “npm run build”,
  • “deploy”: “gh-pages -d dist”

Mi carpeta se llama dist no build por eso en el deploy lo cambie por dist

2
1986Puntos
2 años

ahora cuando ejecuto npm start me abre el link de github como hago para que no pase eso ?

1
39795Puntos

Genial !, no me voy a dormir sin aprender algo nuevo y demasiado útil !

1
18911Puntos

14/08/2020 Me funciono sin ningun proble!!
Gracias!

1
15465Puntos

que buen material, me funciono perfecto luego de arreglar mis errores, muchas gracias ❤️

1
1150Puntos

Por fin pude desplegar mi apliación

0
17410Puntos

Toca que el repo esté publico o se puede con uno privado ? 🤔

0
6687Puntos

Después de varias pruebas me funcionó.
Busque por todo lado y relacionaban siempre estos comandos. Excelente.

0
13417Puntos
un año

amigo una pregunta, como le hiciste para que al recargar la pagina en una de tus secciones no te lance 404?

0
9166Puntos

Muchas gracias señor, muy amable