Cómo crear un sitio web GRATIS y administrable con IA (Astro + Keystatic + Cloudflare)

Cuando un cliente te pide un sitio informativo —una landing, un portafolio, la web de su negocio— casi siempre aparece la misma pregunta: "¿y esto cuánto me va a costar al mes?". La respuesta por defecto suele ser WordPress más un hosting, más una plantilla, más plugins.

Pero hay un camino que cuesta cero dólares al mes y que además le da a tu cliente un panel donde puede entrar con usuario y contraseña a cambiar textos, direcciones o teléfonos sin tocar una línea de código.

En esta guía te explico cómo funciona ese enfoque, cuándo tiene sentido usarlo (y cuándo no), y el paso a paso completo con Astro + Keystatic + Cloudflare Pages.

Por qué un sitio estático puede ser gratis

Un sitio web estático está formado únicamente por HTML, CSS y JavaScript. Son archivos. No hay lenguaje de backend procesando nada, no hay base de datos, no hay servidor ejecutando lógica en cada visita.

Eso trae tres ventajas concretas:

• Velocidad de carga. El navegador recibe archivos ya listos. No hay consultas a base de datos ni renderizado en servidor.
• SEO. El contenido está ahí, en el HTML, listo para que el crawler de Google lo lea. Sumado a la velocidad de carga (un factor real de posicionamiento), tienes una base sólida para posicionar.
• Despliegue prácticamente gratuito. Guardar y servir archivos es barato. Por eso decenas de proveedores de nube alojan sitios estáticos sin cobrarte nada.

Ese último punto es la clave de todo el artículo: el hosting de un sitio estático no es un costo, es un plan gratuito.

Las 3 limitaciones reales de un sitio estático

Antes de venderle esto a un cliente, hay que ser honesto con lo que no puede hacer:

1. No hay funcionalidad compleja

Si el usuario final necesita registrarse, iniciar sesión, subir archivos, pagar una suscripción o ver un dashboard con sus datos, eso ya no es un sitio web: es una aplicación web. Necesita backend, base de datos y otro enfoque completo. No fuerces un sitio estático ahí.

2. No hay envío de correos

No existe lógica de servidor, así que un formulario de contacto no puede enviar un correo por sí solo. Antiguamente esto se resolvía metiendo un archivo PHP en el hosting. Hoy hay soluciones más limpias, y las vemos más abajo en la sección de formularios.

3. No es administrable

El dueño del sitio no puede entrar a cambiar un texto. Tiene que pedírtelo a ti, tú editas el código y vuelves a desplegar. Para muchos clientes esto es un rompe-tratos.

Y esta tercera limitación es justamente la que vamos a resolver gratis.

Las opciones que existen (y por qué la mayoría cuesta dinero)

Antes de llegar a la solución, conviene ubicar el panorama completo, porque no todos los proyectos se resuelven igual.

CMS tradicional: WordPress, Ghost

Te dan panel de control, plantillas y ecosistema. Funcionan bien y no hay nada de malo en usarlos. El problema es que el CMS hay que hospedarlo, y eso ya cuesta. Además, en WordPress casi todo termina siendo un plugin: correos automatizados, formularios avanzados, optimización, plantilla premium. Cada pieza es presupuesto.

Para un e-commerce o un sitio con lógica compleja, pagar WordPress es una decisión razonable. Para un sitio de cinco secciones que solo muestra información, es caro para lo que hace.

Generadores de sitios estáticos (SSG)

Son proyectos que convierten tu contenido (normalmente Markdown) en HTML, CSS y JavaScript listos para subir. Puedes ver el catálogo completo en la lista de generadores de Jamstack.

Los más conocidos:

• Hugo — uno de los más populares, con temas listos para blogs y sitios de contenido.
• Astro — ideal si vienes de HTML/CSS/JS y quieres poder añadir partes dinámicas después.
• Docusaurus — orientado a documentación. Es el proyecto detrás de las docs de React Native, Jest y muchos otros sitios con esa interfaz que seguro ya reconoces, con buscador integrado vía Algolia.

Nota de precisión: es común escuchar que la documentación de React está hecha con Docusaurus. No es así: react.dev está construido con Next.js. Docusaurus sí nació en Meta y mueve las docs de React Native y muchos otros proyectos grandes.

