Cómo publicar un sitio web estático en Cloudfare Pages
Te propongo darle una mirada al plan gratuito de la plataforma Pages de Cloudfare; destinada a proveer alojamiento para sitios web estáticos, más conocidos por Jamstack. ¿Vale la pena? ¿Es realmente gratis? ¿Para qué se puede usar? Todo esto, y nada más, acá.
Cloudfare Pages, una nueva plataforma para Jamstack
Cloudfare sigue sumando servicios a su ya de por sí abultado portafolio. Según datos presentados por W3Techs, Cloudflare es utilizado por el 79,9 % de todos los sitios web cuyo servicio de proxy inverso son reportados a W3Techs.
Por eso, dentro de un crecimiento sostenido que parece ser una estrategia para conquistar al mundo, la empresa decidió desarrollar un servicio específicamente para cubrir el incipiente movimiento del Jamstack, es decir: sitios sencillos, minimalistas y con el impulso que la moda suele imponer.
Características de Cloudflare Pages
Cloudflare presenta a Pages, como una solución para desarrolladores que «buscan eficiencia, rendimiento y seguridad en el despliegue de sus aplicaciones web». (claro, eso lo dicen ellos).
Vamos a ver cuáles son sus principales características 👇
Despliegue global instantáneo
Una de las promesas de Cloudflare Pages es su capacidad para desplegar sitios web estáticos de manera instantánea.
Esto significa que los proyectos pueden estar accesibles desde cualquier parte del mundo en cuestión de segundos, aprovechando la extensa red de servidores de Cloudflare.
Esta característica es fundamental para las empresas y desarrolladores que tengan la necesidad de maximizar la disponibilidad y el rendimiento de sus sitios o aplicaciones web.
Integración con proveedores de Git
Al igual que otras plataformas similares (como es el caso de Kinsta y Netlify), Cloudflare Pages facilita el despliegue de proyectos mediante la integración directa con proveedores de servicios de Git, como ser GitHub, GitLab y Bitbucket.
Esto permite a mantener un flujo de trabajo bastante ordenado y continuo, desde el desarrollo hasta la publicación de los sitios, sin necesidad de abandonar el entorno de control de versiones más utilizado del mundo.
Carga directa y uso de la línea de comandos
Para aquellos proyectos que ya han sido precompilados o que requieren de una mayor personalización en el proceso de despliegue, Cloudflare Pages ofrece la opción de cargar activos directamente a través de la función «Direct Upload».
Se puede utilizar la herramienta de línea de comandos C3 para gestionar proyectos, lo cual amplía las posibilidades de despliegue y gestión para los usuarios a los que les gusta la línea de comandos.
Funciones de Pages y despliegue de código del lado del servidor
Jamstack no implica no tener ningún back-end, puede existir, pero no de la manera «tradicional».
Cloudflare Pages introduce las «Pages Functions», una funcionalidad que permite desplegar código del lado del servidor.
Esto te habilita a desarrollar funcionalidades dinámicas en tus sitios sin la necesidad de mantener un servidor dedicado, simplificando considerablemente la arquitectura de tus proyectos.
Seguridad y gestión
Rollbacks instantáneos
Una característica destacable de Cloudflare Pages, y que no es muy fácil de encontrar en plataformas similares, es la capacidad de realizar «rollbacks» o reversiones instantáneas a despliegues anteriores.
Esta opción te proporciona una «red de seguridad», permitiendo revertir rápidamente cualquier cambio en caso de detectar errores o problemas de rendimiento en la versión más reciente de tus sitios.
Configuración de redirecciones
La gestión de redirecciones es un aspecto fundamental en la administración de aplicaciones web, y Cloudflare Pages ofrece herramientas integradas para configurarlas fácilmente.
Esto es especialmente útil para mantener la estructura de enlaces, mejorar la experiencia del usuario y preservar el SEO de los proyectos desplegados en su plataforma.
Cómo subir un sitio en Cloudfare Pages
El primero paso es crearte una cuenta en Cloudfare. Nada raro. Lo de siempre. Un email y un buen password: https://dash.cloudflare.com/sign-up/workers-and-pages
Una vez que tenes tu cuenta, ingresa al panel de control y selecciona la pestaña «Pages».
Como verás, tenemos dos opciones para desplegar nuestro sitio en los servidores de esta gente, a saber: usando un repositorio Git o subiendo un archivo directo.
Por brevedad, vamos a explorar el método más directo.
Subiendo el sitio web
Esta opción es la más directa, sobre todo si tenes un proyecto pequeño y no queres (o no podés, por el motivo que sea) tener un repositorio.
Estando en el dashboard, presiona el botón «Upload assets» e ingresa un nombre para tu proyecto:
Ahora, arrastra y sola tus archivos HTML, CSS, JS, y todo lo que tengas dentro de tu sitio.
Presiona «Deploy site» y si todo sale bien, la plataforma te muestra un mensaje como este, en donde te dan la URL de tu flamante sitio:
En esta prueba, utilicé el sitio estático que suelo usar para probar los servicios de hospedaje: https://collages.pages.dev (generado con el CMS Publii).
Cómo ya te habrás dado cuenta, el sitio web queda alojado en un subdominio de pages.dev.
💡 Si te interesa ver que sitios hay alojados en Pages, ejecuta la siguiente búsqueda 👉 site:https://*.pages.dev
Accediendo al dashboard del proyecto vas a poder:
- Crear una nueva aplicación / sitio.
- Visitar el sitio.
- Ver los detalles del proyecto.
Cuando presionas «View details», ante ti, se despliegan una serie de opciones en forma de pestaña, en donde vas a poder configurar las funciones, las redirecciones, las variables de ambiente y los headers.
Cómo usar los redirects
Si bien este tutorial es básico, por espacio (y, sobre todo, por pereza), un aspecto que quizás necesites utilizar, por más sencillo que sea tu sitio, es el redirect.
No es raro hacer algunos cambios a nivel de estructura de URL, o cuando compramos un dominio expirado y es necesario recuperar las antiguas URL para no perder las visitas o backlinks que tienen esas páginas. Es en esos escenarios, en donde entran en juego las redirecciones.
Las redirecciones en Cloudflare Pages se gestionan declarando las mismas en un archivo de texto simple llamado _redirects, sin extensión de archivo, ubicado en el directorio raíz de tu proyecto.
👌 Si conoces Netlify, los redirect de Cloudfare Pages son casi una copia.
Algo a considerar, es que la ubicación de esta carpeta es específica de cada proyecto, lo que significa que el archivo _redirects puede no siempre estar en el directorio raíz del repositorio.
Una sola redirección se define por línea siguiendo un formato muy sencillo que incluye el origen, el destino y, opcionalmente, el código de estado HTTP.
[source] [destination] [code?]
El origen debe ser una ruta de archivo que puede incluir comodines (*) y marcadores de posición. Los fragmentos en el origen no son evaluados por la red de Cloudflare sino por el navegador del usuario, por lo que cualquier fragmento en el origen no se tiene en cuenta.
El destino requiere una ruta de archivo o un enlace externo, y puede incluir fragmentos, cadenas de consulta, splats y marcadores de posición. El código de estado HTTP es opcional, siendo 302 el valor predeterminado.
👉 Un proyecto en Cloudflare Pages está limitado a 2,000 redirecciones estáticas y 100 redirecciones dinámicas, con un total combinado de 2,100 redirecciones. Cada declaración de redirección tiene un límite de 1,000 caracteres.
Las redirecciones ejecutan antes de los encabezados, por lo que en caso de que una solicitud coincida con reglas en ambos archivos, prevalecerá la redirección.
Un ejemplo
Veamos un ejemplo con un archivo _redirects que incluye múltiples redirecciones, donde el orden de las mismas es importante.
Las redirecciones estáticas deben aparecer antes que las dinámicas y siempre se seguirán, independientemente de si coinciden con un activo solicitado. Por ejemplo:
/home301 / 301
/home302 / 302
/querystrings /?query=string 301
/twitch https://twitch.tv
/trailing /trailing/ 301
/notrailing/ /nottrailing 301
/page/ /page2/#fragment 301
/blog/* https://blog.my.domain/:splat
/products/:code/:name /products?code=:code&name=:nameEsto solo fue la «punta del iceberg», te recomiendo ver la documentación oficial: https://developers.cloudflare.com/pages/configuration/redirects/
¿Cuáles son las limitaciones del plan gratuito?
Según se encuentra en la página que contiene los planes ofrecidos por Cloudfare, el plan gratuito de Pages ofrece:
Compilaciones y despliegues
Cloudflare Pages automatiza el proceso de compilación y despliegue de sitios web cada vez que se introduce nuevo código en un repositorio Git. En su plan gratuito, los usuarios pueden realizar hasta 500 compilaciones mensuales. Sin embargo, cada compilación tiene un límite de tiempo de 20 minutos. Para proyectos que requieran una mayor cantidad de compilaciones o tiempos de compilación más extensos, Cloudflare ofrece planes Pro y Business, que amplían significativamente estas capacidades.
Dominios personalizados
El plan gratuito permite hasta 100 dominios personalizados por proyecto.
Gestión de archivos
Una de las fortalezas de Cloudflare Pages es su capacidad para distribuir los archivos de un sitio a través de una red global, minimizando la latencia y mejorando la experiencia del usuario.
Los sitios en Cloudflare Pages pueden albergar hasta 20,000 archivos, con un tamaño máximo por archivo de 25 MiB. Además, un archivo de headers puede incluir hasta 100 reglas.
Despliegues de previsualización y redirecciones
La plataforma permite un número ilimitado de despliegues de previsualización, facilitando el testeo de cambios antes de su publicación oficial.
En cuanto a las redirecciones, un archivo _redirects puede contener hasta 2,000 redirecciones estáticas y 100 dinámicas.
Usuarios y proyectos
Cloudflare Pages no impone un límite en el número de usuarios que pueden gestionar un sitio. A pesar de que Pages tiene un límite suave de 100 proyectos por cuenta para prevenir el abuso, es posible solicitar un aumento de este límite para acomodar necesidades específicas.
⚠️ Para proteger su servicio contra el abuso, Cloudflare puede limitar temporalmente la capacidad de los usuarios para crear nuevos proyectos en Pages si detecta una cantidad excesiva de aplicaciones desplegadas en un corto periodo.
¿Vale la pena Cloudfare Pages?
Si este artículo hubiera sido redactado (íntegramente) por una inteligencia artificial, te diría algo así:
«En conclusión, Cloudflare Pages se establece como una solución integral para el despliegue de aplicaciones full-stack, ofreciendo una combinación de eficiencia, rendimiento y seguridad. Su integración con proveedores de Git, junto con la capacidad de realizar despliegues directos y manejar funciones del lado del servidor, hacen de Cloudflare Pages una herramienta valiosa para desarrolladores y empresas que buscan optimizar su presencia en la web.», pero, suena muy pretencioso y un poco exagerado; aunque no tanto...
¿Preguntaste por mi honesta opinión? Sí, creo que Cloudflare Pages es uno de los mejores servicios que probé. Tiene todo: es fácil, podés subir un sitio sin complicaciones, arrastrando una carpeta y listo. Tenes redirecciones, control de cabeceras, podés ver los logs, y las limitaciones del plan gratuito son más que razonables, sobre todo para proyectos pequeños.
Por último, pero no por eso menos importante, tenes el respaldo de una empresa grande que difícilmente desaparezca de un día para otro; detalle no menor si tus proyectos son comerciales.
Por todo lo anterior, si estás buscando un proveedor para alojar tus sitios web estáticos, te recomiendo que le des una mirada a Cloudfare Pages.
Suerte.
/ Súmate al boletín. No es gran cosa, pero es gratis 👇 /