Cómo Publicar Apps de Google AI Studio en Hostinger – Tutorial Completo

Sumário

• 🚀 Resumen rápido: ¿Qué vas a aprender?
• 🧭 ¿Por qué usar Hostinger en lugar de Vercel u otras plataformas?
• 🔧 Requisitos previos y herramientas que vas a usar
• 🛠️ Paso 1: Genera tu proyecto en Google AI Studio
• 📥 Paso 2: Descarga y extrae el paquete de la app
• 💻 Paso 3: Instala Node.js y prepara el build
• 📤 Paso 4: Crea un sitio en Hostinger y sube los archivos
• 🔒 Paso 5: Problema crítico — la API Key expuesta y la solución
• 🧩 Paso 6: Crear el endpoint PHP (gemini-api.php)
• 🧠 Paso 7: Modifica el código cliente para llamar al endpoint PHP
• ✨ Paso 8: Usa IA para convertir GeminiService.ts (opcional pero recomendado)
• 📦 Paso 9: Recompila y sube la nueva versión
• ✅ Paso 10: Prueba final y verificación
• 🐞 Cómo depurar problemas comunes
• 💡 Buenas prácticas y consideraciones
• 🔁 Flujos alternativos y comparativa rápida
• 📚 Recursos y links útiles
• 🔚 Conclusión y recomendaciones finales

🚀 Resumen rápido: ¿Qué vas a aprender?

En esta guía práctica vas a aprender paso a paso cómo generar una aplicación o sitio con Google AI Studio, compilarla localmente, subirla a Hostinger y configurar un endpoint en PHP para proteger tu API Key. Este flujo te sirve para consolidar proyectos en un hosting compartido tipo Business de Hostinger (optimizado para WordPress), pero también compatible con aplicaciones React con ciertas limitaciones. Aquí verás:

• Por qué elegir Hostinger para varios proyectos y cuándo no conviene.
• Cómo crear la app en Google AI Studio y descargar el paquete.
• Instalación de Node.js, comandos necesarias: npm install y npm run build.
• Cómo subir los archivos compilados a Hostinger (public_html) y usar dominio temporal.
• Cómo crear un archivo PHP que actúe como pasarela hacia la API de Gemini para mantener tu API Key segura.
• Cómo usar una IA para modificar un archivo TypeScript (GeminiService.ts) para que llame al endpoint PHP en vez de exponer la API Key.
• Solución de errores comunes y recomendaciones para producción.

🧭 ¿Por qué usar Hostinger en lugar de Vercel u otras plataformas?

Vercel y plataformas similares están diseñadas pensando en aplicaciones modernas como React, Next.js y frameworks con SSR. El deploy allí suele ser automático, sin complicaciones: conectas el repo, y Vercel detecta y despliega. Eso es genial.

Sin embargo, Hostinger tiene ventajas claras en ciertos contextos:

• Costos fijos y previsibles: Si ya pagas un plan compartido en Hostinger, puedes alojar decenas de sitios por un costo mensual bajo (en algunos planes por menos de 4 USD al mes por sitio según la promoción y el plan). Esto evita facturas variables por límites de uso en plataformas serverless.
• Consolidación: Si gestionas varios proyectos o clientes (sitios WordPress, portafolios, microsites), tener todo en un solo panel (hPanel) facilita administración, facturación y backups.
• Facilidad para sitios estáticos y WordPress: Los planes compartidos están optimizados para estos usos y serán suficientes para muchas aplicaciones pequeñas o portafolios generados por IA.

No obstante, hay compromisos:

• El flujo para aplicaciones React no es nativo: el deploy será manual (build local + subir archivos).
• No hay funciones serverless integradas como en Vercel; hay que usar PHP u otros lenguajes que soporte el hosting para crear endpoints.
• Si necesitas escalado, mayor CPU/RAM o configuraciones a medida, considera una VPS o servicios especializados.

🔧 Requisitos previos y herramientas que vas a usar

Asegúrate de tener lo siguiente antes de comenzar para que el proceso sea fluido:

