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

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

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

Un sitio web estático sirve archivos HTML, CSS y JavaScript ya generados directamente al navegador. No hay PHP, no hay runtime de Node.js y no hay consultas a una 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 se rompa, que parchear ni que escalar.

Para pequeñas empresas, portfolios, landing pages de SaaS y sitios de documentación, el hosting estático cumple con todo:

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

La única limitación real es la funcionalidad dinámica. Cualquier cosa que requiera lógica en el servidor, como autenticación de usuarios, un carrito de compra o el procesamiento de formularios, necesita un servicio externo. Tenlo en cuenta a medida que avancemos en 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 es la mejor opción. Si tu equipo ya trabaja en GitHub y quieres la configuración más sencilla, GitHub Pages es perfectamente válido.

Paso a paso: Desplegar 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. Nómbralo tu-usuario.github.io si quieres que se sirva en 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:
   Copiar

   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 Configuración > Pages. En "Fuente", selecciona la rama main y la carpeta /root (o /docs si tu salida de build va allí). Haz clic en Guardar.
4. Espera el despliegue. GitHub compilará y desplegará en 1-3 minutos. Verás la URL en vivo (por ejemplo, https://tu-usuario.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.tusitio.com). Luego actualiza tu proveedor de DNS para que apunte un registro CNAME a tu-usuario.github.io. GitHub generará el certificado SSL automáticamente en pocos minutos.

Paso a paso: Desplegar 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 "Crear un proyecto" y luego en "Conectar a 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 en / o donde esté tu index.html. Para Hugo, establece el comando de build como hugo y la salida en public. Para Jekyll, usa jekyll build y la salida en _site.
4. Despliega. Haz clic en "Guardar y desplegar". Cloudflare clonará tu repositorio, ejecutará el build y publicará en su red edge global. Tu sitio recibirá inmediatamente un subdominio *.pages.dev.
5. Añade un dominio personalizado. En el panel de tu proyecto, ve a "Dominios personalizados" 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 activará un redespliegue automático. Cloudflare también crea despliegues de previsualización para las pull requests, lo cual es 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 las guías se detienen y donde la mayoría de las 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 de backend para formularios (recomendado): Apuntas el atributo action de tu formulario a un endpoint de terceros que recibe el envío, lo valida y te lo manda 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 de backend. Consulta nuestra guía sobre cómo enviar datos de formularios 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

Supongamos que tienes un portfolio desplegado en GitHub Pages. Quieres que los visitantes puedan enviarte un mensaje y que esos mensajes lleguen a tu bandeja de entrada. Este es el HTML completo:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Tu nombre</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Tu correo electrónico</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Enviar mensaje</button>
</form>

Eso es todo lo que necesitas integrar. Sustituyes YOUR_FORM_ID por el ID de tu panel de Sendform, y cada envío llega por correo a la dirección con la que te registraste. Sin código en el servidor, sin infraestructura que gestionar, sin facturas mensuales. 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 con 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 comunes 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. Olvidarse de 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 la experiencia de tu marca.

2. Subir credenciales a un repositorio público

Las claves de API, los secretos de endpoints de formularios y las direcciones de correo electrónico 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 incluido en .gitignore.

3. Construir un formulario sin un plan de backend

Este es el error más frecuente. 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. Define tu solución de backend para formularios antes de escribir una sola etiqueta <input>. Herramientas como Sendform te permiten configurar un formulario de contacto que envíe 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, es posible que la caché del CDN esté sirviendo archivos desactualizados. 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 un query string a las URLs de tus recursos durante las pruebas.

5. Usar rutas relativas incorrectamente

Si tu sitio en GitHub Pages está en username.github.io/nombre-proyecto/ (un subdirectorio), todas las rutas de recursos 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. No automatizar el flujo de trabajo del formulario

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

Conclusión

El alojamiento de sitios web estáticos gratuito nunca ha sido tan potente. GitHub Pages es ideal para equipos que ya trabajan en el ecosistema de GitHub, mientras que Cloudflare Pages ofrece mejor rendimiento global y un plan gratuito más generoso. El verdadero desafío no es el alojamiento en sí, sino las funcionalidades dinámicas, especialmente los formularios de contacto, las que suelen dar problemas. Combinando 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 los envíos de formularios desde cualquier sitio estático alojado en GitHub Pages o Cloudflare Pages. Sin código en el servidor, sin configurar infraestructura, sin complicaciones. Solo apunta el atributo action de tu formulario a tu endpoint y listo.

Empieza gratis en Sendform.net →

Preguntas frecuentes