DEV Community

Cristian Tala
Cristian Tala

Posted on • Originally published at cristiantala.com

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

    «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-ideapú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 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:

  • 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).

The post Cómo crear una landing page gratis para validar tu idea (con video tutorial y casos reales) appeared first on Cristian Tala Sánchez.


Este articulo fue publicado originalmente en cristiantala.com. Si te interesa emprendimiento, IA y automatizacion, unite gratis a la comunidad Cagala, Aprende, Repite.

Top comments (0)