Cómo Publicar tu Web Estática en Cloudflare Pages Automáticamente (Para Oscar)

¡Hola de nuevo, Oscar! En el artículo anterior vimos los conceptos básicos de Git y cómo guardar tu proyecto en un repositorio privado de GitHub. Ahora que ya tienes tu código seguro en la nube, es hora de dar el siguiente paso lógico: enseñárselo al mundo.

Olvídate de los antiguos programas FTP (como FileZilla) y de tener que subir archivos manualmente cada vez que haces un cambio. Hoy vamos a descubrir Cloudflare Pages, una plataforma que nos permite publicar páginas web estáticas de forma rápida, segura y totalmente gratis.

Contenidos

¿Qué es Cloudflare y qué es el Despliegue Automático?
El Flujo de Trabajo: Desde tu PC hasta el Mundo
Guía Paso a Paso para Publicar tu Web
¿Y Ahora Qué? El Flujo de Trabajo del Día a Día
Solución de Problemas Comunes
Conclusión

¿Qué es Cloudflare y qué es el Despliegue Automático?

Cloudflare es una de las empresas de infraestructura de internet más grandes del mundo. Su misión principal es hacer que las páginas web carguen rápido (gracias a su red de servidores globales) y protegerlas contra ataques.

Dentro de sus servicios, ofrecen Cloudflare Pages, una herramienta pensada para alojar webs estáticas. Lo mejor de todo es su Despliegue Automático (o Integración Continua).

¿Qué significa esto? Significa que Cloudflare se conecta a tu repositorio de GitHub. Una vez configurado, cada vez que hagas un cambio en tu ordenador y lo subas a GitHub (lo que llamamos hacer un git push), Cloudflare se entera automáticamente, coge tu nuevo código y actualiza tu página web en cuestión de segundos. ¡Tú solo te preocupas de escribir código!

El Flujo de Trabajo: Desde tu PC hasta el Mundo

Para que veas lo increíble y cómodo que es este proceso, aquí tienes un diagrama de cómo funciona todo una vez que lo hemos configurado:

sequenceDiagram
    participant PC as Tu Ordenador (Local)
    participant GH as GitHub (Repositorio Privado)
    participant CF as Cloudflare Pages
    participant Web as Tu Web Pública
    
    PC->>GH: 1. Haces un commit y un 'git push'
    Note over GH,CF: El despliegue automático entra en acción
    GH-->>CF: 2. Avisa de que hay nuevo código
    CF->>GH: 3. Descarga la nueva versión
    CF->>CF: 4. Prepara y construye la web
    CF->>Web: 5. Publica los cambios a nivel mundial

Guía Paso a Paso para Publicar tu Web

Partimos de la base de que ya tienes tu página web estática (tus archivos HTML, CSS e imágenes) en un repositorio privado en GitHub. Vamos a publicarla:

Paso 1: Crear una cuenta en Cloudflare

Si aún no tienes una, ve a Cloudflare y regístrate de forma gratuita. Solo necesitas un correo electrónico y una contraseña. No te pedirán ninguna tarjeta de crédito.

Una vez registrado, verifica tu correo haciendo clic en el enlace que te enviarán. Después, entra en tu Dashboard (panel de control), que es la pantalla principal desde la que gestionarás todo.

Paso 2: Crear un Token de Acceso en GitHub

⚠️ ¿Por qué necesitamos un Token?

GitHub ya no permite que servicios externos (como Cloudflare) accedan a tus repositorios usando tu contraseña de usuario directamente. En su lugar, utilizan Tokens de Acceso Personal (PAT, del inglés Personal Access Token). Piensa en él como una “llave de repuesto” que le das a Cloudflare: tiene acceso limitado solo a lo que tú le permitas, y puedes revocarla en cualquier momento sin cambiar tu contraseña.

Sigue estos pasos dentro de tu cuenta de GitHub:

2.1. Accede a la configuración de tokens

Haz clic en tu foto de perfil (esquina superior derecha de GitHub).
En el menú desplegable, selecciona Settings (Configuración).
En el menú de la izquierda, baja hasta el final y haz clic en Developer settings (Configuración de desarrollador).
Haz clic en Personal access tokens y luego en Tokens (classic).

💡 GitHub también ofrece “Fine-grained tokens” (tokens de grano fino), que son más modernos y precisos. Sin embargo, para esta integración con Cloudflare recomendamos los Tokens (classic), ya que son más sencillos y funcionan perfectamente.

