Tutorial Cloudflare Pages

Cloudflare Pages es una plataforma de alojamiento JAMstack que permite desplegar sitios web estáticos con integración continua, CDN global y soporte para dominios personalizados de forma gratuita y escalable. Este tutorial exhaustivo, incorpora mejores prácticas de DevOps, SEO y seguridad.

Requisitos Previos

Para garantizar un despliegue exitoso, verifica los siguientes prerrequisitos técnicos:

Cuenta gratuita en Cloudflare (regístrate en dashboard.cloudflare.com).
Node.js (versión LTS) y npm instalados localmente para herramientas como Wrangler.
Repositorio Git con un proyecto web estático (HTML, CSS, JS; frameworks como React, Vue o Hono).
Dominio propio (.com, .es, etc.) registrado en cualquier proveedor, con acceso a panel DNS.
Conocimientos básicos de terminal (Bash/PowerShell) y Git.

Estructura Óptima del Proyecto

Organiza tu proyecto para maximizar rendimiento y mantenibilidad:


                    /mi-proyecto

                    ├── index.html (Punto de entrada con metaetiquetas responsive)

                    ├── /estilos/ (CSS minificado)

                    ├── /scripts/ (JS bundlado)

                    ├── /imagenes/ (Optimizadas en WebP/SVG)

                    ├── robots.txt (Reglas SEO)

                    └── .gitignore (Exclusiones de git)

Instalación y Despliegue con CLI

Instala Wrangler, la CLI oficial de Cloudflare para Pages:

npm install -g wrangler

O usa npx para ejecución directa de forma ágil:

npx wrangler pages deploy ./ruta-a-tu-dist --project-name=mi-proyecto-demo

Cloudflare construye y distribuye tu sitio globalmente en su CDN Edge en cuestión de segundos, purgando la caché automáticamente.

Dominios Personalizados

Asigna dominios propios para otorgar profesionalismo y mejorar el SEO:

Tipo de Dominio	Registro DNS Recomendado	Proxy Cloudflare
www.ejemplo.com	CNAME → proyecto.pages.dev	Activado (Naranja)
ejemplo.com (apex)	A / ALIAS → Flatten CNAME	Activado
blog.ejemplo.com	CNAME → proyecto.pages.dev	Activado

Optimización SEO y Privacidad

Mejora indexación y protege el contenido sensible implementando los siguientes métodos:

robots.txt: User-agent: * Disallow: /politicas/. Evita la lectura de crawlers sobre directorios privados.
Meta tags: <meta name="robots" content="noindex, nofollow"> para añadir una capa extra al HTML.
Sitemap: Genera y adjunta tu archivo sitemap.xml a Google Search Console.
Activa la compresión Brotli y "Cache everything" a través de Page Rules para conseguir un TTFB menor a 100ms.

Integración CI/CD Automatizada

name: Deploy to Pages
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_TOKEN }}
          command: pages deploy .

Modo Mantenimiento Avanzado

Si necesitas parar y apagar tu sitio temporalmente sin eliminar el proyecto o el dominio:

Crea un directorio aislado estático: /mantenimiento/index.html. Diéñalo estilo profesional.
Despliégalo pisando tu producción temporalmente: npx wrangler pages deploy ./mantenimiento --project-name=mi-proyecto.
Toda la web reescribirá su index y bajará temporalmente sin dar errores de DNS.
Para reactivar y restaurar, vuelve a desplegar la carpeta de tu aplicación base.