El límite de los SSG es que, por sí solos, no te dan panel administrable ni envío de correos. Tu cliente seguiría necesitando leer Markdown y ejecutar comandos.

Headless CMS clásicos: Strapi y Sanity

Un headless CMS es como WordPress pero al revés: no te da el sitio, te da solo el panel de administración y una API. Tú pones el frontend (Astro, Next, React Native, lo que sea).

• Strapi — open source, el panel más popular de esta categoría.
• Sanity — su competencia directa, con más características listas de fábrica.

El detalle es que necesitan un backend corriendo en algún lado: o contratas un VPS y lo autoadministras, o pagas su nube.

Dos datos actualizados a 2026 que conviene tener en cuenta:

• Strapi Cloud ya no tiene plan gratuito. La propia entrada del blog de Strapi lleva una nota del editor de agosto de 2026 confirmando que eliminaron tanto el plan Free como la prueba gratuita. El código sigue siendo open source y autohospedable, pero el hosting corre por tu cuenta.
• Sanity sí mantiene un plan gratuito de $0 con hasta 20 asientos y 2 datasets públicos. Su plan Growth cuesta $15 por asiento al mes. Puedes revisar los límites actuales en sanity.io/pricing.

Para Latinoamérica, 15 dólares mensuales por administrar una landing de un cliente suele ser demasiado. Y la idea de este artículo es que no pagues nada.

El truco: un headless CMS basado en Git

Aquí está la categoría que resuelve el problema. En lugar de un CMS con backend y base de datos, existen CMS que escriben directamente en tu repositorio de GitHub.

El flujo es este: el cliente edita un texto en el panel → el CMS hace un commit en GitHub → tu proveedor de hosting detecta el commit y redespliega el sitio → el cambio queda publicado.

Sin servidor propio. Sin base de datos. Sin factura mensual.

Los proyectos principales de esta categoría:

Si estás evaluando opciones más allá de este tutorial, la lista completa está en el directorio de headless CMS de Jamstack. Ojo: varios proyectos de esa lista ya están abandonados o fueron renombrados, así que verifica la actividad del repositorio antes de comprometerte con uno.

En esta guía vamos con Keystatic, porque es el más sencillo de integrar y porque su servicio en la nube tiene un plan gratuito que cubre exactamente el caso "un cliente, un sitio".

Keystatic vs. Keystatic Cloud: la diferencia que importa

Esto confunde a mucha gente, así que vale aclararlo:

• Keystatic es el proyecto open source (licencia MIT). Gratis siempre. Se instala en tu proyecto.
• Keystatic Cloud es el servicio que ellos ofrecen para manejar la autenticación por ti. Tiene un plan gratuito de hasta 3 usuarios por equipo.

Sin Keystatic Cloud igual puedes usar el modo GitHub, pero tendrías que configurar manualmente una GitHub OAuth App, y tu cliente necesitaría cuenta de GitHub para entrar. Keystatic Cloud elimina ese paso: el cliente entra con su correo y contraseña, como en cualquier panel normal.

Keystatic trabaja en tres modos:

Paso a paso: del prompt al sitio administrable

Paso 1: Generar la landing con IA

Puedes usar Cursor, Claude, ChatGPT, Codex o el agente que prefieras. La única decisión técnica importante aquí es el framework, porque Keystatic se integra oficialmente con Astro, Next.js y Remix.

Si tu sitio es básicamente HTML, CSS y JavaScript, ve con Astro. Es el más liviano, genera HTML estático por defecto y después te permite añadir módulos o partes dinámicas si el proyecto crece.

Un prompt que funciona bien:

Crea una landing page en Astro para un profesional que ofrece asesorías contables. Usa información demo (direcciones, teléfonos, nombres de ejemplo). Diseño profesional y único, no genérico.

Pídele que trabaje primero en modo plan para que estructure antes de escribir código.

Paso 2: Subir el proyecto a GitHub con GitHub CLI

Keystatic necesita un repositorio. Puedes crearlo a mano, pero es más rápido instalar GitHub CLI y dejar que tu agente lo haga.

Instalación según tu sistema (revisa el comando exacto en la web oficial):

# Windows (winget)
winget install --id GitHub.cli

# macOS (Homebrew)
brew install gh

# Linux: revisa las instrucciones para tu distro en cli.github.com

Luego autenticas tu cuenta:

gh auth login