2.2. Crea el nuevo token

Haz clic en el botón verde Generate new token y elige Generate new token (classic).
GitHub te pedirá confirmar tu contraseña. Introdúcela y continúa.
Rellena los campos del formulario:
- Note (Nota): Pon un nombre descriptivo para recordar para qué sirve este token. Por ejemplo: Cloudflare Pages - Mi Web Oscar. Este nombre es solo para ti.
- Expiration (Caducidad): Aquí decides durante cuánto tiempo será válido el token. Para empezar, puedes seleccionar 90 days (90 días). Cuando caduque, tendrás que crear uno nuevo y actualizar la conexión en Cloudflare. Si prefieres no preocuparte de esto, selecciona No expiration (Sin caducidad), aunque es menos seguro.

2.3. Selecciona los permisos (Scopes)

Los Scopes son los permisos que le concedes a este token. Es muy importante no darle más permisos de los necesarios. Para que Cloudflare pueda leer tus repositorios y desplegar tu web, solo necesitas marcar una casilla:

✅ repo — Marca esta casilla principal. Al hacerlo, se marcarán automáticamente todas las subcasillas que hay debajo (repo:status, repo_deployment, public_repo, repo:invite, security_events). Esto le da a Cloudflare acceso completo a tus repositorios privados y públicos, que es justo lo que necesita.

El resto de opciones (workflow, write:packages, admin:org, etc.) déjalas sin marcar. No son necesarias y le darían a Cloudflare acceso a partes de tu cuenta de GitHub que no nos interesan.

2.4. Genera y copia el token

Baja hasta el final de la página y haz clic en el botón verde Generate token (Generar token).
GitHub te mostrará el token, que es una cadena larga de caracteres que empieza por ghp_, por ejemplo: ghp_aBcDeFgHiJkLmNoPqRsTuVwXyZ123456.

⚠️ ¡MUY IMPORTANTE! Copia este token AHORA y guárdalo en un lugar seguro (como el bloc de notas o un gestor de contraseñas). GitHub solo te lo mostrará una vez. Si cierras la página sin copiarlo, tendrás que borrarlo y crear uno nuevo. Trátalo como si fuera una contraseña: no lo compartas con nadie.

Paso 3: Conectar GitHub con Cloudflare usando el Token

Ahora volvemos al panel de Cloudflare para introducir ese token y crear la conexión.

En el menú lateral izquierdo de tu Dashboard de Cloudflare, busca y haz clic en Workers & Pages.
Haz clic en el botón azul Create application (Crear aplicación).
Selecciona la pestaña Pages.
Haz clic en Connect to Git (Conectar a Git).
Cloudflare te mostrará las opciones de proveedor de Git. Selecciona GitHub.
En este momento, es posible que Cloudflare te redirija a GitHub para pedirte permiso de acceso a tu cuenta mediante la autenticación de GitHub (OAuth). Si es así, haz clic en Authorize Cloudflare (Autorizar a Cloudflare). Esta autorización inicial es normal y necesaria.
Una vez de vuelta en Cloudflare, verás el listado de tus repositorios. Si no aparece ninguno o tienes un repositorio privado que no se ve, busca la opción Add account o Configure GitHub App y asegúrate de seleccionar los repositorios específicos a los que quieres dar acceso.

💡 ¿Y dónde meto el token que he creado? En el flujo más habitual, Cloudflare gestiona la conexión con GitHub mediante OAuth (la autorización que acabas de hacer). El token que hemos creado en el paso anterior es útil si en algún momento Cloudflare te pide explícitamente un “API Token” o si prefieres conectarlo manualmente desde la sección Account Settings > Integrations de Cloudflare. En ese caso, verás un campo donde pegar directamente el token ghp_... que copiaste.

Paso 4: Configurar el Despliegue

Una vez seleccionado el repositorio que quieres publicar, llegarás a la pantalla de configuración Set up builds and deployments. Como tu web es estática pura (solo HTML, CSS e imágenes, sin frameworks como React o Vue), la configuración es muy sencilla:

Campo	Qué poner	Por qué
Project name	`mi-web-oscar` (o el nombre que quieras)	Define tu URL temporal: `mi-web-oscar.pages.dev`
Production branch	`main` o `master`	Es la rama principal de tu repositorio (comprueba cuál tienes tú)
Framework preset	`None` (Ninguno)	Tu web es HTML puro, sin herramientas de compilación
Build command	(Déjalo en blanco)	Solo se necesita si tu web requiere compilación previa
Build output directory	(En blanco, o `dist` / `public` si aplica)	Si tu `index.html` está en la raíz, déjalo vacío

