Guía de despliegue web

Guía de despliegue: web estática → GitHub → Cloudflare Pages

Guía paso a paso para subir una web estática a GitHub, desplegarla en Cloudflare Pages con CI/CD automático y añadirle un dominio personalizado.

---

Índice

1. Requisitos previos
2. Inicializar Git y subir a GitHub
3. Desplegar en Cloudflare Pages
4. CI/CD automático con GitHub Actions
5. Añadir dominio personalizado
6. Resumen de comandos rápidos

---

1. Requisitos previos

• Node.js ≥ 22 (para wrangler)
• Git
• GitHub CLI (gh) — autenticado con token (permisos: repo, read:org)
• Cuenta en Cloudflare
• Clave SSH añadida a GitHub (para hacer push sin contraseña)

Instalar herramientas

# Node.js 22 con nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
source ~/.nvm/nvm.sh
nvm install 22

# Wrangler (CLI de Cloudflare)
npm install -g wrangler

# GitHub CLI
sudo apt install gh -y          # Ubuntu/Debian
# o: brew install gh            # macOS

Configurar SSH para GitHub

ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519 -N "" -C "tu-dominio.com"
cat ~/.ssh/id_ed25519.pub

Añadir la clave en GitHub → Settings → SSH and GPG keys → New SSH key.

Autenticar GitHub CLI

# Con token personal (PAT):
# 1. Ir a GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
# 2. Crear token con scopes: repo, read:org
# 3. Pegarlo:
echo "ghp_tu_token_aqui" | gh auth login --with-token

---

2. Inicializar Git y subir a GitHub

# Entrar en la carpeta del proyecto
cd /ruta/a/tu-web

# Inicializar repo
git init
git branch -m main

# Añadir y commitear
git add -A
git commit -m "Initial commit"

# Crear repo en GitHub y subir el código
gh repo create nombre-del-repo --public --source=. --remote=origin --push

Si el remote ya existe pero está en HTTPS y querés cambiarlo a SSH:

git remote set-url origin git@github.com:TU_USUARIO/nombre-del-repo.git

---

3. Desplegar en Cloudflare Pages

Crear el proyecto en Cloudflare Pages

# Exportar el token (o prefijarlo en cada comando)
export CLOUDFLARE_API_TOKEN="cfut_tu_token_aqui"

# Crear el proyecto
wrangler pages project create nombre-del-proyecto --production-branch=main

Hacer el primer despliegue

wrangler pages deploy . --project-name=nombre-del-proyecto --branch=main

Tras esto, la web estará disponible en https://nombre-del-proyecto.pages.dev.

(Opcional) Crear wrangler.toml

Si querés mantener la configuración en el repo, creá un archivo wrangler.toml:

name = "nombre-del-proyecto"
compatibility_date = "2024-12-01"

---

4. CI/CD automático con GitHub Actions

Cada vez que hagas push a main, GitHub Actions desplegará automáticamente en Cloudflare Pages.

Guardar el token de Cloudflare como secreto en GitHub

gh secret set CLOUDFLARE_API_TOKEN --body "cfut_tu_token_aqui"

Crear el workflow

Crear el archivo .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy . --project-name=nombre-del-proyecto --branch=main

Commitear y pushear:

git add -A
git commit -m "Add GitHub Actions CI/CD for Cloudflare Pages"
git push origin main

---

5. Añadir dominio personalizado

5.1. Añadir el dominio a Cloudflare Pages

curl -s -X POST \
  "https://api.cloudflare.com/client/v4/accounts/TU_ACCOUNT_ID/pages/projects/nombre-del-proyecto/domains" \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"tudominio.com"}'

Para obtener el ACCOUNT_ID:

curl -s https://api.cloudflare.com/client/v4/accounts \
  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"

5.2. Añadir el sitio en Cloudflare Dashboard

1. Ir a https://dash.cloudflare.com → Add site
2. Introducir el dominio, elegir plan Free
3. Cloudflare asignará 2 nameservers (ej: anita.ns.cloudflare.com, matias.ns.cloudflare.com)
4. Copiar los nameservers

5.3. Cambiar nameservers en el registrador del dominio

Ir al panel de control donde se compró el dominio (Hostinger, Namecheap, etc.) y cambiar los nameservers por los de Cloudflare.

5.4. Crear registros DNS

Desde Cloudflare Dashboard → tudominio.com → DNS → Add record, crear:

Tipo	Nombre	Contenido	Proxy
CNAME	@	nombre-del-proyecto.pages.dev	✅ Proxied
CNAME	www	tudominio.com	✅ Proxied

5.5. (Alternativa) Redirigir www al dominio principal

Si el CNAME para www da error porque ya existe otro registro, usar una Redirect Rule:

1. Cloudflare Dashboard → tudominio.com → Rules → Redirect Rules
2. Create Redirect Rule
   • Name: www redirect
   • When: Hostname equals www.tudominio.com
   • Then: Redirect to https://tudominio.com (tipo 301, permanente)

5.6. Esperar propagación

El cambio de nameservers puede tardar de 5 minutos a 48 horas. Se puede verificar con:

# Ver si ya apunta a Cloudflare
dig NS tudominio.com +short

# Ver si el dominio responde
curl -sI https://tudominio.com

Cuando Cloudflare detecte los nuevos nameservers, emitirá automáticamente el certificado SSL y la web estará disponible en https://tudominio.com.

---

6. Resumen de comandos rápidos

Para una web nueva, repetir estos pasos:

# 1. preparar entorno
source ~/.nvm/nvm.sh
nvm use 22
export CLOUDFLARE_API_TOKEN="cfut_tu_token"

# 2. git + github
cd /ruta/a/mi-web
git init && git branch -m main
git add -A && git commit -m "Initial commit"
gh repo create mi-web --public --source=. --remote=origin --push

# 3. cloudflare pages
wrangler pages project create mi-web --production-branch=main
wrangler pages deploy . --project-name=mi-web --branch=main

# 4. github action
gh secret set CLOUDFLARE_API_TOKEN --body "$CLOUDFLARE_API_TOKEN"
mkdir -p .github/workflows
# copiar deploy.yml manualmente
git add -A && git commit -m "Add CI/CD"
git push origin main

# 5. dominio (desde dashboard)
# Cloudflare → Add site → nameservers → registrar → DNS records

---

Nota: El token de Cloudflare (CLOUDFLARE_API_TOKEN) debe tener permisos de Cloudflare Pages (para deploy) y opcionalmente de Zona:Write (para gestionar DNS desde CLI). Si solo se usa para Pages, el template “Edit Cloudflare Workers” es suficiente.