De todas las lecciones que me llevé construyendo webs, esta es la más valiosa: el contenido y el diseño deben vivir separados. Suena a detalle técnico, pero cambia por completo la forma de trabajar.

El problema que me llevó hasta aquí

En mis primeras webs, cada página era un archivo HTML con su contenido y su estilo pegados. Resultado:

• Para cambiar el color del sitio, editaba archivo por archivo.
• Para añadir un artículo, copiaba el diseño entero.
• Los errores de estilo se repetían en cada página.

Era como escribir un libro donde cada capítulo tiene que reescribir la portada. Absurdo.

La solución

Separar dos mundos:

• Contenido: el texto, las imágenes, las ideas. En este blog, vive en archivos Markdown dentro de src/content/blog/. Solo contenido, sin etiquetas ni estilos.
• Diseño: las plantillas, los colores, la disposición. Vive en los componentes y estilos (los .astro y .css). Solo presentación, sin texto del artículo.

Cuando escribo un artículo nuevo, solo creo el Markdown. El diseño ya está hecho y lo aplica la plantilla automáticamente. Cuando quiero cambiar el tema (como pasó con el estilo cyberpunk), toco el diseño y todos los artículos se actualizan a la vez.

Por qué funciona

• Rápido: publicar contenido es escribir texto, nada más.
• Consistente: todos los artículos se ven igual porque usan la misma plantilla.
• Mantenible: el cambio de diseño se hace una vez, no veinte.
• A prueba de errores: el contenido no puede romper el diseño ni al revés.

Content collections: la cereza

Astro le añade una capa más: las content collections. Define un esquema (título, descripción, fecha) y cada artículo se valida solo. Si me olvido de un campo obligatorio, el build me lo dice antes de publicar. El contenido sigue siendo simple, pero ahora además está controlado.

Si estás empezando

Aunque hagas una web a mano, aplica ya la separación: guarda el texto en un lado y el estilo en otro (aunque sea un archivo CSS separado). Te ahorrarás dolores de cabeza desde el primer proyecto. Es como en el ajedrez: las aperturas bien jugadas te evitan problemas en el medio juego.

Este blog es la prueba viviente: escribo cada día sin tocar el diseño ni una vez. ¿Quieres ver cómo lo monté? El artículo sobre del HTML a Astro lo cuenta con detalle.