Cómo crear una landing page gratis para validar tu idea (con video tutorial y casos reales)

Si estás validando una idea de negocio, crear una landing page gratis es la diferencia entre validar en horas o gastarte $50-100/mes en herramientas que no necesitas todavía. Acá está el stack completo que uso hoy en producción —incluyendo el repo público que puedes clonar—, video tutorial paso a paso, y los 3 niveles de evolución según en qué fase esté tu proyecto.

Por qué la mayoría de emprendedores paga de más en la fase de validación

Lo cuento desde mi propia experiencia: durante años yo pagaba $99/mes en un SaaS de landing pages optimizado para performance. Bien armado, sin queja del producto. Pero cada mes el cargo aparecía y empezaba a doler — porque me daba cuenta de que estaba pagando por algo que yo mismo podía hacer con un stack abierto, en menos tiempo del que pensaba, y sin sacrificar la performance que era lo que me había llevado al SaaS en primer lugar.

Cuando hice el switch al stack que comparto en este post (HTML estático generado con IA + GitHub Pages, después Astro + Cloudflare Pages para los proyectos serios), mi factura mensual de landing tools pasó de $99 a $0. Tiempo invertido en el switch: un fin de semana. Performance final: igual o mejor.

Hay un patrón que veo todas las semanas en la comunidad: alguien tiene una idea, decide «validarla en serio», y antes de saber si la idea funciona ya está pagando $200 al mes en herramientas. Carrd $19, Framer $20, Webflow $29, un dominio en GoDaddy con add-ons innecesarios, Mailchimp $30, Hotjar $40, y así.

Resultado típico: gasta $1,000-2,000 en los primeros tres meses y la idea ni siquiera estaba validada.

Soy fiel creyente de contratar servicios. Cuando ya tienes tracción real, pagar por un stack profesional acelera todo. Pero soy fiel creyente también de no gastar dinero para validar ideas. En fase de validación, lo que necesitas es: una página que comunique tu propuesta, capture interés, y mida si la gente reacciona. Punto. Eso se puede hacer con costo prácticamente cero.

La razón por la que la mayoría igual paga $20-99/mes en SaaS de landing pages es porque nadie les contó la alternativa.

La filosofía: ser rata para validar, gastar bien cuando ya factures

El frame mental que uso: en cada fase del journey, el founder pregunta dos cosas distintas.

• Fase validación: ¿hay demanda real? ¿alguien pagaría por esto? Lo que importa es velocidad de iteración y costo cercano a cero.
• Fase tracción: ¿cómo escalo lo que ya funciona? Acá sí pagas por herramientas que te ahorran tiempo y dan calidad consistente.

Mezclar las dos fases es el error más caro de bootstrapped founders. Pagás por SaaS profesionales antes de validar y, cuando la idea no resulta, sentís que «ya invertiste demasiado para abandonar». Sunk cost fallacy 101.

Los 3 niveles del stack según fase del proyecto

Cuando alguien me pregunta «qué uso para mis landings», la respuesta cambia según la fase. Estos son los 3 niveles que recomiendo —y que uso yo mismo en distintos proyectos hoy mismo—:

Nivel 1 — Validar rápido (HTML + IA + GitHub Pages)

Para cuando tienes una idea cruda y quieres saber si alguien levanta la mano antes de invertir más tiempo o dinero.

• Stack: prompt a Gemini/Claude/ChatGPT → te devuelve un único index.html estático → subes a un repo público de GitHub → activas GitHub Pages → SSL automático → opcionalmente conectas un dominio personalizado vía Cloudflare DNS.
• Tiempo: 18-30 minutos para landing + dominio personalizado.
• Costo: $0 si usas el subdominio usuario.github.io/repo, o ~$10/año si compras un dominio.
• Cuándo usarlo: validación cero-a-uno, MVP de marketing, lead magnet rápido, landing para un experimento de paid ads chico.

Este es el nivel que cubro en el video tutorial más abajo.

