Infraestructura y Deployment
Guía completa para configurar el deployment automático desde GitHub a Hostinger. 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. Esto permite que cada cambio en la rama 'main' de GitHub se despliegue automáticamente 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
📋 Pasos para Configurar el Deployment
Iniciar sesión en Hostinger
Accede al panel de control de Hostinger con tus credenciales. Ve a hostinger.com e inicia sesión.
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.
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.
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.
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.
Dominio nuevo encontrado
Llegados aqui, vamos a hacer clic al botón que indica "Dashboard", para entrar al dashboard especifico de este sitio web.
Acceder al menú Advanced (Git)
Una vez creado el sitio, ve al menú "Advanced" y busca la opción de "Git" para configurar el deployment automático desde tu repositorio de GitHub.
Agregar repositorio de GitHub
Ingresa la URL de tu repositorio de GitHub. En este punto, si tu repositorio es privado, necesitarás crear un Personal Access Token en GitHub para que Hostinger pueda acceder al código.
⚠️ Importante: Si tu repositorio es privado, deberás crear un Personal Access Token (Classic) en GitHub. Continúa con los siguientes pasos para configurar la conexión segura.
Crear Personal Access Token en GitHub (Repositorios Privados)
Para que Hostinger pueda acceder a tu repositorio privado, necesitas crear un Personal Access Token (Classic) en GitHub. Este token se usará en la URL del repositorio para autenticar la conexión de forma segura.
Paso 9.1: Ir a tu perfil de GitHub
Haz clic en tu foto de perfil en la esquina superior derecha de GitHub y selecciona "Settings" del menú desplegable.
Paso 9.2: Acceder a Developer Settings
En el menú lateral izquierdo, desplázate hasta el final y haz clic en "Developer settings".
Paso 9.3: Generar nuevo token (Classic)
Haz clic en "Personal access tokens", luego en "Tokens (classic)" y finalmente en "Generate new token (classic)".
.png)
Paso 9.4: Configurar el token
Dale un nombre descriptivo al token (ej: "Hostinger Deploy") y selecciona el scope "repo" para dar acceso completo al repositorio. Luego haz clic en "Generate token" al final de la página.
Paso 9.5: Copiar y guardar el token
Para generar el token, primero seleccionas los scopes de "Repo", ya luego colocas el nombre del token y GitHub mostrará tu token una sola vez. Cópialo inmediatamente y guárdalo en un lugar seguro. No podrás verlo de nuevo.
🔐 MUY IMPORTANTE: Guarda este token de forma segura. Nunca lo compartas públicamente ni lo subas a repositorios. Trátalo como una contraseña.
Paso 9.6: Usar el token en la URL del repositorio
Ahora que tienes el token, debes usarlo en la URL del repositorio cuando lo agregues en Hostinger. El formato es:
https://tu-usuario:TU_TOKEN_AQUÍ@github.com/tu-usuario/nombre-repositorio.git
Ejemplo ficticio:
https://desarrollador-web:ghp_1234567890abcdefghijklmnopqrstuvwxyz@github.com/desarrollador-web/mi-proyecto-web.git
Donde:
-
tu-usuario= Tu usuario de GitHub -
TU_TOKEN_AQUÍ= El token que acabas de copiar -
nombre-repositorio= El nombre de tu repositorio
✅ Listo: Tu repositorio privado está completamente configurado con token. Ahora continuaremos con la configuración del webhook en GitHub.
Configurar Auto Deployment en Hostinger
Activa la opción de "Auto Deployment" o "Webhook" para que cada vez que hagas un push a la rama 'main' en GitHub, Hostinger automáticamente descargue los cambios y ejecute el build.
💡 Tip: Asegúrate de seleccionar la rama correcta (generalmente 'main' o 'master') y configurar el comando de build si es necesario (ej: 'npm run build').
Configurar Webhook en GitHub
Ahora necesitas configurar un webhook en GitHub para que notifique a Hostinger cada vez que hagas un push a tu repositorio. Esto activará el deployment automático.
Paso 11.1: Ir a Settings del repositorio
En tu repositorio de GitHub, ve a "Settings" y en el menú lateral izquierdo busca "Webhooks".
Paso 11.2: Configurar el Webhook
Haz clic en "Add webhook". En el campo "Payload URL", pega la URL del webhook que Hostinger te proporcionó. En "Content type", selecciona "application/json". Luego haz clic en "Add webhook".
✅ Webhook configurado: Ahora cada vez que hagas un push a tu repositorio, GitHub notificará a Hostinger automáticamente para que ejecute el deployment.
Realizar el primer Deploy
Una vez configurado todo, haz clic en "Deploy" o "Pull & Deploy" para realizar el primer deployment. Hostinger descargará el código de GitHub, ejecutará el build y publicará el sitio.
🎉 ¡Felicidades! Tu sitio ahora está configurado para deployment automático. Cada vez que hagas merge a 'main', el sitio se actualizará automáticamente.
🔄 Flujo de Trabajo con GitHub
Desarrollo y Deployment
- 1. Crea una rama 'dev' desde 'main' para trabajar en nuevas funcionalidades o cambios.
- 2. Realiza tus cambios en la rama 'dev' y haz commits frecuentes.
- 3. Cuando estés listo, crea un Pull Request de 'dev' hacia 'main'.
- 4. Revisa los cambios, asegúrate de que no haya conflictos y que el código funcione correctamente.
- 5. Haz merge del Pull Request a 'main'. Esto activará automáticamente el deployment en Hostinger.
- 6. Espera unos minutos y verifica que el sitio se haya actualizado correctamente en producción.
⚠️ Prevención de Caídas del Sitio
Nunca hagas push directamente a 'main' sin revisar. Siempre usa el flujo de Pull Request para que puedas revisar los cambios y asegurarte de que no haya errores antes de desplegar a producción. Esto previene que código roto llegue al sitio en vivo.
💡 Notas Importantes
🔐 Seguridad del Personal Access Token
El Personal Access Token es como una contraseña. Guárdalo de forma segura y nunca lo compartas públicamente ni lo subas a repositorios. Si se compromete, revócalo inmediatamente desde GitHub y genera uno nuevo.
🚀 Deployment Automático
Una vez configurado el webhook, cada merge a 'main' desplegará automáticamente. No necesitas hacer nada manualmente. El proceso toma entre 2-5 minutos dependiendo del tamaño del proyecto.
📦 Comandos de Build
Asegúrate de configurar correctamente el comando de build en Hostinger (ej: 'npm run build' o 'pnpm run build') y la carpeta de salida (generalmente 'dist' para Astro).
🔄 Rollback de Cambios
Si un deployment causa problemas, puedes hacer rollback en el panel de Hostinger o revertir el commit en GitHub y hacer merge nuevamente a 'main'.
🎉 ¡Infraestructura Configurada!
Tu sitio ahora tiene un flujo de deployment profesional. Cada cambio pasa por revisión antes de llegar a producción, asegurando la calidad y estabilidad del sitio. ¡Buen trabajo!