Volver al Blog

Cómo Usamos Sutram para Impulsar Nuestro Propio Sitio Web

By Sergio Vieira Greve
Cómo Usamos Sutram para Impulsar Nuestro Propio Sitio Web

Dogfooding en su máxima expresión: Sutram sirve su propio blog y documentación en seis idiomas


La premisa

Hay un dicho en el software: si no usarías tu propio producto, ¿por qué debería hacerlo alguien más? En Sutram, nos lo tomamos en serio. Nuestro sitio de marketing — el que estás leyendo ahora mismo — funciona completamente sobre la infraestructura de contenido de Sutram.

Cada publicación del blog, cada página de documentación, cada pieza de contenido que ves aquí está almacenada, organizada y servida desde un proyecto de Sutram. Esto no es una demostración. Es producción.

La arquitectura

El sitio está construido con Astro, un generador de sitios estáticos moderno. En tiempo de compilación, Astro llama a la API REST de Sutram para obtener todo el contenido, lo renderiza en HTML estático y lo despliega en Netlify. Sin dependencias en tiempo de ejecución, sin consultas a base de datos al cargar la página — solo páginas rápidas y preconstruidas.

El flujo de contenido se ve así:

Sutram Project
  └── /{lang}/Blog/{year}/{post-slug}/
  │     ├── post.md          (cuerpo en markdown)
  │     └── cover.jpg         (imagen de portada, opcional)
  └── /{lang}/Docs/{category}/{doc-slug}/
        └── guide.md          (cuerpo en markdown)

        ↓  Sutram REST API  ↓

Astro (tiempo de compilación)
  → obtener carpetas + tags
  → descargar archivos markdown
  → convertir imágenes de portada a WebP
  → renderizar a HTML estático

        ↓  despliegue  ↓

Netlify (CDN)

Seis idiomas, una estructura

El sitio soporta seis idiomas: inglés, portugués, español, francés, alemán e italiano. En lugar de mantener sistemas de contenido separados o duplicar jerarquías de carpetas, usamos una convención simple: el idioma es la raíz.

/en/Blog/2026/how-we-use-sutram/
/pt/Blog/2026/como-usamos-o-sutram/
/es/Blog/2026/como-usamos-sutram/

Cada idioma tiene su propia carpeta de Blog y Docs en Sutram. El cliente de la API mapea los códigos de idioma a IDs de carpeta y obtiene el contenido correspondiente — sin filtrado por tags, sin lógica de enrutamiento compleja. La ruta de la carpeta es el idioma.

Las cadenas de texto de la interfaz del sitio (navegación, botones, etiquetas) se manejan por separado mediante archivos de traducción JSON, pero todo el contenido sustancial — las publicaciones y documentación que realmente lees — vive en Sutram.

Metadatos como tags

Cada carpeta de contenido en Sutram lleva metadatos como tags — pares clave-valor simples adjuntos a la carpeta misma:

Tag Propósito
title Título visible de la publicación o documento
author Nombre del autor de la publicación
excerpt Descripción corta para listados y SEO
category Categoría del contenido (ej., "Engineering", "Product")
published_at Fecha de publicación (controla visibilidad y ordenamiento)

Esta es una de las funcionalidades principales de Sutram: metadatos estructurados en cualquier carpeta, sin esquemas rígidos. El cliente de la API lee estos tags para construir páginas de listado, filtros de categoría y feeds RSS — todo en tiempo de compilación.

Imágenes de portada con optimización automática

Las publicaciones del blog pueden incluir una imagen de portada como un archivo dentro de la carpeta de la publicación. Durante la compilación, el cliente de Astro:

  1. Detecta el primer archivo de imagen en la carpeta
  2. Lo descarga a través de la API de Sutram
  3. Lo convierte a formato WebP usando sharp
  4. Lo redimensiona a 1200x630 (optimizado para compartir en redes sociales)
  5. Lo guarda en el directorio de salida estático

Esto significa que los autores solo colocan una imagen en la carpeta de Sutram — sin redimensionar manualmente, sin conversión de formato, sin configuración de CDN.

Gestión de contenido con IA y MCP

Aquí es donde se pone interesante. No usamos una interfaz CMS tradicional para escribir y publicar contenido. En su lugar, usamos Claude Code con el Sutram MCP Server.

El flujo de trabajo:

  1. Escribir o traducir una publicación en markdown (a menudo con la ayuda de Claude Code)
  2. Crear la carpeta destino en Sutram vía sutram_create_folder
  3. Configurar los tags de metadatos vía sutram_set_folder_tags
  4. Subir el archivo markdown vía sutram_request_upload + sutram_confirm_upload
  5. Disparar una compilación en Netlify

Todo esto sucede desde la terminal, en una sola sesión de conversación. Sin navegador, sin campos de formulario, sin copiar y pegar. El agente de IA lee el contenido, crea la estructura de carpetas, configura los tags, sube el archivo y el sitio se reconstruye automáticamente.

Esta misma publicación fue escrita, traducida al portugués y publicada en Sutram usando exactamente este flujo de trabajo.

El cliente de la API

El corazón de la integración es un solo archivo TypeScript (sutram.ts) que actúa como puente entre Sutram y Astro. Se encarga de:

  • Descubrimiento de contenido — recorre recursivamente las carpetas de Sutram para encontrar registros de contenido (cualquier carpeta con un tag title)
  • Obtención de markdown — descarga el primer archivo .md de cada carpeta de contenido
  • Procesamiento de imágenes — convierte imágenes de portada a WebP optimizado
  • Datos de prueba como respaldo — devuelve contenido de ejemplo cuando las credenciales de la API no están configuradas (para desarrollo local)

El cliente tiene unas 460 líneas de TypeScript. Sin framework, sin ORM, sin capas de abstracción — solo llamadas fetch a la API de Sutram y sharp para procesamiento de imágenes.

Por qué esto importa

El dogfooding no se trata solo de credibilidad. Nos obliga a experimentar la misma fricción que enfrentan nuestros usuarios. Cada aspereza en la API, cada funcionalidad faltante, cada comportamiento confuso — lo sentimos primero nosotros.

Algunas cosas que descubrimos y mejoramos al usar Sutram para nuestro propio sitio:

  • La detección de contenido basada en tags funciona mejor que las convenciones rígidas de nombres de carpetas
  • El recorrido recursivo de carpetas es esencial para jerarquías de contenido flexibles
  • El MCP Server hace que la gestión de contenido desde la terminal no solo sea posible, sino preferible para equipos técnicos
  • Las carpetas raíz por idioma son más simples que el filtrado de idiomas basado en tags

Los números

Métrica Valor
Idiomas soportados 6 (en, pt, es, fr, de, it)
Tipos de contenido 2 (publicaciones de blog, documentación)
Llamadas a la API por compilación ~20-30
Tiempo de compilación < 30 segundos
JavaScript en tiempo de ejecución 0 (HTML estático)
Interfaz CMS utilizada Ninguna (MCP + terminal)

Conclusión

Usar Sutram para impulsar nuestro propio sitio es la declaración más fuerte que podemos hacer sobre la plataforma. No es un proyecto de juguete ni una prueba de concepto — es el sistema de producción que sirve cada página que ves aquí.

Si tu contenido necesita estructura, tu equipo necesita control y tu flujo de trabajo se beneficia de la automatización — Sutram fue construido exactamente para eso. Y lo demostramos todos los días, empezando por esta misma página.