El 7 de octubre de 2026, los primeros resultados para "astro blog" te enseñaban a poner un primer post en pantalla: el tutorial oficial para armar un blog, un curso rápido, una galería de blogs de desarrolladores y un par de primeras experiencias personales.
Un blog de producto que publica todas las semanas necesita algunas piezas más. Necesita un esquema que rechace un post sin descripción, un editor que guarde los posts en Git, un sitemap que los rastreadores puedan leer y un lugar donde los borradores esperen tu aprobación.
Esta guía arma un blog en Astro para un SaaS en seis pasos, con la configuración de cada uno.
Hoy llevo este blog en Next.js, y también armé blogs con Astro y me gustó trabajar con él. Los dos setups comparten la misma capa de contenido, porque seodraft entrega cada post aprobado en content/blog/{locale}/{slug}.mdoc dentro del repositorio.
El último paso muestra cómo llegan los borradores escritos por un agente a un repo de Astro con draft en true, así nada sale publicado hasta que cambiás ese campo. Empezá por la plantilla y sumá una pieza por vez.
- 1. Arrancá desde la plantilla oficial de blog de Astro
- 2. Definí el esquema del post con tus campos de SEO
- 3. Sumá Keystatic para que los posts sigan siendo archivos del repo
- 4. Publicá un sitemap y un feed RSS
- 5. Deployá en Vercel y revisá cada rama
- 6. Dejá que los borradores del agente lleguen marcados como borrador
- Elegí Astro cuando el blog puede vivir como un sitio propio
1. Arrancá desde la plantilla oficial de blog de Astro
La plantilla oficial de blog de Astro te da un blog funcionando, con posts en Markdown y MDX, un feed RSS y un sitemap, con un solo comando.
npm create astro@latest -- --template blog
El astro.config.mjs de la plantilla carga las integraciones de MDX y de sitemap, y su package.json suma @astrojs/rss. Cambiá el valor de site de https://example.com a tu dominio real antes del primer build, porque el sitemap y el feed arman sus URLs a partir de ese valor.
El proyecto es estático por defecto. Cada post se convierte en un archivo HTML en el build, y Astro manda cero JavaScript a la página salvo que un componente lo pida.
2. Definí el esquema del post con tus campos de SEO
El esquema del post vive en src/content.config.ts, y conviene que exija cada campo del que depende tu SEO, así un post al que le falta uno rompe el build.
La plantilla valida un título, una descripción, una fecha de publicación, una fecha de actualización y una imagen principal. Para un blog de producto sumo los campos que terminan en los snippets y en las respuestas de IA: un tldr corto, las FAQs, los tags y una marca de borrador. Lo que va adentro de cada post está en la plantilla de post para blog en ocho partes.
// src/content.config.ts
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';
const blog = defineCollection({
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx,mdoc}' }),
schema: z.object({
title: z.string().max(60),
description: z.string().max(160),
publishedAt: z.coerce.date(),
updatedAt: z.coerce.date().optional(),
tldr: z.string().optional(),
faqs: z.array(z.object({ question: z.string(), answer: z.string() })).default([]),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(true),
}),
});
export const collections = { blog };
Las claves copian el frontmatter que recibe este blog. seodraft mapea su fecha a publishedAt y su fecha de actualización a updatedAt, y escribe title, description, tldr, faqs, tags y draft con su propio nombre. El max(60) del título frena el build el día que alguien escribe un titular de 61 caracteres.
Después filtrá los borradores en cada lugar donde listás o generás rutas de posts:
const posts = await getCollection('blog', ({ data }) => !data.draft);
El esquema pone draft en true por defecto, así un archivo que se olvida el campo queda oculto.
3. Sumá Keystatic para que los posts sigan siendo archivos del repo
Keystatic le da a tu blog en Astro una pantalla de edición mientras cada post sigue siendo un archivo de tu repositorio.
Elijo Keystatic por la simpleza de trabajar git-based. Guardar un post crea un commit, y ese commit lo podés revisar, revertir o abrir como pull request igual que cualquier cambio del producto.
La documentación de Keystatic lo instala con dos comandos:
npx astro add react markdoc npm install @keystatic/core @keystatic/astro
Agregá keystatic() a las integraciones de astro.config.mjs. Después creá keystatic.config.ts en la raíz del proyecto, con una colección de posts cuyo path apunte a la carpeta que carga tu colección de contenido, por ejemplo src/content/blog/*.
Los posts que guardás desde el editor son archivos .mdoc, el formato Markdoc que renderiza la integración de markdoc. Corré npm run dev y abrí /keystatic para ver el editor.
Hay dos límites que conviene conocer antes de adoptarlo. Keystatic corre código del lado del servidor, así que su documentación indica que necesitás un adaptador de Astro para deployarlo, y con almacenamiento local escribe en tu propio disco hasta que lo conectás a GitHub.
4. Publicá un sitemap y un feed RSS
La integración de sitemap y el paquete de RSS les dan a los buscadores y a los lectores una lista de todos los posts, y los dos leen tu valor de site. Cuánto tarda Google después en rastrear un post listado está en cuánto tarda Google en indexar una página nueva.
@astrojs/sitemap genera sitemap-index.xml y sitemap-0.xml en el build. Sumá una línea Sitemap: en robots.txt con la URL completa de sitemap-index.xml para que los rastreadores lo encuentren. Su documentación marca un hueco: no puede listar rutas dinámicas renderizadas bajo demanda, así que mantené prerenderizadas las rutas del blog.
El sitemap lista las páginas que generás, así que filtrar los borradores en getStaticPaths() también los deja afuera del sitemap. Revisá el archivo después de cada deploy. Cuando importamos el sitemap de seodraft el 27 de septiembre de 2026, listaba 57 páginas, 6 de ellas posts del blog, y el verificador de sitemap gratis te da la misma cuenta para tu sitio.
Para el feed, creá src/pages/rss.xml.js y armá sus items desde getCollection('blog') con el mismo filtro de borradores, así un post oculto nunca les llega a los suscriptores.
5. Deployá en Vercel y revisá cada rama
Vercel deploya un blog estático en Astro sin configuración extra y le da a cada rama su propia URL de preview.
Subí el repo, importalo en Vercel y detecta Astro por su cuenta. Desde ahí, cada push a una rama crea un preview deployment, y cada cambio en main pasa a ser un deploy de producción.
Mis blogs tienen deploy en Vercel, y en la preview leo cada post con sus estilos e imágenes reales antes de mergearlo. Las rutas de administración de Keystatic necesitan el adaptador de Vercel, que instala npx astro add vercel, mientras las páginas del blog siguen prerenderizadas.
6. Dejá que los borradores del agente lleguen marcados como borrador
Un agente de IA puede escribir en tu blog en Astro con tranquilidad cuando cada post que entrega llega como un archivo con draft: true.
Este blog funciona así. Mi agente escribe a través de seodraft, las reglas revisan el borrador, y cuando lo apruebo seodraft hace commit de content/blog/es/{slug}.mdoc con draft: true en el repositorio. El esquema del paso 2 lo oculta del sitio publicado, y la preview de Vercel lo muestra.
Antes de que un archivo llegue al repo, el borrador pasa por un orden fijo. El proceso actual guarda el brief antes del cuerpo y requiere que cada evidencia del brief llegue al artículo.
Publicar sigue siendo un paso humano. Cuando probé seodraft por primera vez con una cuenta demo, el 17 de septiembre de 2026, la corrida terminó con el post marcado como listo. El flujo se detuvo en READY: no llamé a la entrega ni publiqué el artículo.
Para que salga en vivo, cambiás draft a false y mergeás. La página de entrega al CMS lista las opciones de ruta y de frontmatter que seodraft puede escribir.
Elegí Astro cuando el blog puede vivir como un sitio propio
Elegí Astro cuando el blog puede vivir como un sitio de contenido propio, y elegí Next.js cuando tiene que compartir el layout y los componentes de la app del producto.
Armé blogs con los dos, y este corre en Next.js en seodraft.app/es/blog, en el mismo dominio que el producto. La versión en Next.js de este setup, con las mismas piezas de Keystatic y Vercel, está en las herramientas que uso para el blog de un producto. Qué agentes pueden hacer este trabajo a través de seodraft está en los agentes compatibles.
Si vas con Astro, hacé primero el paso 2, antes de elegir un tema visual. El esquema decide qué tiene que llevar cada post que venga.
Cuando quieras que los briefs, las reglas y la entrega de borradores queden resueltos, probá seodraft con tu propio agente (Claude, Cursor, o ChatGPT en Business, Enterprise o Edu): tu agente escribe, las reglas deciden y vos aprobás.
