Cómo alojar un sitio web estático gratis en 2026: GitHub Pages, Cloudflare Pages y formularios de contacto

Elegir la plataforma adecuada para alojar tu sitio web estático puede ahorrarte cientos de euros al año sin sacrificar velocidad, seguridad ni facilidad de mantenimiento. Las opciones gratuitas han madurado mucho, y plataformas como GitHub Pages y Cloudflare Pages ofrecen infraestructura lista para producción sin coste alguno. Pero hay un reto que la mayoría de tutoriales ignoran: ¿cómo gestionas los formularios de contacto en un sitio estático cuando no hay servidor que los procese? Esta guía te lleva por todo el proceso, desde elegir plataforma hasta conectar un formulario de contacto funcional, con ejemplos concretos y las limitaciones reales que debes conocer antes de decidirte.

Por qué el alojamiento estático gratuito merece tu atención

Un sitio web estático sirve archivos HTML, CSS y JavaScript pregenerados directamente al navegador. No hay PHP, no hay runtime de Node.js ni consultas a base de datos en cada carga de página. Esa simplicidad es precisamente lo que hace tan fiable al alojamiento de páginas estáticas gratuito: no hay nada que pueda fallar, que parchear ni que escalar.

Para pequeñas empresas, portfolios, landing pages de SaaS y sitios de documentación, el alojamiento estático cumple todos los requisitos:

• Velocidad: Los archivos se sirven desde un nodo edge de CDN, a menudo en menos de 100ms en cualquier parte del mundo.
• Seguridad: Sin runtime del lado del servidor, la superficie de ataque se reduce drásticamente.
• Coste: Tanto GitHub Pages como Cloudflare Pages son gratuitos para proyectos públicos y muchos privados.
• Simplicidad: Haz push del código al repositorio y el sitio se despliega automáticamente.

La única limitación real es la funcionalidad dinámica. Todo lo que requiere lógica del lado del servidor - como autenticación de usuarios, un carrito de compra o el procesamiento de formularios - necesita un servicio externo. Tenlo en cuenta mientras seguimos los pasos de configuración.

Comparativa de plataformas: GitHub Pages vs Cloudflare Pages

Conclusión: Si tu audiencia es global y quieres los tiempos de carga más rápidos posibles, Cloudflare Pages gana. Si tu equipo ya vive en GitHub y quieres la configuración más sencilla posible, GitHub Pages es una opción perfectamente válida.

Paso a paso: despliega en GitHub Pages

Este ejemplo asume que tienes un sitio HTML/CSS sencillo listo para publicar. Si usas un generador de sitios estáticos como Hugo o Jekyll, el proceso es prácticamente idéntico.

