Infraestructura y Deployment

Guía completa para conectar GitHub con Hostinger y desplegar el sitio de forma automática. Este proceso se realiza después de que el sitio ha sido probado con el link de prueba y está listo para producción.

📖 Descripción del Proceso

Una vez que el sitio ha sido probado exitosamente con el link de prueba (FTP), es momento de configurar la infraestructura de deployment automático. Conectas GitHub desde Hostinger (OAuth) y cada cambio en la rama deploy se publica en producción.

Este flujo profesional asegura que el sitio se mantenga actualizado y previene errores al revisar cambios antes de hacer merge a producción.

🔑 Requisitos Previos

Sitio probado exitosamente con link de prueba (FTP)
Repositorio de GitHub creado y configurado
Acceso al panel de Hostinger
Dominio configurado en Hostinger

📋 Pasos para Configurar el Deployment

1

Iniciar sesión en Hostinger

Accede al panel de control de Hostinger con tus credenciales. Ve a hostinger.com e inicia sesión.

Login Hostinger
2

Ver lista de Websites

En el panel lateral, busca la sección de "Websites" para ver todos los sitios web que tienes configurados en tu cuenta de Hostinger.

Lista de Websites
3

Agregar Website personalizado

Selecciona la opción de crear un sitio web personalizado o "Custom Website" para tener control total sobre la configuración del deployment.

Website personalizado
4

Agregar el dominio

Si el dominio no está en la lista, agrégalo haciendo clic en "Add Website" o "Agregar Sitio Web". Ingresa el nombre del dominio y sigue las instrucciones.

Agregar dominio
5

Buscar el nuevo dominio

Una vez hayas concluido con los pasos en el punto 4, volvemos al dashboard y buscamos el dominio del sitio que deseas configurar. Si es un sitio nuevo, asegúrate de que el dominio ya esté agregado a tu cuenta de Hostinger.

Buscar dominio
6

Dominio nuevo encontrado

Llegados aqui, vamos a hacer clic al botón que indica "Dashboard", para entrar al dashboard especifico de este sitio web.

Dashboard Hostinger
7

Acceder al menú Advanced (GIT)

En el dashboard del sitio, abre el menú Advanced y selecciona la opción GIT para iniciar la conexión con GitHub.

Menú Advanced con opción GIT
8

Conectar GitHub con OAuth

En la sección GIT, haz clic en Continue with GitHub. Hostinger conectará tu cuenta de GitHub de forma segura mediante OAuth, sin necesidad de pegar URLs ni tokens manualmente.

Deploy from GitHub - Continue with GitHub
9

Seleccionar el repositorio de GitHub

Elige la cuenta de GitHub correcta y busca el repositorio del sitio. Si no aparece en la lista, usa el botón de refrescar o revisa los permisos de acceso de Hostinger en GitHub.

Seleccionar repositorio de GitHub
10

Configurar rama y directorio de deploy

Confirma el repositorio y el dominio de destino. Selecciona la rama deploy y el directorio raíz public_html, que es donde Hostinger publica el sitio.

💡 Recomendado: Usa la rama deploy para producción y public_html como carpeta de salida en el servidor.

Configurar rama deploy y public_html
11

Confirmar deployment completado

Hostinger desplegará el sitio automáticamente. Cuando termine, verás la pantalla Deployment completed! con el repositorio conectado y la URL del sitio en vivo.

🎉 ¡Listo! El primer deployment quedó configurado. Puedes ir al dashboard del sitio para seguir administrando los deploys.

Deployment completed
12

Verificar auto-deployment activo

En el panel GIT, confirma que Auto-deployment is on y revisa el último deployment: rama deploy, directorio public_html y estado Completed. Desde aquí puedes hacer Redeploy cuando lo necesites.

Panel GIT con auto-deployment activo

🔄 Flujo de Trabajo con GitHub

Desarrollo y Deployment

  1. 1. Crea una rama dev desde deploy para trabajar en nuevas funcionalidades o cambios.
  2. 2. Realiza tus cambios en la rama 'dev' y haz commits frecuentes.
  3. 3. Cuando estés listo, crea un Pull Request de dev hacia deploy.
  4. 4. Revisa los cambios, asegúrate de que no haya conflictos y que el código funcione correctamente.
  5. 5. Haz merge del Pull Request a la rama deploy. Hostinger detectará el cambio y desplegará automáticamente en producción.
  6. 6. En el panel GIT de Hostinger, confirma que el último deployment quedó en estado Completed y revisa el sitio en vivo.

⚠️ Prevención de Caídas del Sitio

Nunca hagas push directamente a deploy sin revisar. Siempre usa el flujo de Pull Request para revisar cambios antes de publicar en producción. Esto previene que código roto llegue al sitio en vivo.

💡 Notas Importantes

🔗 Conexión OAuth con GitHub

Hostinger se conecta a GitHub con OAuth. No hace falta pegar URLs del repositorio ni crear tokens manuales. Si cambias de cuenta o repositorio, reconecta desde la sección GIT del dashboard.

🚀 Deployment Automático

Con Auto-deployment is on, cada push o merge a la rama deploy actualiza el sitio en public_html. El proceso suele tardar pocos segundos o minutos según el tamaño del proyecto.

📦 Rama y directorio recomendados

Usa la rama deploy para producción y el directorio public_html como destino en el servidor. Asegúrate de que el build del proyecto deje los archivos listos para esa rama antes del merge.

🔄 Redeploy y rollback

Si un deployment falla o necesitas republicar, usa Redeploy en el panel GIT. Para corregir contenido, revierte el commit en GitHub y vuelve a mergear a deploy.

🎉 ¡Infraestructura Configurada!

Tu sitio está conectado a GitHub con deployment automático desde Hostinger. Cada cambio en la rama deploy se publica en producción sin configurar webhooks ni tokens manualmente. ¡Buen trabajo!