Conectar un repositorio de GitHub con Travis CI y obtener una URL pública para tu proyecto es uno de los pasos más gratificantes del desarrollo web. Aquí se explica paso a paso cómo habilitar el build automático, generar el deploy y ver tu aplicación funcionando en producción con GitHub Pages.
¿Cómo habilitar tu repositorio en Travis CI?
Antes de comenzar, el repositorio ya debe estar publicado en GitHub con todos los cambios enviados a la rama master. Esta rama es la que Travis CI va a leer para ejecutar el compilado.
Una vez confirmado esto, los pasos dentro de Travis son directos:
- Acceder a la sección de Settings en Travis CI.
- Buscar el repositorio en la lista de proyectos disponibles.
- Habilitarlo con un solo clic para que aparezca en el dashboard.
Cuando el repositorio se habilita, Travis todavía no tiene datos porque no se ha ejecutado ningún trigger. Para lanzar el primer compilado se utiliza la opción Trigger Build [1:02], indicando que se trabajará sobre la rama master.
¿Qué sucede cuando se ejecuta el primer trigger build?
Al ejecutar el trigger, Travis CI coloca la tarea en una cola de espera [1:19]. Esto significa que el sistema asigna una máquina virtual dedicada que se encargará de todo el proceso.
La secuencia que sigue la máquina virtual es la siguiente:
- Clonar el repositorio desde la rama master.
- Instalar dependencias del proyecto automáticamente.
- Configurar el entorno necesario, incluyendo el GitHub token que se había definido previamente como variable de entorno.
- Ejecutar el comando de compilado, en este caso
yarn build [2:08].
El output que muestra Travis es el mismo que se obtendría al compilar en la máquina local. Una vez que el build termina exitosamente, Travis genera la estructura para el deployment y envía los archivos compilados al repositorio.
¿Qué es la rama gh-pages?
Travis CI crea automáticamente una rama llamada gh-pages [2:27] en el repositorio. Esta rama contiene únicamente los archivos resultantes del compilado:
- El archivo
index.html.
- El archivo
main.js.
- La hoja de estilos.
Estos tres elementos son todo lo que necesita GitHub Pages para servir la aplicación como un sitio web estático y funcional.
¿Cómo activar GitHub Pages en tu repositorio?
Dentro del repositorio en GitHub, en la sección de Settings, casi en la parte inferior, se encuentra la configuración de GitHub Pages [2:52]. El sistema lee la rama gh-pages que Travis acaba de crear y genera una URL pública lista para compartir.
Al abrir esa URL, la aplicación funciona completamente: se pueden ver los personajes, acceder al detalle de cada uno y regresar a la sección principal. La navegación completa de la single page application está operativa en producción.
¿Cómo configurar un dominio personalizado?
Por defecto, GitHub Pages asigna una URL con el formato usuario.github.io/repositorio. Sin embargo, existe la opción de configurar un dominio custom [3:22] directamente desde la sección de GitHub Pages en Settings.
Esto permite asignar un nombre de dominio propio al proyecto. Por ejemplo, un dominio como cientifico.co puede apuntar directamente a la aplicación desplegada, dándole una identidad profesional y memorable.
El flujo completo, desde el push a master hasta tener una URL pública, queda automatizado gracias a la integración entre GitHub, Travis CI y GitHub Pages. Cada vez que se envíen cambios a la rama master, Travis ejecutará el build y actualizará el deploy de forma automática.
¿Ya lograste ver tu proyecto en una URL pública? Comparte tu experiencia y el enlace de tu aplicación en los comentarios.
