Follow Stelut on X (Twitter) Go to Stelut's GitHub repo Connect on LinkedIn Suscribirse al RSS

Cómo construí un blog bilingüe con Astro


Crear contenido en más de un idioma no tiene por qué ser complicado. En este post explico cómo monté un blog bilingüe (inglés/español) usando Content Collections de Astro, una estructura de carpetas sencilla y un par de rutas dinámicas.

¿Por qué Astro para un blog bilingüe?

  • Ligero por defecto: HTML estático cuando se puede, islas cuando hace falta.
  • Soporte nativo para Markdown/MDX y frontmatter tipado con Content Collections.
  • Enrutado por archivos que facilita los prefijos de idioma.

Estructura de carpetas

Mantengo las variantes por idioma juntas en src/content/blog y las enruto con páginas separadas por idioma:

src/
  content/
    blog/
      en/
        first-post.md
        second-post.md
        third-post.md
      es/
        primer-post.md
        segundo-post.md
        tercer-post.md
  pages/
    en/
      blog/
        [...slug].astro
        index.astro
    es/
      blog/
        [...slug].astro
        index.astro

Así quedan URLs limpias (/en/blog/... y /es/blog/...) y cada idioma tiene su propia lista y detalle.

Esquema de Content Collections

Las Content Collections de Astro me dan frontmatter tipado y consultas sencillas. La colección define un esquema mínimo con title, description, pubDate, updatedDate opcional y heroImage opcional.

El frontmatter de cada post sigue la misma forma en ambos idiomas, así las listas y los feeds funcionan de forma consistente.

Escribir posts (lo que completo)

Cada post empieza con frontmatter que cumple el esquema:

---
title: "Mi título"
description: "Resumen en una frase"
pubDate: "Aug 30 2025"
heroImage: "/blog-placeholder-1.jpg"
---

Luego, Markdown estándar. Suelo incluir:

  • Una breve introducción con el objetivo del lector.
  • Un ejemplo concreto o fragmento de código.
  • Un cierre con próximos pasos o enlaces.

Rutas y renderizado

Las rutas por idioma (por ejemplo, src/pages/en/blog/[...slug].astro) leen la colección y renderizan la entrada correspondiente según la ruta del archivo. Las páginas de listado (/en/blog y /es/blog) consultan la misma colección pero filtrando por carpeta de idioma.

Como el frontmatter es tipado, obtengo errores en build si olvido un campo requerido o formateo mal una fecha—muy útil para el mantenimiento.

Extras: MDX y componentes

Cuando un post necesita interacción o componentes estilizados, puedo usar MDX o componentes de Astro. Así el valor por defecto sigue simple y puedo escalar caso por caso.

Nota de despliegue

Este sitio se despliega en Cloudflare Workers. El adaptador de Astro genera un bundle estático+edge, manteniendo un rendimiento alto con poca configuración.

Cierre

Ese es todo el montaje: dos carpetas por idioma, un esquema compartido y rutas separadas por idioma. Es fácil de mantener, amigable para SEO y rápido. Si vas a empezar un blog nuevo, te recomiendo este enfoque, especialmente si escribirás en más de un idioma.