Binary Coffee

Cómo hacer deploy a nuestro portafiolio con React a GitHub Pages y no morir en el intento?

git github

GitHub te permite hostear tus p√°ginas web est√°ticas en sus servidores, pensado para que se pudiera tener la documentaci√≥n de proyectos o simplemente para que los usuarios pudieran crear sus portafolios. Hacer esto √ļltimo me tom√≥ mucho m√°s de un mes y varios gigas de internet. En este art√≠culo te mostraremos una de las maneras de hacerlo, as√≠ que contin√ļa leyendo.

Lo que sucede es lo siguiente: podemos tener una página por cada repositorio y una por usuario que vendría siendo como el root al que se accede por https://username.github.io donde username es tu nombre de usuario.

React cuenta con una biblioteca para hacer deploy a las páginas de GitHub que se llama gh-pages, te la dejo para que veas su documentación. Lo que sucede con esta es que al hacer deploy manda el código a una rama nombrada de la misma manera, y aunque en la configuración del repo se puede seleccionar qué rama queremos que se muestre en el deploy, las páginas de los usuarios solo se pueden construir a partir de la rama master.

En ese momento fue cuando me entró dolor de cabeza, me cansé de buscar tutoriales y de preguntar en varios foros online y nada, no encontré como hacerlo funcionar. OJO: no estoy diciendo que esa biblioteca no permita hacerlo, simplemente que no he encontrado la forma, si la sabes déjanos saber en los comentarios.

How To

Abrimos la terminal en la carpeta de nuestro proyecto y ejecutamos npm run build, esto nos creará una carpeta con el proyecto "compilado" en una página estática: HTML, CSS, JS + Assets. Y ahora atento que aquí es donde viene la magia:

Remplaza username por tu usuario, debes haber creado el repositorio correspondiente con el nombre username.github.io.

cd build/
git init 
git add .
git commit -m "first commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

Simplemente es subir esos archivos generados a la rama master de nuestro repositorio, al hacer push autom√°ticamente se hace el deploy.

Una vez hecho esto, quiero terminar recalcando que muchas veces la solución a los problemas está frente a nosotros pero no nos damos cuenta porque queremos resolver de la manera más rápida, que por lo general es googlearlo, y no está mal pero no siempre vas a encontrar esa solución. Así que piensa mucho para que ejercites tus neuronas y no mueran por el desuso.

Cuéntanos en los comentarios qué te pareció el artículo, si tienes dudas y si te ha pasado algo como esto en alguna ocasión o simplemente si lo haces de otra manera.

Keep Calm and Drink Binary Coffee

Opiniones