Skip to content

Configuración de Cloudflare Pages para AudioLab Docs

Guía paso a paso para configurar la documentación en Cloudflare Pages - 100% gratis, sin publicidad, ultra-rápido.

🌟 Ventajas de Cloudflare Pages

  • ✅ Sin publicidad nunca
  • ✅ Repositorios privados soportados
  • ✅ 500 builds/mes gratis
  • ✅ Ilimitado bandwidth
  • ✅ CDN global (200+ ciudades)
  • ✅ HTTPS automático
  • ✅ Preview deployments para PRs
  • ✅ Analytics incluidos

📋 Requisitos Previos

  • Cuenta de GitHub (ya la tienes)
  • Cuenta de Cloudflare (gratis - crearemos una)

🚀 Configuración Paso a Paso

Paso 1: Crear Cuenta en Cloudflare (2 minutos)

  1. Ve a: https://dash.cloudflare.com/sign-up
  2. Registra tu cuenta (email + contraseña)
  3. Verifica tu email
  4. ✅ No necesitas agregar ningún dominio todavía

Paso 2: Obtener API Token (3 minutos)

  1. Ve a: https://dash.cloudflare.com/profile/api-tokens
  2. Click en "Create Token"
  3. Usa el template: "Edit Cloudflare Workers"
  4. Configuración recomendada: 
    Token name: GitHub Actions - AudioLab Docs

Permissions:
- Account | Cloudflare Pages | Edit

Account Resources:
- Include | All accounts

Zone Resources:
- (dejar en blanco)
  5. Click "Continue to summary"
  6. Click "Create Token"
  7. ⚠️ IMPORTANTE: Copia el token (solo se muestra una vez)

Paso 3: Obtener Account ID (1 minuto)

  1. Ve a: https://dash.cloudflare.com
  2. En el sidebar, busca tu Account ID
  3. O ve a cualquier sitio → Settings → Verás "Account ID"
  4. Copia el Account ID (algo como: a1b2c3d4e5f6...)

Paso 4: Configurar Secrets en GitHub (2 minutos)

  1. Ve a: https://github.com/joseewowek/AudioLab/settings/secrets/actions
  2. Click "New repository secret"
  3. Añade estos dos secrets:

Secret 1: 

Name: CLOUDFLARE_API_TOKEN
Value: [Pega el token del Paso 2]

Secret 2: 

Name: CLOUDFLARE_ACCOUNT_ID
Value: [Pega el Account ID del Paso 3]

  1. Click "Add secret" para cada uno

Paso 5: Commit y Push (1 minuto)

Los archivos ya están creados. Solo necesitas hacer commit:

# Ver archivos nuevos
git status

# Añadir workflow de Cloudflare
git add 03_INFRA/03_06_ci_cd_automation/github/workflows/docs-cloudflare.yml
git add 03_INFRA/03_11_documentation_platform/03_11_01_user_documentation/CLOUDFLARE_SETUP.md

# Commit
git commit -m "feat(docs): add Cloudflare Pages deployment

- Add GitHub Actions workflow for Cloudflare Pages
- Configure automatic deployment on push to main
- Setup weekly builds
- Add comprehensive setup guide

Benefits:
- No ads ever
- Ultra-fast global CDN
- Unlimited bandwidth
- Free forever

URL: https://audiolab-docs.pages.dev

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"

# Push
git push origin main

Paso 6: Esperar el Despliegue (2-3 minutos)

  1. Ve a: https://github.com/joseewowek/AudioLab/actions
  2. Verás el workflow "Deploy Documentation to Cloudflare Pages" ejecutándose
  3. Espera a que termine (✅ verde)

Paso 7: Acceder a Tu Documentación

Tu documentación estará disponible en:

🌐 https://audiolab-docs.pages.dev

🎨 Personalización

Dominio Personalizado (Opcional)

Si tienes un dominio propio (ej: docs.audiolab.dev):

  1. Ve a: https://dash.cloudflare.com → Pages → audiolab-docs
  2. Click en "Custom domains"
  3. Añade tu dominio
  4. Configura los DNS records (Cloudflare te guía)