Nivel 2 — Landing pulida (Astro + GitHub Pages o Cloudflare Pages)

Para cuando la idea validó, quieres algo con SEO técnico serio y la landing va a evolucionar (agregar testimonios, casos, secciones nuevas).

• Stack: Astro como framework + GitHub Pages o Cloudflare Pages como hosting.
• Por qué Astro: genera HTML estático en build time, zero JS cliente innecesario, performance brutal (LCP <1s sin esfuerzo). Perfecto para landings + blogs + sitios de marketing.
• Tiempo: 2-4 horas el primer setup, después agregar secciones es minutos.
• Costo: $0 hosting + dominio.
• Cuándo usarlo: landing definitiva post-validación, sitio de producto, sitio de podcast, blog técnico.

Esto es lo que uso en lp.cristiantala.com para todas mis landings de marketing —incluyendo el lead magnet del benchmark IA mensual—.

Nivel 3 — Sistema agéntico (Claude Code + Astro + agentes custom)

Para cuando el sitio se publica recurrentemente (cada semana, cada episodio, cada release) y agregar contenido manual no escala.

• Stack: Astro como base + Claude Code con agentes custom + scripts de automatización (indexnow para notificar a buscadores, validate-build, generate-favicons, etc.) + CLAUDE.md como contrato operativo del proyecto.
• Tiempo: 1-2 días de setup inicial del sistema, después agregar contenido es 1 comando agéntico.
• Costo: $0 hosting + dominio + costo de API tokens (Claude) si automatizás generación de contenido.
• Cuándo usarlo: podcast con episodios recurrentes, blog con cadencia alta, sitio de producto con releases frecuentes, hub editorial.

Esto es exactamente lo que uso en eslahoradeaprender.com, el sitio del podcast Es La Hora de Aprender. Es repositorio público — puedes clonarlo y usarlo de template: github.com/ctala/landing-es-la-hora-de-aprender.

Mirá el CLAUDE.md y la carpeta .claude/agents/ para ver cómo están definidos los agentes que mantienen el sitio. Agregar un episodio nuevo es 1 comando: el agente lee la transcripción, genera la metadata SEO, crea el archivo Astro, valida el build y notifica a Google vía indexnow. Cero trabajo manual.

Stack del Nivel 1 paso a paso (el del video)

Este es el flujo exacto del video que sigue. Si lo sigues paso a paso, en 20-30 minutos tienes landing + dominio personalizado funcionando.

Paso 1: Generar el HTML con IA (10 min)

Abrir Gemini, Claude o ChatGPT. Prompt tipo:

«Necesito el HTML completo de una landing page para validar una idea de negocio. La idea es: [DESCRIBÍ EN 2-3 FRASES]. Audiencia objetivo: [QUIÉN]. La landing debe incluir: hero con CTA principal, 3 secciones de beneficios, formulario de captura de email, footer simple. Estilo: moderno, minimalista, mobile-first. Devolveme un único archivo index.html con todo embedded: HTML, CSS y JS. Sin frameworks pesados (nada de React, solo HTML estático con JS vanilla). Optimizado para cargar en menos de 200ms.»

Lo importante: pídele HTML único y estático. Si la IA te devuelve un proyecto con npm, package.json y carpetas, dile que NO, quieres un solo index.html con todo incluido. Eso es lo que GitHub Pages puede servir directo.

Tip: si después de generar quieres ajustes, pégale un screenshot del resultado y dile «esta parte de acá cambia esto». Funciona mucho mejor que describir con palabras.

Paso 2: Crear repo público en GitHub (3 min)

1. Crear cuenta en github.com si no tienes

2. New repository → nombre tipo landing-mi-idea → público → Create

3. Click en «uploading an existing file» o «Add file → Create new file»

4. Nombre del archivo: index.html

5. Pegar el HTML que te dio la IA

6. Commit

Paso 3: Activar GitHub Pages (2 min)

1. En el repo, ir a Settings → Pages (sidebar izquierdo)