• Cuenta en Hostinger con acceso a hPanel (panel del hosting). Si no la tienes, puedes registrarte en: https://hostinger.com/rodrigo
• Acceso a Google AI Studio: https://aistudio.google.com
• Node.js instalado en tu máquina (descargar desde https://nodejs.org)
• Un editor de texto (VS Code, Sublime, Notepad, etc.) para editar archivos TypeScript y PHP.
• Herramienta de IA para ayudarte a modificar código si lo necesitas (puede ser ChatGPT, Genspark, u otra IA avanzada).
• Conocimientos básicos de terminal: navegar carpetas y ejecutar npm.

Comandos clave que vas a usar:

1. cd [ruta-de-tu-proyecto]
2. npm install
3. npm run build

🛠️ Paso 1: Genera tu proyecto en Google AI Studio

Abre Google AI Studio en la sección Build. Allí vas a pegar el prompt que defina tu proyecto. En el ejemplo que sigo generé una app enfocada en «viajes a Chile» y también un portafolio. AI Studio permite activar funcionalidades como Google Search y el Thinking Mode: si tu prompt lo solicita, habilítalas para obtener resultados más ricos.

Consejos para prompts:

• Especifica claramente el objetivo: «web estática tipo portafolio» o «aplicación React que genera planes de contenido».
• Incluye parámetros de salida: canales (YouTube, blog), frecuencia (3 videos por semana), tono (entretención, engagement), etc.
• Pide el código listo para Descargar como .zip o Download App.

📥 Paso 2: Descarga y extrae el paquete de la app

Una vez que AI Studio genere el proyecto, utiliza la opción Download App. Descarga el archivo .zip en tu equipo y extrae el contenido. Recomiendo renombrar la carpeta a algo reconocible, por ejemplo: tutorial-Google-AI-Studio-Hostinger.

Verifica que dentro de la carpeta estén los archivos fuente, package.json, carpeta src, y un script de build configurado (usualmente en package.json encontrarás «build»).

💻 Paso 3: Instala Node.js y prepara el build

Para compilar la app necesitas Node.js. Ve a https://nodejs.org y descarga el instalador para tu sistema operativo (en Windows, usa Windows Installer). Ejecuta la instalación con los pasos por defecto (Siguiente, siguiente).

En la carpeta del proyecto abre una terminal y ejecuta:

1. cd [ruta-de-tu-proyecto] para posicionarte en la carpeta raíz del proyecto.
2. npm install para instalar dependencias.
3. npm run build para generar la carpeta de producción (usualmente dist o build).

El resultado será una carpeta estática que contiene todos los archivos listos para servir (HTML, CSS, JS optimizado). Por ejemplo, si el build genera dist, esa es la carpeta que vas a subir al hosting.

📤 Paso 4: Crea un sitio en Hostinger y sube los archivos

Ingresa a tu hPanel en Hostinger. En Sitios web, elige Añadir sitio web y selecciona la opción PHP/HTML personalizado. Para pruebas puedes usar el dominio temporal que te asigna Hostinger (usar dominio temporal facilita el proceso y evita configurar DNS en este paso).

Luego, abre el Administrador de archivos y entra en la carpeta public_html. Si el contenido actual se borra verás un error 403 hasta que subas tu sitio. Sube la carpeta dist (o su contenido) directamente dentro de public_html. Puedes arrastrar y soltar los archivos o usar la opción de subir en el panel.

Una vez subidos los archivos, refresca el dominio temporal y deberías ver tu sitio en producción.

🔒 Paso 5: Problema crítico — la API Key expuesta y la solución

Si tu proyecto hace llamadas directas a la API de Gemini u otra API desde JavaScript (cliente), la API Key puede quedar expuesta en los archivos JS que se envían al navegador. Esto es un riesgo de seguridad: cualquiera puede ver el archivo .js y copiar la clave.

Ejemplo típico: abres un archivo JS generado y buscas «API_KEY» o «apiKey» y la clave está allí. Esa clave debe estar protegida. No conviene meter la API Key en el código cliente.

Solución adoptada: crear un endpoint servidor en PHP que actúe como pasarela. El flujo sería:

1. El frontend hace una petición al archivo PHP (endpoint) en el mismo dominio.
2. El PHP, que corre del lado del servidor en Hostinger, contiene la API Key y hace la petición a la API de Gemini.
3. El PHP recibe la respuesta y la reenvía al frontend. La API Key nunca llega al cliente.

Esto es un «hack» relativamente simple y efectivo para hosting compartido donde no tienes funciones serverless nativas. No es la solución más elegante comparada con backends dedicados, pero funciona y protege la clave.

🧩 Paso 6: Crear el endpoint PHP (gemini-api.php)

En tu panel de Hostinger, dentro de public_html, crea un nuevo archivo llamado gemini-api.php. Este archivo será el intermediario. En un documento de referencia (guía), tienes un ejemplo de cómo hacerlo. El flujo general del archivo PHP debe incluir:

• Cabeceras CORS si tu frontend las necesita.
• Lectura de la petición entrante (por ejemplo, JSON POST con prompt o parámetros).
• Llamada HTTP a la API de Gemini usando CURL (o file_get_contents si está permitido).
• Incluir la API Key en la cabecera Authorization de la petición al API.
• Reenviar la respuesta JSON al frontend.

Pasos concretos:

1. Genera tu API Key en Google AI Studio (Get API Key → Crear clave de API → Copiar).
2. Pega esa API Key dentro del archivo gemini-api.php en el lugar indicado.
3. Guarda el archivo y asegúrate de que tiene permisos correctos (644 suele ser suficiente).

Nota: al probar, revisa que el archivo PHP responde correctamente desde el navegador o con curl. No subas la API Key a repositorios públicos.

🧠 Paso 7: Modifica el código cliente para llamar al endpoint PHP

Tu aplicación original probablemente llame a Gemini directamente desde TypeScript o JS. Tenemos que cambiar la llamada para que apunte a /gemini-api.php en lugar de la API externa. El archivo a modificar suele llamarse GeminiService.ts o similar.

Pasos manuales:

1. Abre GeminiService.ts en tu editor.
2. Localiza la función que construye la petición a la API de Gemini.
3. Reemplaza la URL de la API por la URL relativa al endpoint PHP, por ejemplo: /gemini-api.php.
4. Asegúrate de cambiar el método si es necesario (POST/GET) y que los parámetros reqrespeten lo que el archivo PHP espera.
5. Remueve cualquier mención a la API Key en el código cliente.

Si no manejas TypeScript o tienes dudas con las transformaciones, puedes usar una IA para que te haga el cambio por ti: le pasas el contenido del archivo GeminiService.ts y le indicas que lo convierta para que use el endpoint PHP. Esto reduce errores manuales y acelera el proceso.

✨ Paso 8: Usa IA para convertir GeminiService.ts (opcional pero recomendado)

Preparé un prompt y un flujo para que la IA te ayude a transformar el archivo TypeScript. Esto es especialmente útil si no te sientes cómodo editando peticiones HTTP o manejando headers y serialización. La idea es pegar el contenido del archivo en la IA y pedir la versión que llame al endpoint PHP.

Consejos al usar la IA:

• Selecciona un modelo potente (ChatGPT-4, CloudSonic 4.5, etc.) para mejores resultados.
• Pega solo el archivo que quieres transformar (no el proyecto entero) para mantener contexto y evitar límites de token innecesarios.
• Indica claramente: «Convierte este GeminiService.ts para que las llamadas a la API se realicen a /gemini-api.php y que no se incluya ninguna API Key en el cliente».
• Si la IA te devuelve errores, copia y pega los mensajes de consola en el chat para que te guíe en la corrección.

Una vez la IA te entregue el nuevo archivo, reemplaza GeminiService.ts en tu proyecto local por la versión modificada.

📦 Paso 9: Recompila y sube la nueva versión

Después de modificar GeminiService.ts y cualquier otro archivo que use directamente la API, vuelve a compilar:

1. Abre tu terminal en la carpeta del proyecto.
2. Ejecuta npm run build de nuevo.
3. Revisa que la carpeta dist o build se haya actualizado.

Luego sustituye los archivos en Hostinger por los archivos nuevos del build. Puedes reemplazar todo el contenido de public_html con los archivos compilados actualizados.

✅ Paso 10: Prueba final y verificación

Una vez subidos los archivos y con el endpoint PHP en su lugar, abre tu dominio temporal y prueba la funcionalidad que requiere acceso a Gemini. Por ejemplo, genera ideas con un prompt como «viajes a Argentina» y haz clic en «generar ideas».

Si todo funciona, la respuesta llegará desde el endpoint PHP y se mostrará en el frontend. Si hay errores, abre las herramientas de desarrollador del navegador (F12) y revisa la consola y la pestaña de Network para ver las peticiones y respuestas.

Posibles indicios de error:

• Respuesta 500 del endpoint PHP: revisa logs de PHP y errores en Hostinger.
• 404 en /gemini-api.php: verifica que el archivo exista en public_html y esté con el nombre correcto.
• Errores CORS: añade cabeceras apropiadas en gemini-api.php (Access-Control-Allow-Origin).
• Errores de JSON: revisa que el frontend envíe JSON y que el PHP lo lea correctamente con file_get_contents(‘php://input’).

🐞 Cómo depurar problemas comunes

Si algo falla, sigue este flujo de diagnóstico:

1. Abre las herramientas de desarrollador del navegador y revisa consola. Copia cualquier error grande; suele dar pistas claras.
2. Revisa la pestaña Network para la petición a /gemini-api.php: ¿qué status code devuelve? ¿Qué entra y qué sale?
3. Prueba el endpoint PHP desde curl o Postman para aislar si el problema es del frontend o del servidor.
4. Si usaste la IA para modificar GeminiService.ts, pega el error en la conversación con la IA y pide una corrección. Muchas veces la IA te pedirá ver el gemini-api.php y revisará headers, formatos y rutas.
5. Verifica los permisos del archivo en Hostinger y si el archivo PHP tiene errores de sintaxis (puedes habilitar mostrar errores en PHP temporalmente para depurar).

Recuerda: no es inusual tener que iterar varias veces. Guarda backups de archivos y prueba cada cambio de forma incremental.

💡 Buenas prácticas y consideraciones

• No expongas claves en repositorios: si subes el proyecto a GitHub, asegúrate de no incluir gemini-api.php con la API Key en el repo. Usa variables de entorno si puedes, o mantenlo fuera del repositorio.
• Rate limits y costos: aunque las primeras API Keys en Google AI Studio pueden ser gratuitas para pruebas, el uso sostenido de Gemini tiene costos. Controla el uso desde el backend y aplica límites o mecanismos de cache si es posible.
• Cachea respuestas que se repitan: si muchos usuarios piden prompts iguales, guarda respuestas para ahorrar llamadas a la API.
• Cuida la latencia: el tráfico hacia la API de Gemini puede tardar; añade indicadores de carga en el frontend para una mejor UX.
• Considera migrar a VPS si te hace falta: un VPS te dará más control (puedes correr Node.js, servidores backend, etc.). Hostinger compartido está bien para proyectos pequeños.

🔁 Flujos alternativos y comparativa rápida

Comparando opciones:

• Vercel / Netlify: Deploy automático, funciones serverless integradas, perfecta para apps React/Next. Más cara si pasas los límites gratuitos en varios proyectos.
• Hostinger (compartido): Económico y consolidado para múltiples sitios. Necesita procesos manuales pero es ideal si ya pagas el plan y gestionas varios proyectos.
• Hostinger VPS: Más caro que compartido, pero te da control total y capacidad de correr backends Node, etc.

Mi recomendación: si ya tienes Hostinger y gestionas muchos proyectos pequeños, usa el enfoque explicado. Si estás empezando con una sola app de IA que crece rápido, quizás Vercel sea más cómodo inicialmente.

📚 Recursos y links útiles

Enlaces mencionados y recursos útiles:

• Guía completa endpoint PHP: https://docs.google.com/document/d/1IAeughcq_Hw2rFjuD1fTPHOUQ5DW5EFSsLOhpDS968A/edit?usp=sharing
• Google AI Studio: https://aistudio.google.com
• Node.js: https://nodejs.org
• Hostinger con descuento: https://hostinger.com/rodrigo
• Suscripción a prompts y método: https://rodrigoolivares.com

🔚 Conclusión y recomendaciones finales

Publicar aplicaciones y sitios generados con Google AI Studio en Hostinger es completamente viable y práctico si sigues una serie de pasos básicos: generar el proyecto, compilar localmente, subir los archivos estáticos y, muy importante, proteger la API Key mediante un endpoint servidor en PHP.

Ventajas del método:

• Ahorro en costos si ya tienes hosting.
• Centralización de proyectos en un mismo panel.
• Posibilidad de usar IA para adaptar tu código y acelerar el proceso.

Limitaciones:

• Más trabajo manual que soluciones serverless.
• Funcionalidad limitada para apps que requieran backend avanzado o mucha concurrencia.

Si decides seguir este camino, respeta las buenas prácticas de seguridad, controla el uso de la API y realiza pruebas continuas. Con paciencia y pruebas iterativas, podrás tener aplicaciones de IA funcionando desde Hostinger sin exponer tus credenciales y manteniendo tus proyectos organizados.

Tip final: Si algo no funciona, copia el error de la consola y conversa con una IA para encontrar la solución. En la mayoría de los casos te guiará paso a paso para corregir el gemini-api.php o el archivo TypeScript que necesite ajustes.

Más capturas y referencias visuales

¿Necesitas ayuda personalizada?

Si te interesa que revise tu proyecto o quieras que te comparta los prompts optimizados y el método paso a paso, puedes visitar: https://rodrigoolivares.com

Buena suerte con tu deployment y recuerda: centralizar proyectos puede ahorrarte tiempo y dinero, pero siempre debes priorizar la seguridad de tus claves y la escalabilidad según crezca el uso.