Insights / Artículos técnicos
Cómo añadir comentarios a un blog Astro usando solo Cloudflare
Implementación de comentarios en un blog Astro sin servicio externo: Cloudflare Pages Functions, D1, Turnstile y configuración con Wrangler.
Contenido
Los sitios estáticos son sencillos hasta que necesitan guardar estado. Un sistema de comentarios es un buen ejemplo.
En Acecore no usamos un servicio externo de comentarios. En PR #101 lo resolvimos solo con Cloudflare:
- Astro muestra la UI.
- Cloudflare Pages Functions expone
/api/comments. - Cloudflare D1 guarda los comentarios.
- Cloudflare Turnstile protege el POST.
wrangler.jsoncdefine el bindingCOMMENTS_DB.
La ventaja es que el comentario no queda como una isla de terceros dentro de la página.
Arquitectura
| Capa | Archivo o servicio |
|---|---|
| UI | src/components/BlogComments.astro |
| Inserción en artículo | src/views/BlogPostPage.astro |
| API | functions/api/comments.ts |
| Datos | D1 binding COMMENTS_DB |
| Protección | Cloudflare Turnstile |
| Schema | migrations/0001_create_blog_comments.sql |
La UI lee con GET /api/comments?slug=...&locale=... y publica con POST /api/comments.
La Function valida origin, payload, Turnstile, límites, duplicados y contenido bloqueado antes de insertar.
D1 como almacenamiento
Los comentarios necesitan consultas simples pero relacionales:
- filtrar por
post_slug - ordenar por
created_at - ocultar con
deleted_at - detectar duplicados con
body_hash - limitar por
client_hash
Por eso D1 es más cómodo que un almacén key-value. Además, las consultas usan prepared statements con bind(), evitando concatenar input del usuario en SQL.
Configuración por Wrangler
El binding COMMENTS_DB se define en wrangler.jsonc y apunta a la única base D1 acecore-comments.
Así el nombre del binding se mantiene estable y el dashboard de Cloudflare coincide con el repositorio.
Turnstile en servidor
El widget del navegador no basta. El token se envía a Pages Functions y allí se valida contra Cloudflare Siteverify con TURNSTILE_SECRET_KEY.
También se comprueba el hostname devuelto. Esto es importante para aceptar previews legítimas y rechazar tokens emitidos desde orígenes inesperados.
Controles anti-spam
La primera versión es estricta:
- rechaza URLs
- rechaza emails
- rechaza HTML
- rechaza enlaces Markdown
- rechaza texto repetitivo
- rechaza palabras promocionales
- usa honeypot
También combina límites en memoria con límites persistentes en D1. El identificador del cliente se guarda como hash con salt, no como IP sin procesar.
SEO
Los comentarios se cargan en cliente y la sección usa data-pagefind-ignore. Por tanto, no se indexan como contenido principal.
Para un blog corporativo, esto es razonable: el artículo es contenido revisado; los comentarios son interacción.
Resumen
Un servicio externo puede ser práctico, pero si el sitio ya vive en Cloudflare Pages, una función de comentarios ligera puede vivir enteramente en Cloudflare.
Pages Functions, D1, Turnstile y Wrangler son suficientes para mantener UI, datos, seguridad y entornos bajo el mismo modelo operativo.
Referencias
Cloudflare Comments
Arquitectura de comentarios creada solo con Cloudflare
Astro renderiza la interfaz, Cloudflare Pages Functions actúa como límite de la API y D1 y Turnstile se conectan como componentes de Cloudflare.
Colocar la interfaz en Astro
Situar la lista de comentarios, el formulario de envío y el widget de Turnstile debajo del artículo.
Recibir en una Pages Function
`/api/comments` procesa GET/POST/OPTIONS y se encarga de la validación de entrada y CORS.
Guardar en D1
Usar el binding `COMMENTS_DB` para almacenar comentarios, hash y fecha de creación en D1 compatible con SQLite.
Proteger con Turnstile
Validar el token de Cloudflare Turnstile en el servidor y comprobar la lista permitida de hostname.
Diferencias entre un servicio externo de comentarios y una implementación propia en Cloudflare
Servicio externo de comentarios
- La adopción es rápida, pero la interfaz, el almacenamiento, las condiciones y la velocidad dependen del servicio
- Los scripts e iframes externos pueden afectar fácilmente la carga de los artículos
- La interfaz multilingüe y la coherencia con el diseño del sitio suelen estar limitadas
- El tratamiento, la eliminación y la migración de comentarios dependen de la especificación del servicio
Implementación solo con Cloudflare
- Pages Functions, D1 y Turnstile proporcionan tanto la API como el almacenamiento
- El HTML y CSS de Astro pueden integrarse de forma natural en el diseño del sitio
- La configuración de Wrangler permite alinear el binding de D1 con el nombre de la base de datos en Cloudflare
- El equipo decide las medidas contra spam, la eliminación y el alcance de los datos personales guardados
Decisiones previas a la implementación
- Mantener los comentarios en la arquitectura Cloudflare del sitio, sin confiarlos a un servicio externo
- Usar D1 como almacenamiento y Cloudflare Pages Functions como límite de la API
- Validar siempre los tokens de Turnstile en el servidor
- Rechazar URL, correos, HTML, enlaces Markdown y expresiones promocionales antes del envío
- Alinear el nombre de la base de datos D1 y el binding COMMENTS_DB con la configuración de Cloudflare
Páginas relacionadas
Preguntas frecuentes
¿Por qué no usar un widget externo?
Porque la UI, los datos, la carga de scripts, la moderación y la migración quedan bajo control del servicio. Aquí todo queda dentro del sitio y Cloudflare.
¿D1 basta para comentarios?
Para leer por post_slug, ordenar por created_at, ocultar con deleted_at, limitar por cliente y detectar duplicados, D1 encaja bien.
¿Turnstile en el cliente es suficiente?
No. La Function debe validar el token con Siteverify antes de escribir en D1.