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

comment

local_cafe

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.