Github Pages & React | Subir aplicacion de React a Github Pages (gh-pagess) con Dominio y SSL
HTML-код
- Опубликовано: 12 сен 2020
- Este es un ejemplo práctico de como subir una aplicación de React a Github pages. Instalaremos un modulo llamado gh-pages que hará el despliegue por nosotros, adicionalmente añadiremos un dominio más SSL (HTTPs)
COMPRAR DOMINIO EN NAMECHEAP
affiliate.namecheap.com/?affI...
VARIABLES DE ENTORNO NODEJS
• Variables de Entorno e...
PM2
• PM2 | Administrador de...
MONGOOSE
• Mongoose | Introduccci...
CURSO DE MONGODB
• MongoDB Curso, Introdu...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
CURSO DE EXPRESS
• Expressjs | Nodejs Fra...
CURSO DE JAVASCRIPT
• Curso Javascript para ...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
DENO
• Deno, Vistazo Rápido
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - RUclips:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com/t/fazt/shared_...
PARA MÁS CONTENIDO
faztweb.com/social
#react #ghpages #ssl 
Наука
![[BLACKSWAN] ‘Roll Up’ Official Music Video](http://i.ytimg.com/vi/ulvCwyKrwqw/mqdefault.jpg)
Usted tiene contenido incluso superior al que se encuentra en ingles, gracias amigo me sirvió incluso con el empaquetador de vite
Como siempre excelente contenido Fazt estoy aprendiendo mucho con tus videos es interesante lo que se puede lograr con react como SPA saludos hermano eres el numero 1
muchas gracias Fazt, aprendí algo nuevo y nuevamente gracias por compartir tus conocimientos.
Muchísimas gracias!!! Desde siempre siguiendote! Que sigas creciendo!
esto es lo que estaba esperando vieja!!!!
Muchas gracias por compartir tu conocimiento! 🙌 me fue de gran ayuda este video!
Buenisimo hno. Lo voy a probar de una vez. Gracias por ese aporte.
Mis respetos para ti Fazt!!! Muchas gracias amigo!!!
casi Diciembre 2020, funciona bien, utilice freenom y ya hay que configurar el CNAME, pero esperar para tener https aprox 24 horas. Funciona bien, gracias Fazt
gracias bro, este aporte es oro muy fácil explicado
pensaba que tenia el video en 1.25 jaja, gran video Fazt!!
Excelente video Fazt, gracias.
De nuevo muchas gracias fazt!
Muchas gracias! este video fue muy útil!!
Eres genial 😊 muy buen tutorial
Muy buenos tus videos hermano ❤️
Te admiro muchísimo fazt
Gracias muy bien explicado muy facil lo dejas
Si les sale una página en blanco consideren los siguientes puntos:
-Haber escrito correctamente "homepage"
-Haber escrito "http" en su homepage, puede fallar si ponen "https"
-Si tu usuario de GH tiene mayusculas, debes escribirlo con mayusculas en el homepage tambien
yo cambie todo eso y me sigue apareciendo en blanco
@@gustavoolmosyt5269 verifica las rutas en el index.html de la carpeta build tanto del css como del script, solo colocale un punto al inicio para indicar que tome como referencia la carpeta contenedora..
Me sigue apareciendo en blanco la pagina. Hice todo otra vez y sigue igual
@@matiashenriquez354 Tenes react route implementado para el manejo de las rutas?
@@martingalenda877 eso afecta? tengo el mismo problema y tengo react router dom
Bro, excelente video!! Gracias
crack de los crack..me salvaste!!!te ganaste 1 subscriptor y un like
Muchas gracias! me ayudo muchisimo.
buen video Crack 😀
Gracias Genio!! ♥♥♥
Excelente curso
Visto en 31/10/2021
Muy buen tutorial!
excelente gracias !!!
Eres todo un crack
Gracias Fazt !!
muchas gracias , you are the best
genial, gracias fazt
genio graciasssss
Te amooo ❤
fazt haz un video pero con AWS por favor!
Seria bueno
Fazt! sería un golazo si haces algo de React Native
12:38 Muchas graciaaaaas!!!!
Excelente
Excelente :3
Hola, muy buena la explicacion!!. tengo una pregunta, suponete que tu aplicacion esta en un subdirectorio dentro del repositorio es posible setear el home page con subdirectorios?
una pregunta github pages admite firebase ?? y como se hace el deploy react + firebase ??
graciass
Excelente video, consulta, que diferencia tiene con subir una web a vercel o netlify?
Hola Fazt. Subi un repo que tenia que es un Portfolio pero no me mustra la página me sale la pantalla en blanco. Esto a que se debe?
Saludos.
Buenas, Fazt. Agregaste la carpeta build al .gitignore? Porque no lo veo en el repositorio y a mí si me aparece. ¿Debería agregarlo?
Espero tu respuesta. Gracias.
Pd: Si alguno me lo puede contestar, también es bienvenido.
Eres un crack!. Tengo una duda, cuando instalé gh-pages salieron algunos mensajes de vulnerabilidades, ¿hay algo para corregir esto, u otra librería sin vulnerabilidades que permita hacer lo mismo?
bato god
Hago todo el proceso y la página se publica, pero aparece en blanco no muestra los componentes. ¿Sabes por qué es?
lo lograste solucionar ??
Me pasa lo mismo
primer comentario, me encanta tu canal!
Hey Fazt, podrías hablar más sobre MERN STACK para Crear aplicaciones de E-Commerce
si por favor estoy aprendiendo full stack mern compre un curso en udemy.. pero estoy absorbiendo todo lo bueno que encuentro seria genial que crees una aplicacion profesional en mern stack. y ademas publicarlo en un servidor con base de datos y manteniendo el codigo en git hub :D
Muy bueno! que comandos ejecuto para cancelar el trabajo en la consola?
Gracias por el video!!! esta muy bueno, lo hice con un repositorio y me salió perfecto, ahora lo estoy intentando hacer con otro repositorio y me sale el siguiente error:
"gh" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.
Que puedo hacer? gracias!!
Que onda Fazt. ¿Podrías hacer un video igual, pero con AWS, brother?
Porfavor has un ejemplo completo profecional de una aplicación como una tienda o una red social para tener en cuenta cómo se crean aplicaciones profecional mente en el mundo real
Sirve para subir una app de js empaquetada con webpack?
Hola, no se por que razon no me crea la carpeta build ysino una llamada dist. De todas formas lo segui cambiando en scrpt ""gh-pages -d dist"" y no se visualiza mi pag en github pages
a mi me sale un error que dice:
fatal: A branch named 'gh-pages' already exists.
bueno en realidad aparece mas errores como:
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
pero el primero me llama la atencion no tengo ninguna rama en mi repositorio con ese nombre "gh-pages" alguna idea de lo que pueda hacer para solucionarlo?
hize todo exactamente como dijiste, y cuando entro al link que gh pages me genera me sale la pagina en blanco.
No se si ya lo solucionaste, pero para el que lo busque una vez subida la página y si aparece solo en blanco, lo que yo hice fue que en homepage solamente puse el nombre del repositorio tal que asi: "MiApp", y para guardar los cambios solo hace falta escribir los comandos npm run build y luego npm run deploy
He seguido los mismos pasos pero al final me sale la página publicada en blanco
Buen video Fazt sigo aprendiendo con tus tutoriales solo podrías aumentar un poco para que se vea mas grande por favor
Gracias Luis. Voy a tomarlo en cuenta para renovar este video la semana entrante, con más informacion y aumentar el tamaño de letra :)
Esto tambien funciona con angular?
saludos tengo un problema hice un portafolio en react y al subirlo a github pages no logro ver mis imágenes se ve la aplicación y mas o menos funciona pero nada de las imágenes alguna idea de que puedo hacer?
Hola!! Estoy en las mismas, lograste solucionarlo?
Que theme y color esta usando? Alguien
Sos groso Gruleman, sabelo.
Por que algunas personas ponen fotos en el public folder y les funciona su aplicación localmente y una vez q lo sube a GitHub no funciona? Big fan
Buenas, al publicar la aplicación ya sea des de la terminal de la aplicación react o directamente des de github/pages, al abrir la aplicación me aparece el getStarter con la info de publicación del proyecto pero no puedo ver la home de la web.
Alguna idea?
Gracias
pudiste solucionar? me pasa lo mismo
Alguien solucionó el problema con react router?
Muchas gracias por el aporte. y como se hace para crear la carpeta BUILD si el proyecto solo es de Node, porque en tu video de NODE y GITHUB el contenido es estático, pero si fuera dinamico con ejs.. como haria para subir eso a github pages..?
Bueno Github pages es solo para sitios estáticos, no dinámicos. Así que aquí no puedes subir aplicaciones de Nodejs. Te recomendaría usar en ese caso servicios como heroku, vercel o netlify
@@FaztCode Gracias por responder. Si ya lo subi a heroku.. pero es un rollo para conectar el dominio que compré si tienes plan gratis de heroku. en cambio con githubpages es sencillo. Ahora si convierto con babel todo mi codigo de NODE, no lo crea como statico en la carpeta build?
Disculpen, alguien sabe hacer todo esto mismo pero para varias aplicaciones de react que esten en una misma carpeta y esa carpeta sea el origen ?
Por si les da el siguiente error "fatal: A branch named 'gh-pages' already exists."
Entren al directorio de node_modules / .cache y eliminan el directorio gh-pages y luego lo intentan nuevamente.
hice todo tal cual y se subio una pagina en blanco con titulo Getting Started with Create React App y explicacion de los comandos npm (?) y mi sitiooo??
pudiste solucionar? me pasa lo mismo
ALGUIEN ME PASA LA INVITACION DEL DISCORD, LA DE LA DESCRIPCIÓN NO FUNCIONA
te dejo un enlace Tomas: discord.gg/mFUY4sT
gracias Fazt, una pregunta, puede desplegarse nuxt en github pages?
Si se puede, nuxtjs.org/faq/github-pages/
@@cosmoscrew2 si acabo de probarlo, esta genial, pero me pide liberar el codigo a publico, o pagar 4 dolares mes, y los iconos estaticos lo puse /miIcono.png y al desplegarlo con gitpages no lo reconoce, tenia que haberle puesto @/assets/miIcono.png y trabajar asi, pff ni modo, a rehacer varias cositas.... ahj me da flojera are otro esta vez con typescript, trabajaba js y que feo se ve todo.
pero el seo si reconoce bien no mas, aunq las variables de entorno no dan y lo cambie manualmente, mmm aver averiguare si hay algo al respecto
@@cosmoscrew2 lo logre, www.esmio.app ... pero no con la guia, ya que me pedia hacer demaciadas configuraciones inecesarias, y publicar el codigo del proyecto, le consulte a mis contratadores y pues me dijeron que NO!, jaja asi que busque, y recien se me ocurrio, porque no lo genero como si fuera un html css y js normal, lo hice, y solo pedia pocas confiuraciones de esta forma(y no es necesario manejar un archivo CNAME en el proyecto para todo github pages lo genera automaticamente), y dio genial, aunq google domains tiene ciertas cositas mas a configurar pero funciono y publicando el proyecto, pero transpilado, que es lo mismo que cuando el navegador carga o cuando se es una PWA, github.com/malisoftbo/esmiofront lo malo que el SEO no da bien para las url, y el error page, pero eso despues lo vere
certificado ssl gratis, jaja q genial esta, grax fazt, aproposito que fue de el, ya ni el twich
excelente video, pero en mi caso me inicia la página en el readme, sabes cómo solucionar esto? saludos desde Uruguay
Hola! a mi me pasa lo mismo. Pudiste solucionarlo?
deployé sin problema 2 repos y el 3ro me hace esto mismo!!
Me muestra el readme
Fazt! Más o menos cuánto tiempo dura el dominio/hosting de GitHub pages ?
El hosting de gh es gratuito(para repositorios públicos) e ilimitado. El dominio ya lo compras en otra parte, como namecheap. El dominio sí expira y tienes que renovarlo, generalmente cada año.
Heist es decir que el hosting de gh (con el dominio predeterminado) dura para toda la vida?
@@juliandavidalfonsomoreno6798 pues sí
@@heisst Ey amigo, sabes si al subir en ese hosting se puede acceder a la pagina por medio de busquedas? Osea funciona el SEO?
@@angel_ruggia Pues sí, pero eso depende de tu página y no del servicio de hosting en sí. El posicionamiento de tu página depende del buen SEO que tenga.
creo que deberian saber que si su pagina trabaja con un apirest puede trabajar normal.
Segui todo los pasos pero sale en blanco:(
No funciona, me aparece lo mismo que si no hubiese hecho ninguno de tus pasos
En el otro video de react y heroku, subi el proyecto de tu canal ese de react OMBD, y tiraba error..
para los que tengan un error o la pagina se vea en blanco dejenlo asi
"homepage": ".",
git no se reconoce como un comando interno
Necesita tener instalado git lo puedes descargar de aquí git-scm.com/
Esta bueno eso, pero no sirve para proyectos de React que tenga peticiones HTTP a alguna api
Lo dijo mas de 2 veces, SOLO PROYECTOS ESTÁTICOS. Consumir una api NO es estático.
@@alexisponce6547 Sí lo es xd. Puedes consumir APIs desde una página html con js.
si lo es
a mi me funciona, pero tenes que tener el servidor alojado en otra parte, lo que no me funciona es con subpaginas
no se me subio, hice el deploy antes y ahora no se como arreglarlo :(
¿Solucionastes?
te notas cansado en este video
El tutorial ya no sirve
coincido plenamente!!!!
alguno que sirva? :P
YA NO TE VES FELIZ EN LOS VIDEOS DISLIKE
"react-scripts" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movies-react@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movies-react@0.1.0 build 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! ..
pm-cache\_logs\2021-09-26T03_06_17_838Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movies-react@0.1.0 predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movies-react@0.1.0 predeploy 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! ..
pm-cache\_logs\2021-09-26T03_06_17_887Z-debug.log
PS ..\Escritorio\webDePeliculas\movies-react>
Tengo el mismo error ya lo pudiste arreglar?
@@nicolasfernandez5256 lo pudiste arreglar?
Lo mismo