2. En «Source», elegir branch main y carpeta / (root)

3. Save

4. Esperar 1-2 minutos

5. URL queda activa en: https://tuusuario.github.io/landing-mi-idea/

Ya tienes landing online, gratis, con SSL automático.

Paso 4 (opcional pero recomendado): Conectar dominio personalizado vía Cloudflare (5 min)

Esto agrega 5 minutos pero da credibilidad real (URL profesional vs usuario.github.io/repo).

1. Si todavía no tienes un dominio, cómpralo (en Cloudflare Registrar son de los más baratos sin upsells: $9-12/año típico)

2. En tu DNS de Cloudflare, crear un CNAME record: nombre validar (o lo que quieras como subdominio) → destino tuusuario.github.io

3. En GitHub, Settings → Pages → Custom domain: pegar validar.tudominio.com

4. Esperar 5-15 minutos a que se genere el certificado SSL automáticamente

Ya tienes landing con dominio personalizado, SSL, gratis. Total invertido: ~$10/año del dominio.

Video tutorial paso a paso (Nivel 1 en vivo)

Acá te dejo el tutorial completo en vivo donde lo hicimos con Rodrigo, levantando una landing real (bananas.cristiantala.com) en 18 minutos. Verlo te ahorra mucho del trial-and-error del primer intento:

Casos reales en producción que puedes inspeccionar

Acá están los 3 sitios que opero hoy con este stack —en distintos niveles— por si quieres ver qué se puede hacer:

Caso 1 — lp.cristiantala.com (Nivel 2)

lp.cristiantala.com es el dominio donde hosteo todas mis landings de marketing: lead magnets, lanzamientos, cheatsheets descargables. Stack: Astro + Cloudflare Pages.

Ejemplo concreto: lp.cristiantala.com/linkedin-cheatsheets/ es la landing del cheatsheet del benchmark IA mensual que distribuyo. Performance LCP <1s, captura email vía Listmonk, tracking con Cloudflare Analytics. Cero costo de hosting.

Caso 2 — eslahoradeaprender.com (Nivel 3 — agéntico, repo público)

eslahoradeaprender.com es el sitio oficial del podcast Es La Hora de Aprender. Cada episodio es una página indexable con su propia URL, transcripción, metadata SEO completa, y embeds de Spotify + YouTube.

El sistema es agéntico: agregar un episodio nuevo no es trabajo manual. Hay agentes Claude Code definidos en .claude/agents/ que toman la transcripción, generan la metadata SEO, crean el archivo Astro, validan el build, y notifican a Google y Bing vía IndexNow. El proceso completo está documentado en docs/agent-add-new-episode.md.

El repo es público: github.com/ctala/landing-es-la-hora-de-aprender. Podés clonarlo, leer el CLAUDE.md para entender las reglas operativas (performance > SEO > mantenibilidad > diseño, en ese orden) y usarlo como template para tu propio sitio agéntico.

Lo que vale la pena copiar de ese repo:

• CLAUDE.md: cómo definir reglas duras de proyecto que el agente respeta
• .claude/agents/: cómo modelar agentes custom para tareas repetibles
• scripts/indexnow.sh: cómo notificar a buscadores cuando publicas contenido nuevo (clave para indexación rápida)
• scripts/validate-build.sh: validar antes de cada deploy

Caso 3 — Tu primera landing (Nivel 1)

Esta es la que vas a hacer si sigues el tutorial del video. Empieza simple, valida rápido, después escala si la idea funciona.

Lo que SÍ necesita una landing de validación (no negociable)

Una landing técnicamente perfecta pero que no captura datos no sirve para validar. Estos son los 4 elementos no negociables:

1. CTA único y claro

Una sola acción que el visitante debe hacer. Punto. No «compra Y suscribite Y compartí Y miranos en Instagram». Una acción.

Para validación, el CTA típico es: capturar email para waitlist, o pre-orden con pago real (más fuerte como señal).

2. Captura de email funcional

