Artículo de demostración: este texto y sus imágenes sirven para enseñar cómo queda un artículo con portada y capturas. Sustituye el contenido por tu experiencia antes de publicarlo como artículo definitivo.

Cuando una web personal empieza a crecer, es fácil añadir herramientas antes de saber si realmente hacen falta. Para este proyecto buscaba algo más sencillo: una web rápida, un sistema cómodo para escribir y una estructura que pudiera mantener sin dedicarle más tiempo a la infraestructura que al contenido.

Astro encaja con esa idea porque permite generar páginas estáticas y reservar JavaScript para las partes que necesitan interacción.

El flujo de trabajo

La idea general es mantener el contenido separado de la presentación. Los artículos viven en Markdown o MDX; Astro valida sus datos, genera las rutas y construye las páginas que después sirve el hosting.

Diagrama del flujo desde Markdown hasta HTML estático

Este enfoque tiene algunas ventajas prácticas:

  • El contenido se puede revisar como cualquier otro archivo del repositorio.
  • Los cambios quedan registrados en Git.
  • Las páginas no necesitan consultar una base de datos para mostrar un artículo.
  • El JavaScript se limita a las funciones interactivas, como el buscador o el visor de imágenes.

Una estructura fácil de mantener

En lugar de mezclar artículos, componentes y páginas, cada parte tiene una responsabilidad concreta. Esta es una estructura simplificada de ejemplo:

Estructura de carpetas de un proyecto Astro

Los artículos se guardan en src/content/blog/. Las imágenes públicas se organizan por artículo en public/images/blog/<slug>/, de modo que localizar una portada o una captura no requiere buscar entre recursos de toda la web.

Colecciones de contenido tipadas

Las colecciones permiten validar los campos de cada artículo. Por ejemplo, un esquema puede exigir título, descripción, fecha, categoría y etiquetas, y permitir una portada opcional.

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string().min(1),
    description: z.string().min(1),
    publishedAt: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

Si falta un dato obligatorio o tiene un formato incorrecto, la validación lo detecta durante el desarrollo o la compilación, antes de publicar el sitio.

Qué conviene mantener simple

No todas las páginas necesitan una aplicación completa. Un blog puede tener una navegación clara, un buscador, filtros y un visor de imágenes sin cargar un framework de interfaz en cada ruta.

La decisión importante no es utilizar la tecnología más novedosa, sino escoger la que resuelve el problema actual y deja margen para crecer sin complicaciones.

Resumen

Astro es una buena opción para una web centrada en contenido: genera páginas estáticas, trabaja bien con Markdown y permite añadir interactividad de forma selectiva. Para un blog personal, ese equilibrio suele ser más útil que una arquitectura sobredimensionada.

← Volver al blog