En esta clase, vamos a explorar cómo configurar y desplegar nuestra web desarrollada con IA en Hostinger, aprovechando su funcionalidad de integración con Git. Veremos cómo conectar nuestro repositorio de GitHub con Hostinger para automatizar el proceso de despliegue de cambios.

Configuración del Hosting en Hostinger

Primero, seleccionaremos un plan de hosting en Hostinger. Se recomienda considerar el plan que ofrezca más sitios web y almacenamiento por una pequeña diferencia de precio, ya que esto puede ser muy beneficioso a largo plazo.

Una vez en el panel de Hostinger, procederemos a añadir un nuevo sitio web. En lugar de instalar WordPress o usar las herramientas de creación de Hostinger, optaremos por un sitio web PHP/HTML vacío. Esto nos permitirá subir nuestro propio código y tener control total sobre el proyecto.

Conexión del Dominio y Configuración DNS

Para que nuestra web sea accesible, necesitamos conectar un dominio. Utilizaremos un subdominio para este ejemplo, "cursor.trinchwp.com". Es crucial configurar correctamente los registros DNS en Cloudflare (o tu proveedor de DNS) para que apunten a la IP de nuestro servidor Hostinger. Se explicará cómo encontrar esta IP en el panel de Hostinger y cómo crear el registro A en Cloudflare.

Despliegue con Git y GitHub

Hostinger ofrece una integración con Git que facilita el despliegue automático de nuestro código. Veremos cómo:

• Generar claves SSH para conectar Hostinger con nuestro repositorio de GitHub.
• Configurar el repositorio de Git en Hostinger, especificando la URL del repositorio público, la rama (normalmente main) y el directorio de instalación (dejándolo en blanco para que se despliegue directamente en public_html).
• Realizar un despliegue manual inicial para comprobar que los archivos se transfieren correctamente.

Solución de Problemas y Automatización

Es común que al principio la web muestre un error de SSL. Veremos cómo activar el certificado SSL gratuito que ofrece Hostinger una vez que el dominio esté correctamente propagado.

Finalmente, configuraremos la implementación automática a través de un webhook de GitHub. Esto significa que cada vez que realicemos un push a nuestro repositorio en GitHub, los cambios se desplegarán automáticamente en nuestra web en Hostinger. Demostraremos este proceso realizando un pequeño cambio en el código y observando cómo se actualiza la web de producción de forma instantánea.