Cómo publiqué gratis una página web personal con Cloudflare Pages

Guía práctica desde la preparación del repositorio en GitHub hasta la conexión con Cloudflare Pages, la publicación automática y el dominio personalizado.

Cómo publiqué gratis una página web personal con Cloudflare Pages

Es común terminar una página personal y dejarla solamente en el ordenador porque pagar alojamiento y mantener un servidor parece demasiado trabajo. Yo buscaba una estructura más sencilla: subir el código a GitHub, desplegarlo automáticamente y disponer de HTTPS sin administrar un servidor. Para una web estática creada con HTML, CSS y JavaScript, Cloudflare Pages encajaba bien.

Este artículo resume el proceso completo: preparar el repositorio, conectarlo con Cloudflare Pages y publicar la web tanto en la dirección predeterminada como en un dominio propio. El ejemplo utiliza un sitio estático sin framework, aunque el flujo es parecido con React, Vite o Astro si se configuran correctamente el comando de compilación y la carpeta de salida.

1. Preparación antes del despliegue

Preparé una cuenta de Cloudflare, una cuenta y un repositorio de GitHub, y un archivo index.html como página inicial. La estructura mínima puede consistir en index.html en la raíz, acompañado de style.css y app.js.

Antes de subir los archivos, abrí la web localmente y comprobé el diseño y los enlaces. Las imágenes deben usar rutas relativas del repositorio, como ./images/photo.webp, y no rutas absolutas que solo existen en un ordenador. También revisé que no hubiera claves API, contraseñas ni configuraciones privadas. Los valores sensibles deben guardarse como variables de entorno o secretos de Cloudflare, ya que eliminarlos después no garantiza que desaparezcan del historial de Git.

2. Subir la web a GitHub

Creé el repositorio, confirmé los archivos y los envié a la rama main. La integración Git de Cloudflare Pages funciona con GitHub y GitLab y permite compilar y publicar automáticamente cada vez que se envía un cambio. Admite repositorios públicos y privados.

Cloudflare necesita permiso para acceder al repositorio elegido. Cuando sea posible, es más seguro autorizar solo el repositorio que se va a desplegar en lugar de conceder acceso general a todos.

3. Crear el proyecto de Cloudflare Pages

En el panel de Cloudflare abrí Workers & Pages, creé una aplicación, elegí Pages y conecté Git. Después de autorizar GitHub, seleccioné el repositorio preparado.

Los ajustes principales son el nombre del proyecto, la rama de producción, el framework, el comando de compilación y la carpeta de salida. El nombre se utiliza en la dirección pages.dev y main suele ser la rama de producción. Una web HTML sencilla puede seleccionar la opción sin framework y dejar vacío el comando de compilación. La carpeta de salida debe contener los archivos que se publicarán.

En un proyecto Vite, por ejemplo, el comando suele ser npm run build y la salida suele ser dist. Estos valores dependen del proyecto, por lo que conviene consultar package.json y la documentación del framework. En un monorepositorio también hay que seleccionar la carpeta raíz correcta.

4. Comprobar el primer despliegue

Al guardar la configuración, Cloudflare descarga el repositorio, instala las dependencias necesarias, compila y despliega el sitio. Si todo funciona, se obtiene una dirección como nombre-del-proyecto.pages.dev.

No comprobé solamente la portada. Revisé el acceso directo a las subpáginas, la carga de CSS, JavaScript e imágenes, la vista móvil, HTTPS y el comportamiento de las direcciones inexistentes. Si el despliegue falla, el registro de compilación de Deployments suele mostrar la causa. Los errores frecuentes son una carpeta de salida incorrecta, una versión diferente de Node.js, diferencias entre mayúsculas y minúsculas en los nombres de archivo e imágenes que no se añadieron al repositorio.

5. Despliegue automático con cada actualización

La mayor comodidad de la integración Git aparece después. Al modificar el sitio localmente y enviar los cambios a main, Cloudflare Pages inicia otra publicación. No hace falta usar FTP ni acceder a un servidor.

Las ramas y las solicitudes de incorporación también pueden disponer de despliegues de vista previa. Así se comprueba el resultado real antes de cambiar la web de producción. El historial de despliegues facilita comparar una versión correcta con otra que presenta problemas.

6. Conectar un dominio personalizado

La dirección pages.dev es suficiente, pero un dominio propio ofrece una identidad más estable. Se añade desde Custom domains dentro del proyecto y después se aplican los registros DNS indicados por Cloudflare.

El proceso es más sencillo si Cloudflare ya administra el DNS. Si se utiliza otro proveedor, hay que introducir correctamente el CNAME u otros registros solicitados. La propagación puede tardar. Después conviene decidir si la dirección principal será el dominio raíz o www y redirigir la otra variante.

7. Gratis no significa ilimitado

El plan gratuito de Cloudflare Pages es amplio para una web personal, pero tiene límites. Según la documentación oficial, permite 500 compilaciones al mes, hasta 20.000 archivos por sitio y un tamaño máximo de 25 MiB por recurso estático. Las solicitudes de Pages Functions cuentan dentro del uso del plan Workers.

Por eso conviene optimizar las imágenes, por ejemplo en WebP, en vez de subir fotos y vídeos originales sin control. Para una gran colección multimedia puede ser mejor utilizar almacenamiento independiente. El registro de un dominio también tiene un coste separado, aunque el alojamiento sea gratuito. Como los límites pueden cambiar, es recomendable revisar la página oficial antes de depender de una cifra concreta.

Conclusión

La ventaja principal de Cloudflare Pages fue evitar la administración de un servidor. Enviar cambios a GitHub equivale a publicar, y HTTPS y la distribución global funcionan sin una configuración adicional compleja.

El proceso completo consiste en probar la web localmente, subirla a main en GitHub, conectar el repositorio en Cloudflare Pages, configurar la compilación y la carpeta de salida, verificar la dirección pages.dev, añadir un dominio propio si se necesita y utilizar Git push para las siguientes publicaciones.

Aunque la primera pantalla de configuración puede parecer complicada, después del enlace inicial el mantenimiento de una web estática se vuelve muy sencillo. Es una buena forma de iniciar una página personal sin añadir una factura de alojamiento.

Referencias

• Integración Git de Cloudflare Pages: https://developers.cloudflare.com/pages/get-started/git-integration/

• Límites de Cloudflare Pages: https://developers.cloudflare.com/pages/platform/limits/