Copied to Clipboard
# Crear el archivo "styles.css"
cat > styles.css << 'EOF'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 90%;
}
h1 {
color: #333;
margin-bottom: 1.5rem;
font-size: 2rem;
}
input {
padding: 0.8rem;
width: 100%;
margin-bottom: 1rem;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
input:focus {
outline: none;
border-color: #2575fc;
}
button {
background: #2575fc;
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s;
}
button:hover {
background: #1a68e8;
}
EOF
# Crear el archivo "script.js"
cat > script.js << 'EOF'
// Get DOM elements
const greetingElement = document.getElementById('greeting');
const nameInput = document.getElementById('nameInput');
const updateButton = document.getElementById('updateBtn');
// Update greeting when button is clicked
updateButton.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name) {
greetingElement.textContent = `Hello, ${name}!`;
nameInput.value = ''; // Clear input
} else {
greetingElement.textContent = 'Please enter your name!';
setTimeout(() => {
greetingElement.textContent = 'Hello, World!';
}, 2000);
}
});
// Also update on Enter key press
nameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
updateButton.click();
}
});
EOF
4. Obtener tu Account ID en Cloudflare
- Ve al Cloudflare Dashboard → Account Home
- Click en los 3 puntos la lado del "Account Name"
-
Click en "Copy account ID"
Get Account ID
5. Crear API Token en Cloudflare
- Ve a Cloudflare Dashboard → Manage Account → Account API Tokens
- Click en "Create Token" → "Create Custom Token"
-
Configura los permisos necesarios:
Token name: Terraform Cloudflare Pages
Permissions:
├── Account
│ ├── Cloudflare Pages → Edit
│ └── Account Settings → Read
└── Zone (opcional, solo si usas dominio personalizado)
└── DNS → Edit
Zone Resources:
└── Include → All zones from an account → Your_Account
Create Custom Token
Click en "Continue to summary" → "Create Token"
Copia el token inmediatamente (solo se muestra una vez)
6. Actualizar Configuración
Crear el archivos de variables y asignar los valores
-
cloudflare_account_id obtenido del paso 4
-
cloudflare_api_token obtenido del paso 5
# Crear el archivo "terraform.tfvars"
cat <<EOF > terraform.tfvars
# Cloudflare Account ID
cloudflare_account_id = "your-account-id-here"
# Cloudflare API Token
cloudflare_api_token = "your-token"
# Project name
project_name = "my-website"
# Custom domain (optional, leave blank if not used)
custom_domain = ""
EOF
Uso
Crear la Infraestructura con Terraform
Accede a la carpeta infraestructura
cd infrastructure
Inicializar Terraform
terraform init
Validar la configuración
terraform validate
terraform fmt
Planificar cambios
terraform plan
Aplicar cambios
terraform apply -auto-approve
Esto creará el proyecto de Cloudflare Pages, pero aún no habrá contenido desplegado.
Ver outputs
terraform output
Desplegar el Sitio Web con Wrangler
Una vez que Terraform haya creado el proyecto, despliega tu sitio:
1. Instalar Wrangler (solo la primera vez)
npm install -g wrangler
2. Autenticar con Cloudflare
wrangler login
Esto abrirá un navegador para que autorices Wrangler.
3. Desplegar el sitio
Desde la raíz del proyecto
wrangler pages deploy website --project-name=my-website
Reemplaza my-website con el valor de tu variable project_name.
4. Verificar el despliegue
Visita la URL mostrada en el output de Terraform o en el resultado del comando deploy:
terraform output pages_project_url
pages_project_url = "https://my-website-xxx.pages.dev"
website
Despliegues Futuros
Para actualizar tu sitio después de hacer cambios:
- Edita tus archivos en website/
- Despliega de nuevo
wrangler pages deploy website --project-name=my-website
Reemplaza my-website con el valor de tu variable project_name.
Dominio Personalizado
Para agregar un dominio personalizado:
-
Actualiza terraform.tfvars:
custom_domain = "www.tudominio.com"
Asegúrate de que el dominio esté en Cloudflare
-
Aplica los cambios
terraform apply
Destruir Recursos
terraform destroy -auto-approve
Recursos Adicionales