💡 ¿Cómo sé si mi rama se llama main o master? Abre tu repositorio en GitHub y mira arriba a la izquierda, justo debajo del nombre del repositorio. Verás un botón con el nombre de la rama activa. Ese es el nombre que debes copiar aquí.

Paso 5: ¡Guardar y Desplegar!

Haz clic en Save and Deploy. Verás una pantalla de consola en tiempo real donde Cloudflare empieza a trabajar: descarga tu código de GitHub, lo procesa y lo publica. En menos de un minuto, aparecerá un mensaje de éxito y un enlace en verde con tu nueva web ya visible en internet. ¡Puedes hacer clic en ese enlace y compartirlo con quien quieras!

Aquí tienes un resumen visual de todo el proceso de configuración que acabamos de hacer:

flowchart TD
    A[GitHub: Configuración] --> B[Settings > Developer Settings]
    B --> C[Personal Access Tokens > Classic]
    C --> D["Crear token con permiso 'repo'"]
    D --> E[Copiar token ghp_...]
    
    E --> F[Panel de Cloudflare]
    F --> G[Workers & Pages > Create Application]
    G --> H[Pages > Connect to Git > GitHub]
    H --> I[Autorizar acceso y seleccionar repositorio]
    I --> J["Configurar despliegue (Framework: None)"]
    J --> K((Save and Deploy))
    K --> L[¡Web publicada en .pages.dev!]

    style D fill:#fff3cd,stroke:#333,stroke-width:2px
    style E fill:#f8d7da,stroke:#333,stroke-width:2px
    style K fill:#dff0d8,stroke:#333,stroke-width:2px
    style L fill:#d9edf7,stroke:#333,stroke-width:2px

¿Y Ahora Qué? El Flujo de Trabajo del Día a Día

Una vez que has hecho toda esta configuración (que solo tienes que hacer una vez), el flujo cotidiano es increíblemente simple. Cuando quieras actualizar tu web, los pasos son:

Edita tus archivos en tu ordenador con tu editor de código (Antigravity, VS Code, etc.).
Guarda el commit con Git: git add . y luego git commit -m "Descripción del cambio".
Sube los cambios a GitHub: git push.
Espera un minuto. Cloudflare detecta el push automáticamente y actualiza tu web.

¡Nada más! No tienes que tocar Cloudflare nunca más para publicar actualizaciones.

Solución de Problemas Comunes

Si algo no funciona como esperabas, aquí tienes los errores más habituales:

“No veo mi repositorio en Cloudflare”

Es probable que al autorizar la GitHub App de Cloudflare, hayas elegido “Only select repositories” (Solo repositorios seleccionados) pero no hayas añadido el tuyo. Ve a GitHub > Settings > Applications > Cloudflare Pages y haz clic en Configure para añadir el repositorio que falta.

“El despliegue falla con un error de build”

Comprueba que el campo Build output directory apunta a la carpeta correcta donde está tu index.html. Si está en la raíz del repositorio, déjalo en blanco. Si está dentro de una carpeta llamada public, escribe public.

“Mi web se despliega pero se ve en blanco”

Revisa que tu archivo principal se llama exactamente index.html (en minúsculas). Los servidores web son sensibles a mayúsculas y minúsculas.

“El token de GitHub ha caducado”

Crea un nuevo token en GitHub siguiendo el Paso 2 y actualiza la integración desde Cloudflare en Settings > Integrations.

Conclusión

¡Y ya está! Has pasado de tener los archivos en tu ordenador a tener una web alojada en una de las redes más rápidas del mundo.

La magia de esto es que solo tienes que hacer esta configuración una vez. A partir de ahora, cada vez que quieras cambiar un texto, añadir una imagen o crear una sección nueva, solo tendrás que editarlo en tu IDE, hacer tu commit y enviarlo a GitHub (git push). En un par de minutos, tu web estará actualizada automáticamente sin que toques absolutamente nada más.

¡Espero que te sirva de ayuda para lanzar todos tus proyectos estáticos!

Categorías: Desarrollo Web Tutoriales

Etiquetas: cloudflare github hosting tutorial web estatica