Conectar un formulario que efectivamente guarde el email en algún lado. Opciones gratis: Listmonk self-hosted, Tally + Google Sheets, ConvertKit free tier (hasta 1,000 subs), Brevo free tier (hasta 300 emails/día).

El que uso yo: Listmonk self-hosted. Costo cero, control total. Si recién empiezas y no quieres tocar servidores: Tally + Google Sheets es lo más simple.

3. Tracking básico

Saber cuántos visitantes recibís + dónde están + qué porcentaje convierte. Opciones gratis:

• Cloudflare Web Analytics (gratis si ya estás en Cloudflare, lo más fácil)
• Google Analytics 4 (gratis, completo pero pesado en privacy)
• Plausible (gratis self-hosted, simple y privacy-friendly)

Sin tracking no estás validando, estás adivinando.

4. Meta tags básicos para SEO/social

Cuando alguien comparta tu landing en LinkedIn / WhatsApp / Twitter, quieres que se vea bien (Open Graph). Mínimo:

• <title> con la propuesta principal
• <meta description> clara y atractiva
• og:image con una imagen (1200×630 recomendado)
• og:title y og:description para social shares

Pedile esto a la IA en el prompt original y te lo deja listo.

Las 3 métricas que dicen «sí valida» vs «no valida»

Después de 1-2 semanas con la landing live y tráfico inicial (mín 100-200 visitantes), mira:

Métrica 1: Conversion rate de visitante a email

Benchmark realista:

• <2%: hay problema en mensaje o audiencia
• 2-5%: razonable, vale iterar
• >5%: señal fuerte

Métrica 2: Calidad de los emails capturados

¿Son personas reales con perfil de tu cliente target? Si capturas 200 emails pero el 80% son founders mirando «cómo lo hizo este» en vez de tu cliente target, no validaste demanda real.

Métrica 3: Pre-órdenes o «yo pago ya»

La más fuerte. Si en el CTA pedís pre-pago o señal con pago, cada conversión vale 10× una captura de email. Conversion rate baja a 0.5-2%, pero cada uno es señal sólida.

Los 3 errores más comunes que veo en landings de validación

1. Tráfico cero con expectativa de validar. La landing perfecta sin tráfico no valida nada. Mínimo: $50-100 en Twitter/LinkedIn ads o tráfico orgánico de tu red, para tener 100-200 visitantes mínimo antes de sacar conclusiones.

2. CTA confuso o múltiple. «Suscríbete o agendá demo o miranos en redes» mata el conversion rate. Una acción.

3. No iterar. Si después de 200 visitantes tienes 1% conversion, no esperes a 1000 visitantes para cambiar. Iterá hero, copy, propuesta. La landing es un experimento, no un monumento.

Cuándo subir de Nivel 1 a Nivel 2 o 3

No subas de nivel antes de tiempo. Las señales claras para graduar:

De Nivel 1 a Nivel 2 (HTML simple → Astro):

• La idea ya validó (>3% conversion sostenido)
• Vas a invertir tiempo en hacer la landing «definitiva»
• Necesitás múltiples páginas (about, pricing, casos, blog)
• SEO empieza a importarte como canal de adquisición

De Nivel 2 a Nivel 3 (Astro manual → Astro agéntico):

• Publicás contenido recurrentemente (semanal, quincenal)
• Estás copiando-pegando setups entre páginas
• El 70% del trabajo de «agregar contenido» es repetitivo
• Querés que un agente se encargue de la metadata SEO y validaciones

Si todavía no validaste la idea, mantente en Nivel 1. Subir de nivel antes es over-engineering y consume tiempo que necesitas para hablar con tus primeros clientes.

¿Y ahora qué?

Si seguiste los pasos del Nivel 1, ya tienes tu primera landing online por $0 (o ~$10/año si conectaste un dominio). Si quieres ver cómo se ve esto cuando escala, te dejé los 2 sitios reales arriba —incluyendo el repo público de ELHDA que puedes clonar—.