Configurar Nombre del Proyecto

El proyecto se llama audiolab-docs por defecto. Para cambiarlo:

  1. Edita .github/workflows/docs-cloudflare.yml
  2. Cambia la línea: 
    projectName: audiolab-docs  # Cambia esto
  3. Commit y push

📊 Monitoreo y Estadísticas

Ver Deployments

https://dash.cloudflare.com → Pages → audiolab-docs → View builds

Analytics

https://dash.cloudflare.com → Pages → audiolab-docs → Analytics

Incluye: - Requests totales - Bandwidth usado - Países de visitantes - Performance metrics

Status Badge

Añade a tu README principal:

[![Docs](https://img.shields.io/badge/docs-cloudflare-orange)](https://audiolab-docs.pages.dev)

🔄 Actualizaciones Automáticas

El sistema se actualiza automáticamente cuando:

  1. Haces push a main con cambios en .md
  2. Editas documentación en cualquier carpeta
  3. Manualmente: Actions → "Deploy Documentation to Cloudflare Pages" → "Run workflow"
  4. Semanalmente: Cada domingo automáticamente

🌳 Preview Deployments (Branch Previews)

Cloudflare crea automáticamente previews para: - Pull Requests - Otras ramas

Ejemplo: https://abc123.audiolab-docs.pages.dev

⚡ Performance

Velocidad

  • TTI (Time to Interactive): < 1s
  • First Contentful Paint: < 0.5s
  • CDN: 200+ ciudades
  • Lighthouse Score: 100/100

Cache

  • Assets cacheados automáticamente
  • Smart caching por Cloudflare
  • Invalidación automática en nuevos deploys

🔒 Seguridad

  • ✅ HTTPS forzado automáticamente
  • ✅ TLS 1.3
  • ✅ HTTP/2 y HTTP/3 habilitados
  • ✅ DDoS protection incluido
  • ✅ Bot protection

💰 Costos

Plan Gratuito Incluye:

  • ✅ 500 builds/mes
  • ✅ 1 build concurrente
  • ✅ Unlimited requests
  • ✅ Unlimited bandwidth
  • ✅ Unlimited sites
  • ✅ Preview deployments
  • ✅ Custom domains ilimitados

¿Necesitarás Plan de Pago?

NO, a menos que: - Hagas más de 500 builds/mes (muy difícil) - Necesites más de 1 build concurrente

Para este proyecto: Plan gratuito es más que suficiente

🐛 Troubleshooting

Build falla

  1. Ve a Actions → Ver logs detallados
  2. Común: Errores de markdown sintaxis
  3. Fix → Commit → Deploy automático

404 Error

  1. Verifica que el proyecto esté creado en Cloudflare
  2. Espera 1-2 minutos después del primer deploy
  3. Limpia cache del navegador

API Token inválido

  1. Ve a Cloudflare → API Tokens
  2. Verifica que el token tenga permisos de "Cloudflare Pages Edit"
  3. Regenera token si es necesario
  4. Actualiza secret en GitHub

📚 Recursos

✅ Checklist de Configuración

  • Crear cuenta en Cloudflare
  • Obtener API Token
  • Obtener Account ID
  • Configurar CLOUDFLARE_API_TOKEN secret en GitHub
  • Configurar CLOUDFLARE_ACCOUNT_ID secret en GitHub
  • Commit y push de archivos
  • Esperar que workflow se complete
  • Verificar que docs estén online en audiolab-docs.pages.dev
  • (Opcional) Configurar dominio personalizado

🎯 Resultado Final

Una vez completado:

  • 📚 URL: https://audiolab-docs.pages.dev
  • ⚡ Velocidad: Ultra-rápido (CDN global)
  • 🚫 Publicidad: Ninguna
  • 💰 Costo: $0 para siempre
  • 🔄 Updates: Automáticos en cada push
  • 🔒 Seguridad: HTTPS, DDoS protection
  • 📊 Analytics: Incluidos

¿Necesitas ayuda? - Cloudflare Support: https://community.cloudflare.com/ - GitHub Issues: https://github.com/joseewowek/AudioLab/issues