Volver al blog

Tu web personal gratis con Cloudflare y GitHub (con tu propio dominio)

Publica tu web en tu dominio, con HTTPS y deploy automático en cada push. Paso a paso con Cloudflare Workers y GitHub, sin pagar hosting.

Descargar PDF Compartir

Al terminar esta guía vas a tener tu web en tu propio dominio, con HTTPS y publicándose sola cada vez que haces git push. Sin pagar hosting. Solo pagas el dominio.

Así está montada esta misma web, johannjara.com. Te cuento el camino exacto que seguí, incluidos los puntos donde es fácil trabarse.

Lo que necesitas

  • Una cuenta en GitHub.
  • Una cuenta gratuita en Cloudflare.
  • Un dominio comprado en cualquier registrador. Yo uso Namecheap, pero el proceso es casi igual en todos.
  • Tu web: HTML puro o un proyecto que genere archivos estáticos (Astro, Vite, React…).
  • Una hora de trabajo, más la espera mientras el dominio se actualiza en internet.

Cómo funciona

Hay dos caminos. Uno publica tu web. El otro hace que la gente la encuentre cuando escribe tu dominio.

Diagrama: tu computadora envía el código a GitHub, Cloudflare lo construye y lo publica. El visitante escribe tu dominio, el registrador lo envía a Cloudflare y Cloudflare responde con tu página.

Tu registrador solo guarda una indicación: "este dominio lo maneja Cloudflare". Todo lo demás pasa en Cloudflare: el DNS, el certificado HTTPS y los archivos de tu web.

¿Por qué Cloudflare y no otra opción gratuita?

  • Las visitas a tus archivos no tienen costo ni límite. Si un video tuyo se vuelve viral, la web aguanta y no te llega una factura.
  • Puedes usarla para tu negocio. El plan gratis de Vercel, por ejemplo, es solo para uso personal y no comercial. Si tu web atrae clientes, eso importa.
  • Todo queda en un solo lugar: dominio, DNS, HTTPS y deploy.

¿Workers o Pages? Si buscas tutoriales vas a ver "Cloudflare Pages". Sigue funcionando, pero hoy Cloudflare recomienda Workers para proyectos nuevos y ahí concentra las mejoras. Esta guía usa Workers.

Paso 1: prepara tu web

Solo necesitas saber dos cosas de tu proyecto:

  1. Qué comando lo construye. Por ejemplo, npm run build.
  2. En qué carpeta deja el resultado. Por ejemplo, dist.
Tu webComando de buildCarpeta de salida
HTML puro (pon tus archivos en public/)ningunopublic
Astronpm run builddist
Vite (React, Vue, Svelte)npm run builddist
Esta webnpm run builddist

Detrás de escena: esta web no usa ningún framework. Es un script de Node, sin dependencias, que armé con ayuda de IA. Convierte las guías escritas en Markdown en páginas y PDF. Menos piezas, menos cosas que se rompen.

Paso 2: súbela a GitHub

Crea un repositorio vacío en GitHub y sube tu proyecto desde su carpeta:

git init
git add .
git commit -m "Primera versión de mi web"
git branch -M main
git remote add origin https://github.com/tu-usuario/mi-web.git
git push -u origin main

Revisa que tu .gitignore incluya la carpeta de salida (dist/) y node_modules/. Cloudflare construye la web por su cuenta; no necesitas subir el resultado.

Paso 3: agrega el archivo de Cloudflare

Crea un archivo llamado wrangler.jsonc en la raíz del proyecto. Le dice a Cloudflare qué publicar:

{
  // Debe coincidir con el nombre que le darás en Cloudflare
  "name": "mi-web",
  // Pon la fecha de hoy
  "compatibility_date": "2026-10-29",
  "assets": {
    // La carpeta que genera tu build
    "directory": "./dist",
    // Muestra tu página 404.html cuando una dirección no existe
    "not_found_handling": "404-page"
  }
}

Son seis líneas útiles y no hay más configuración. Súbelo con un git push.

Paso 4: conecta el repositorio en Cloudflare

En el panel de Cloudflare entra a Workers & Pages y elige Create application. Luego selecciona GitHub, autoriza el acceso si te lo pide y elige tu repositorio.

Esquema del panel de Cloudflare: en Create application, elige GitHub y luego tu repositorio.
Esquema simplificado del panel de Cloudflare. Los textos pueden variar un poco.

En la configuración, escribe tu comando de build. El comando de deploy ya viene puesto como npx wrangler deploy: déjalo así. Después elige Save and Deploy.

Esquema de la configuración: Build command con npm run build, Deploy command con npx wrangler deploy y el botón Save and Deploy.
Si tu web es HTML puro, deja el Build command vacío.

En uno o dos minutos tu web estará en línea en una dirección como mi-web.tu-usuario.workers.dev. Ábrela y revisa que todo se vea bien antes de seguir.

Paso 5: lleva tu dominio a Cloudflare

Este es el paso donde más gente se traba. Hazlo con calma.

5.1 Agrega el dominio. En Cloudflare entra a Domains y elige Onboard a domain. Escribe tu dominio sin www y elige el plan Free.