El siguiente paso es traerle tráfico real y medir. Eso es la parte que requiere más arte que técnica.

Dentro de Cágala, Aprende, Repite tenemos founders compartiendo casos reales de validación: landings que funcionaron, landings que fallaron y qué iteraciones llevaron al «sí valida». Si estás en fase de validación, esa data te ahorra meses de trial-and-error solo.

Entrás gratis, descargás el template HTML como recurso de bienvenida, y si te suma el resto te quedás.

— Cristian

Preguntas frecuentes

¿Cuánto cuesta crear una landing page gratis con GitHub Pages?

Cero pesos si usas un subdominio de GitHub (tuusuario.github.io/turepo). Si conectas un dominio personalizado, solo pagas el dominio (típico $9-12/año en Cloudflare Registrar). El hosting + SSL + ancho de banda son gratis. Para sitios con tráfico moderado (decenas de miles de visitas/mes) sigue siendo gratis.

¿Astro o HTML simple para una landing?

Depende de la fase:

• HTML simple: validación cero-a-uno. Una sola página, copy estático. 18 min y listo.
• Astro: post-validación o sitios que evolucionan. Mejor performance, mejor SEO, más mantenible si vas a agregar páginas. Requiere 2-4h de setup inicial.

Si recién empiezas: HTML simple. Si ya validaste o el sitio va a crecer: Astro.

¿GitHub Pages o Cloudflare Pages: cuál usar?

Para empezar y validar: GitHub Pages. Es más simple de configurar, todo en una plataforma.

Para producción seria, especialmente con Astro: Cloudflare Pages. Performance superior (CDN global más rápido), mejor analytics nativo, integración directa con DNS Cloudflare. Lo que uso yo en lp.cristiantala.com y eslahoradeaprender.com.

¿Necesito saber programar para crear una landing con IA + GitHub Pages?

No para el Nivel 1. Pedile a Gemini, Claude o ChatGPT el HTML completo. Después es solo copy-paste a GitHub. Lo único técnico es activar Pages en Settings, que son 3 clicks. Si nunca tocaste GitHub, el primer intento te toma 30-45 min. El segundo, 10 min.

Para Nivel 2 (Astro) sí ayuda saber lo básico de cómo correr npm install y npm run build. Para Nivel 3 (agéntico) ayuda haber usado Claude Code antes.

¿Qué es un sistema «agéntico» para mantener un sitio?

Un sistema donde uno o más agentes IA (típicamente Claude Code con prompts custom) se encargan de tareas repetitivas: agregar contenido nuevo, generar metadata SEO, validar builds, notificar a buscadores. El humano define las reglas (en archivos como CLAUDE.md) y el agente las ejecuta.

Caso real público: github.com/ctala/landing-es-la-hora-de-aprender — el sitio del podcast Es La Hora de Aprender, donde agregar un episodio nuevo es 1 comando que el agente ejecuta de punta a punta.

¿Puedo conectar un dominio que ya tengo a GitHub Pages?

Sí. En tu DNS, agregas un CNAME que apunte a tuusuario.github.io, después en Settings → Pages → Custom Domain pones tu dominio. SSL automático. Demora 5-15 min en propagar. Funciona igual con Cloudflare DNS si tienes el dominio ahí.

¿Para qué NO sirve este stack (GitHub Pages / Astro)?

Para sitios con backend (procesar pagos directo, base de datos, autenticación de usuarios), e-commerce complejo, o aplicaciones SaaS. Para todo eso necesitas server real (Vercel, Railway, AWS, etc.). Para landing pages, blogs, sitios de podcast, sitios de producto estáticos, es ideal.

¿Qué herramientas uso para email capture y tracking?

Email capture: Listmonk (self-hosted, gratis), Tally + Google Sheets (sin backend), ConvertKit free tier (hasta 1,000 subs), Brevo free tier (300 emails/día).

Tracking: Cloudflare Web Analytics (gratis si estás en CF), Google Analytics 4 (gratis pero pesado), Plausible (privacy-friendly).