Te va a dar un código de un solo uso, abre el navegador, lo pegas, autorizas y listo.

Ahora puedes pedirle a tu agente: "sube este proyecto a GitHub como repositorio privado". No necesitas exponer el código públicamente.

Paso 3: Desplegar en Cloudflare Pages

Cloudflare Pages es de las mejores opciones gratuitas que existen hoy: sitios ilimitados, ancho de banda ilimitado y peticiones estáticas ilimitadas. Lo que sí tiene límite es el número de builds: 500 al mes en el plan gratuito, con 1 build concurrente y hasta 20.000 archivos por proyecto.

Ahí está su modelo de negocio: no te cobran por servir el sitio, te cobran cuando necesitas desplegar mucho o cuando usas funciones serverless. Para una landing que se actualiza unas cuantas veces por semana, 500 builds mensuales sobran.

Puedes crear el proyecto desde el panel (sección Compute → Workers y Pages → Crear aplicación) o desde la terminal con Wrangler, su CLI:

npm install -g wrangler
npx wrangler login

Después le pides a tu agente: "despliega este proyecto en Cloudflare Pages usando Wrangler". Mientras más específico seas, mejor resultado obtienes.

Dato importante para 2026: Cloudflare está concentrando todo su desarrollo nuevo en Workers, no en Pages. Pages sigue soportado y recibe correcciones, pero cuando crees un proyecto nuevo el panel te va a empujar hacia Workers. No es un problema para este flujo: cualquiera de los dos se conecta a GitHub y redespliega en cada commit, que es lo único que necesitamos.

Paso 4: Crear el proyecto en Keystatic Cloud

Entra a Keystatic Cloud y crea una cuenta (puedes usar GitHub o correo y contraseña).

1. Crea un Team. El slug se genera solo; déjalo tal cual.
2. Crea un Project dentro del team y selecciona el repositorio de GitHub que acabas de subir.
3. Si el repo no aparece en la lista, pulsa Install GitHub App y dale acceso a ese repositorio (o a todos, si prefieres).
4. Pega la URL de producción que te dio Cloudflare. Asegúrate de que no tenga una barra / de más al final. Aquí también puedes registrar un dominio personalizado.

Al crear el proyecto, Keystatic Cloud te entrega un fragmento de configuración con el identificador de tu proyecto. Cópialo tal como aparece: es lo que conecta tu código con la nube.

Paso 5: Integrar Keystatic en el proyecto

Pásale ese fragmento a tu agente con una instrucción como: "añade soporte para Keystatic Cloud usando esta configuración". También puedes hacerlo a mano:

npm install @keystatic/core @keystatic/astro

Y el archivo de configuración queda con esta forma (usa siempre el identificador exacto que te dio el panel):

// keystatic.config.ts
import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: { kind: 'cloud' },
  cloud: { project: 'tu-team/tu-proyecto' },
  collections: {
    // tus colecciones y singletons
  },
});

Aquí viene el detalle técnico que casi nadie menciona: el panel de Keystatic necesita rutas renderizadas en el servidor, porque hace lecturas y escrituras contra GitHub. Tu sitio puede seguir siendo 100% pre-renderizado; lo único que corre en servidor son las rutas del admin.

En Astro eso significa instalar un adaptador:

npx astro add cloudflare

Si te saltas este paso, el panel te va a aparecer en blanco al desplegarlo, y vas a perder una hora buscando el error en el lugar equivocado.

Paso 6: Desplegar y probar el panel

Vuelves a desplegar ("despliega en Cloudflare Pages") y entras a tu-sitio.pages.dev/keystatic. Deberías ver la pantalla de login de Keystatic Cloud.

Adentro tienes las secciones que definiste: textos del hero, datos de contacto, servicios, lo que hayas configurado. Cambias un texto, le das guardar, y pasan dos cosas:

1. Keystatic crea un commit real en tu repositorio de GitHub (puedes verlo en el historial, firmado por Keystatic).
2. Cloudflare detecta el commit y redespliega el sitio.

No es instantáneo. Toma entre unos segundos y un par de minutos. Es lento comparado con WordPress, donde el cambio se ve al refrescar. Avísale esto a tu cliente desde el principio, porque si no, el primer reporte que vas a recibir es "guardé y no se ve el cambio".

Paso 7: Darle acceso a tu cliente