1. Crea un repositorio en GitHub. Ve a github.com/new y crea un repositorio público. Llámalo your-username.github.io si quieres que sirva desde el dominio raíz, o con cualquier otro nombre si prefieres que esté en una ruta de subdirectorio.
2. Sube los archivos de tu sitio. Desde la carpeta local de tu proyecto, ejecuta:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Activa GitHub Pages. En el repositorio, ve a Settings > Pages. En "Source", selecciona la rama main y la carpeta /root (o /docs si tu salida de build va ahí). Haz clic en Save.
4. Espera el despliegue. GitHub construirá y desplegará en 1-3 minutos. Verás la URL en vivo (por ejemplo, https://your-username.github.io) en el panel de configuración de Pages.
5. Conecta un dominio personalizado (opcional). Añade un archivo CNAME en la raíz de tu repositorio con tu nombre de dominio (por ejemplo, www.yoursite.com). Luego actualiza tu proveedor de DNS para que apunte un registro CNAME a your-username.github.io. GitHub provisionará el certificado SSL automáticamente en pocos minutos.

Paso a paso: despliega en Cloudflare Pages

1. Regístrate o inicia sesión en Cloudflare. Visita pages.cloudflare.com y conecta tu cuenta de GitHub o GitLab.
2. Crea un nuevo proyecto. Haz clic en "Create a project" y luego en "Connect to Git". Selecciona tu repositorio de la lista.
3. Configura los ajustes de build. Si tu sitio es HTML puro, deja el comando de build en blanco y establece el directorio de salida como / o donde esté tu index.html. Para Hugo, define el comando de build como hugo y la salida como public. Para Jekyll, usa jekyll build y la salida como _site.
4. Despliega. Haz clic en "Save and Deploy". Cloudflare clonará tu repositorio, ejecutará el build y publicará en su red edge global. Tu sitio obtiene un subdominio *.pages.dev de inmediato.
5. Añade un dominio personalizado. En el panel de tu proyecto, ve a "Custom domains" e introduce tu dominio. Si tu dominio ya está gestionado por Cloudflare DNS, la configuración es de un solo clic. Si no, tendrás que añadir un registro CNAME en tu registrador apuntando a tu dirección *.pages.dev.

Cada git push posterior a tu rama principal desencadena un redespliegue automático. Cloudflare también crea despliegues de vista previa para las pull requests, lo que resulta muy útil para revisar cambios antes de que pasen a producción.

Cómo añadir un formulario de contacto a tu sitio estático

Aquí es donde la mayoría de guías se detienen, y donde la mayoría de personas se atascan. Un formulario de contacto en un sitio web estático no puede enviar datos a sí mismo: no hay ningún servidor escuchando. Tienes tres opciones realistas:

• Un servicio backend de formularios (recomendado): apuntas el atributo action de tu formulario a un endpoint de terceros que recibe el envío, lo valida y te lo reenvía por correo.
• Una función serverless: escribes una pequeña función (Cloudflare Workers, AWS Lambda) que procesa el formulario. Funciona, pero requiere código y mantenimiento continuo.
• JavaScript fetch(): usas la API fetch del navegador para enviar los datos del formulario a un endpoint backend. Consulta nuestra guía sobre cómo enviar datos de formulario HTML con JavaScript fetch() para los detalles técnicos.

El camino más rápido hacia un formulario funcional es un servicio dedicado. Aquí tienes un ejemplo concreto usando Sendform:

Ejemplo práctico: un formulario de contacto funcional en 5 minutos

Antes de añadir cualquier código a tu sitio, necesitas crear una cuenta en Sendform y configurar un endpoint de formulario. El proceso tarda unos dos minutos:

1. Regístrate en Sendform.net. Crea una cuenta gratuita, sin tarjeta de crédito. Tras el registro tendrás un proyecto predeterminado listo para usar.
2. Crea un formulario. En tu panel, haz clic en "New Form". Dale un nombre, selecciona un proyecto e introduce la dirección de correo donde quieres recibir los envíos. Sendform verificará esa dirección antes de activar el endpoint.
3. Copia la URL de tu endpoint. Una vez creado el formulario, verás una URL de endpoint única con el formato https://sendform.net/!your-form-id. Cópiala: es lo que pegarás en tu HTML.

Con tu endpoint a mano, añade el siguiente HTML a tu sitio estático:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Sustituye your-form-id por el ID que aparece en tu panel de Sendform. Cada envío se reenvía por correo a la dirección que confirmaste durante la configuración. Sin código backend, sin servidor, sin factura de infraestructura mensual. Para patrones de UX más avanzados, incluyendo páginas de redirección tras el envío y correos de confirmación, consulta nuestra guía sobre buenas prácticas para formularios en sitios estáticos.

Si usas un constructor de sitios web junto a tu sitio estático, también cubrimos el proceso de integración en detalle en nuestro artículo sobre cómo integrar Sendform con tu constructor de sitios web.

Errores frecuentes que debes evitar

Tras ayudar a miles de usuarios a configurar alojamiento web estático gratuito, estos son los errores que generan más frustración:

1. Olvidar la página 404

Tanto GitHub Pages como Cloudflare Pages mostrarán una página de error genérica si no se encuentra una ruta. Crea un archivo 404.html personalizado en tu directorio raíz. Esto mantiene a los usuarios en tu sitio y protege su experiencia.

2. Subir secretos a un repositorio público

Las claves de API, los secretos de endpoints de formularios y las direcciones de correo nunca deben estar en un repositorio público de GitHub. Usa variables de entorno en Cloudflare Pages, o referencia un archivo de configuración privado listado en .gitignore.

3. Crear un formulario sin un plan de backend

Es el error más común. Los desarrolladores crean un formulario de contacto precioso, hacen push a GitHub Pages y descubren el día del lanzamiento que el formulario falla silenciosamente. Decide tu backend de formularios antes de escribir una sola etiqueta <input>. Herramientas como Sendform te permiten configurar un formulario de contacto que envía directamente al correo sin ningún código, eliminando por completo el problema del backend.

4. Ignorar los problemas de caché del build

Si tu sitio no se actualiza tras un push, puede que la caché del CDN esté sirviendo archivos obsoletos. Cloudflare Pages purga su caché automáticamente en cada despliegue. GitHub Pages es más lento en propagar los cambios; espera hasta 10 minutos, o añade una cadena de consulta a las URLs de tus assets durante las pruebas.

5. Usar rutas relativas de forma incorrecta

Si tu sitio de GitHub Pages vive en username.github.io/project-name/ (un subdirectorio), todas las rutas de assets deben tener en cuenta ese prefijo. Un enlace a /styles.css se romperá. Usa rutas relativas (./styles.css) o configura el ajuste baseURL de tu generador de sitios estáticos para que coincida con el subdirectorio.

6. Ignorar la automatización del flujo de trabajo de formularios

Una vez que tu formulario empieza a recibir envíos, puedes hacer mucho más que simplemente recibir correos. Sendform admite webhooks e integraciones que te permiten enrutar envíos automáticamente a Slack, un CRM o una hoja de cálculo. Nuestra guía sobre automatización de flujos de trabajo de formularios con webhooks y APIs te muestra exactamente cómo configurarlo sin escribir código backend.

Conclusión

El alojamiento de sitios web estáticos gratuito nunca ha sido tan potente. GitHub Pages es ideal para equipos ya integrados en el ecosistema de GitHub, mientras que Cloudflare Pages ofrece mejor rendimiento global y un plan gratuito más generoso. El verdadero reto no es el alojamiento en sí, sino las funcionalidades dinámicas - especialmente los formularios de contacto - las que suelen complicar las cosas. Al combinar cualquiera de estas plataformas con un servicio de formularios dedicado, obtienes un sitio web profesional y completamente funcional sin ningún coste de infraestructura. Empieza con una de las guías de plataforma anteriores, pon tu sitio en marcha y luego conecta tu formulario de contacto con Sendform para gestionar los envíos de forma fiable desde el primer día.

Añade un formulario de contacto a tu sitio estático en minutos

Usa Sendform para recoger envíos de formularios desde cualquier sitio estático alojado en GitHub Pages o Cloudflare Pages. Sin código backend, sin configuración de servidor, sin complicaciones. Solo apunta el atributo action de tu formulario a tu endpoint y listo.

Empieza gratis en Sendform.net →

Preguntas frecuentes