5.2 Revisa los registros DNS. Cloudflare escanea los registros que tenías y los copia. Ese escaneo no garantiza encontrar todos, así que compáralos con los de tu proveedor anterior antes de seguir.

Revisa sobre todo dos cosas:

  1. Tu correo. Si usas un correo con tu dominio (como hola@tudominio.com), sus registros MX y TXT deben estar. Si faltan, dejas de recibir correos.
  2. Tus verificaciones. Por ejemplo, el TXT de Google Search Console.

Esquema de la tabla de registros DNS con los registros de correo y de verificación resaltados.
Copia los que falten antes de cambiar los nameservers.

5.3 Copia tus nameservers. Cloudflare te asigna dos nameservers. Cópialos.

Esquema: Cloudflare muestra los dos nameservers asignados a tu dominio.

5.4 Cámbialos en tu registrador. En Namecheap: entra a Domain List, elige Manage junto a tu dominio y, en la sección de Nameservers, cambia a Custom DNS. Pega los dos de Cloudflare y guarda con el check verde.

Esquema del panel de Namecheap: Custom DNS, los dos nameservers de Cloudflare y el check verde para guardar.
En otros registradores la opción puede llamarse 'Nameservers personalizados'.

Antes de guardar: si tu dominio tiene DNSSEC activado en el registrador, desactívalo primero. Si no, tu dominio puede dejar de responder. Lo vuelves a activar desde Cloudflare cuando todo funcione.

5.5 Espera. El cambio puede tardar hasta 24 horas, aunque normalmente es bastante menos. Cloudflare te avisa por correo cuando el dominio queda activo.

Paso 6: conecta tu dominio a la web

Con el dominio activo, vuelve a Workers & Pages y abre tu proyecto. Entra a Settings, busca Domains & Routes, elige Add y luego Custom Domain. Escribe tu dominio y confirma con Add Custom Domain.

Esquema: en Settings, Domains & Routes, Add, Custom Domain, escribe tu dominio.

Cloudflare crea el registro DNS y el certificado HTTPS por ti. En unos minutos tu web abre en https://tudominio.com.

Opcional: que www también funcione

Mucha gente escribe www por costumbre. Para llevarla a tu dominio principal:

  1. Crea un registro DNS para www con el proxy activado (nube naranja). Un registro AAAA con el valor 100:: sirve.
  2. En Rules, crea una Redirect Rule con patrón comodín: de https://www.* a https://${1}, código 301 y conservando los parámetros de la URL.

Tu flujo de ahora en adelante

Ya no tienes que entrar a Cloudflare para publicar. Editas, haces push y listo:

git add .
git commit -m "Nueva guía"
git push

Cloudflare detecta el push, construye la web y la publica en uno o dos minutos.

Lo que incluye el plan gratis

QuéPlan gratis
Visitas a tus páginas e imágenesSin costo ni límite
Minutos de build3.000 al mes
Builds al mismo tiempo1
Tiempo máximo por build20 minutos
HTTPS en tu dominioIncluido

Para una web personal o un blog, no te vas a acercar a esos límites. Esta web tarda segundos en construirse.

Errores comunes

  • Página en blanco o 404 en todo el sitio. La carpeta de assets.directory no coincide con la que genera tu build. Revisa que sean la misma.
  • El nombre no coincide. Si el name de tu wrangler.jsonc es distinto al del proyecto en Cloudflare, Cloudflare te abre un pull request en GitHub con la corrección. Acéptalo y se vuelve a publicar solo.
  • Dejaste de recibir correos. Faltaron los registros MX o TXT del correo al mover el DNS. Cópialos desde tu proveedor anterior.
  • El dominio no responde después del cambio. Revisa si DNSSEC seguía activo en el registrador.
  • Cloudflare no deja agregar tu dominio a la web. Probablemente hay un registro DNS viejo que apunta a tu hosting anterior. Bórralo e inténtalo de nuevo.
  • "Ya cambié los nameservers y no carga". Dale tiempo. La propagación puede tardar horas.

Preguntas frecuentes

¿Es realmente gratis tener mi web en Cloudflare?

Sí. Solo pagas el dominio. El plan gratis incluye visitas sin costo ni límite a tus páginas e imágenes, 3.000 minutos de build al mes y HTTPS en tu dominio.

¿Uso Cloudflare Workers o Cloudflare Pages?

Workers. Pages sigue funcionando, pero hoy Cloudflare recomienda Workers para proyectos nuevos y ahí concentra las mejoras.

¿Puedo usar el plan gratis para la web de mi negocio?

Sí. En el plan gratis de Cloudflare puedes tener una web comercial. El plan gratis de Vercel, por ejemplo, es solo para uso personal y no comercial.

¿Cuánto tarda en funcionar mi dominio después de cambiar los nameservers?

Puede tardar hasta 24 horas, aunque normalmente es bastante menos. Cloudflare te avisa por correo cuando el dominio queda activo.

Resultado

Tienes tu web en tu dominio, con HTTPS, sin pagar hosting y publicándose sola con cada push.

Siguiente paso: agrega tu dominio a Google Search Console y envía tu sitemap.xml. Así Google empieza a mostrar tu web en sus resultados.

¿Quieres construir algo con IA o aprender a hacerlo?

Cuéntame en qué estás. Te respondo personalmente.

WhatsApp