Dentro del proyecto en Keystatic Cloud vas a la sección de usuarios y agregas el correo de tu cliente. Hay tres roles:

Para un cliente, Contributor es lo correcto: edita los textos pero no ve ni toca la configuración del proyecto.

Le llega una invitación por correo, entra al sitio, escribe /keystatic, crea su cuenta con correo y contraseña (no necesita GitHub) y ya está administrando su propia web.

Lo que el video no alcanzó a cubrir: formularios y correos

Un sitio estático no puede enviar correos por sí solo, pero tampoco necesitas montar un backend para un formulario de contacto. La solución son los form endpoints: servicios que reciben el POST de tu formulario y te reenvían el contenido por correo.

Opciones con plan gratuito:

Para la mayoría de landings de clientes, 250 envíos mensuales es más de lo que van a recibir. Y si el proyecto crece, siempre puedes mover el formulario a una función serverless de Cloudflare Workers sin tocar el resto del sitio.

Comparativa de hosting gratuito para sitios estáticos

Lo importante: todos funcionan con el mismo principio. Si el proveedor se conecta a GitHub y redespliega en cada commit, Keystatic funciona igual. No estás casado con Cloudflare.

¿Cuándo NO usar este enfoque?

Sé honesto con el alcance del proyecto. No uses este stack si:

• El sitio necesita registro de usuarios, login o roles para el público final.
• Hay pagos, suscripciones o un e-commerce de verdad.
• El cliente necesita ver los cambios publicados al instante.
• El cliente necesita más de 3 editores (ahí ya entras al plan pago de Keystatic Cloud, o configuras el modo GitHub manualmente).
• El cliente ya tiene un ecosistema WordPress funcionando y solo quiere un rediseño.

Sí úsalo si: es un sitio informativo, una landing, un portafolio, la web de un negocio local, un blog sencillo o la página de un profesional independiente. Que es, siendo realistas, la mayoría de los encargos que caen en freelance.

Preguntas frecuentes

¿Es realmente gratis o hay letra chica? Es gratis en las tres capas: Keystatic es open source (MIT), Keystatic Cloud tiene plan gratuito de hasta 3 usuarios por equipo y Cloudflare Pages no cobra por ancho de banda ni por sitios. El único costo real opcional es el dominio, que compras donde quieras y apuntas al proyecto.

¿Cuántos sitios puedo crear así? Keystatic no te cobra por cantidad de proyectos ni de sitios. El límite del plan gratuito está en la cantidad de usuarios invitados por equipo, no en el número de proyectos.

¿El cliente necesita cuenta de GitHub? No. Esa es justamente la razón de usar Keystatic Cloud en vez del modo GitHub puro. El cliente entra con correo y contraseña.

¿Los cambios se ven al instante? No. Cada guardado genera un commit y el hosting tiene que redesplegar. Suele tomar de segundos a un par de minutos. Es la principal diferencia contra WordPress y hay que comunicarla.

¿Puedo usar mi propio dominio? Sí. Lo configuras en Cloudflare (o el proveedor que uses) y actualizas la URL en la configuración del proyecto de Keystatic Cloud.

¿Sirve para un blog? Sí. Keystatic maneja colecciones de Markdown, Markdoc, MDX, JSON y YAML. Un blog es exactamente el caso para el que fue diseñado.

¿Y si prefiero no depender de Keystatic Cloud? Usa el modo github configurando tu propia GitHub OAuth App. Es gratis y sin límite de usuarios, pero cada editor necesita cuenta de GitHub. También puedes evaluar Sveltia CMS, que es framework-agnóstico y no depende de ningún servicio externo.

Conclusión

La combinación IA para generar + Astro para estructurar + GitHub para versionar + Cloudflare para servir + Keystatic para administrar te permite entregar un sitio profesional y administrable con costo operativo de cero.

Eso cambia la conversación con el cliente: ya no le estás vendiendo un desarrollo con mantenimiento mensual, le estás vendiendo un activo que le pertenece, que puede editar él mismo y que no le genera factura recurrente.

Lo más valioso, sin embargo, no es el stack específico. Es entender el patrón: contenido en Git, despliegue automático por commit, hosting estático gratuito. Con eso claro, puedes cambiar Keystatic por Sveltia, Cloudflare por Netlify o Astro por Next.js, y el flujo sigue funcionando exactamente igual.