Publicar tu proyecto React en internet es el paso que convierte tu código en una experiencia real para otras personas. Aquí aprendes cómo hacer deploy con GitHub Pages paso a paso, configurando el package.json y ejecutando los scripts correctos para que tu aplicación quede pública con una URL compartible.

¿Qué necesitas antes de empezar el deploy en GitHub Pages?

Antes de subir tu proyecto, asegúrate de tener el repositorio creado en GitHub y tu código funcionando localmente. El proceso se apoya en el paquete gh-pages, que automatiza la publicación del build.

¿Qué es GitHub Pages? Es un servicio gratuito de GitHub que te permite alojar sitios estáticos directamente desde un repositorio, ideal para portafolios y proyectos frontend.

¿Cómo instalar el paquete gh-pages?

El primer paso es instalar la dependencia dentro de la carpeta de tu proyecto. Este paquete se encarga de tomar tu carpeta build y publicarla en una rama especial de GitHub.

bash npm install gh-pages --save-dev

Con esa instalación lista, el resto de la configuración vive en el package.json.

¿Cómo configurar el package.json para el deploy?

El package.json necesita dos cambios clave: agregar la propiedad homepage y crear los scripts de publicación. Aquí es donde se define la URL final de tu proyecto.

¿Qué es la propiedad homepage y cómo se escribe?

La propiedad homepage le dice a React dónde vivirá tu aplicación. Debe coincidir exactamente con el nombre del repositorio y el username de GitHub.

"homepage": "https://username.github.io/nombre-del-repo"

Un detalle que parece menor pero rompe el deploy: revisa que el nombre del repositorio coincida carácter por carácter. En el ejemplo, el repositorio se llama machines con una s extra, y ese tipo de diferencia tumba la publicación.

¿Qué pasa si el nombre del repositorio no coincide con homepage? El sitio se publica pero los recursos no cargan, porque las rutas relativas apuntan a un lugar que no existe.

¿Cómo crear los scripts predeploy y deploy?

Dentro de la sección scripts del package.json, agrega dos comandos. El predeploy genera el build optimizado y deploy lo publica.

"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }

El flag -d build le indica a gh-pages cuál es la carpeta que debe publicar. Si tu build se genera en otra ruta, ajusta ese valor.

¿Cómo ejecutar el deploy y activar GitHub Pages?

Con todo configurado, vuelves a la terminal y corres los comandos en orden. Primero el build, luego el deploy.

• npm run build para compilar tu proyecto en producción.
• npm run deploy para subir el build a la rama de GitHub Pages.
• Mensaje de confirmación: Published cuando el paquete termina de subirse.

Después vas a tu repositorio en GitHub, entras a Settings, eliges la opción Pages y seleccionas como source la rama de gh-pages. Guardas y listo: GitHub te muestra la URL pública donde vive tu sitio.

¿Cómo verificar que el deploy funcionó?

Abre la URL que GitHub te entrega y prueba la funcionalidad completa. En el caso del proyecto de ejemplo, se selecciona Uruguay como país, se agrega un pasajero llamado La Vieja Confiable y se genera el ticket.

Ahí aparece un detalle interesante: el componente ticket sigue mostrando Colombia aunque el contexto guardó Uruguay. Es un bug pequeño pero útil para entender cómo fluye el estado en React.

¿Por qué el ticket muestra siempre el mismo país? Porque el componente no está leyendo el valor actualizado del contexto, sino un valor por defecto que quedó hardcodeado.

Ese tipo de hallazgos solo aparecen cuando ves tu proyecto corriendo en producción, no en el entorno local. Por eso el deploy es parte del proceso de aprendizaje, no solo el cierre.

¿Qué ganas al publicar tu proyecto en GitHub Pages?

Tener una URL pública cambia la conversación sobre tu trabajo. Puedes compartirla en tu portafolio, enviarla en una entrevista o pedir feedback real de otras personas.

• URL compartible para mostrar tu proyecto en cualquier lado.
• Hosting gratuito directamente conectado a tu repositorio.
• Despliegue automatizado cada vez que corres npm run deploy.

Cuéntanos en los comentarios cómo resolviste el bug del país en el ticket y compártenos la URL de tu proyecto desplegado.