Cómo Construí Este Blog con Astro: El Viaje Técnico de un Desarrollador

¿Conoces esa sensación cuando intentas explicarle algo técnico a un amigo y de repente te das cuenta de que lo has estado complicando demasiado? Exactamente eso me pasó cuando decidí construir este blog. Quería algo simple, rápido y fácil de mantener, pero también lo suficientemente flexible para crecer con mis ideas.

Después de probar varios enfoques (y sí, me metí en algunas madrigueras de conejo), llegué a Astro. ¿Y sabes qué? Ha sido una de esas raras experiencias de "simplemente funciona" que te hace preguntarte por qué no lo probaste antes.

Por Qué Elegí Astro Por Encima de Todo lo Demás

Te voy a ser sincero: el panorama de generadores de sitios estáticos es abrumador. Está Gatsby, Next.js, Nuxt, Jekyll, Hugo... la lista sigue y sigue. Cada uno promete ser la solución a todos tus problemas, pero la mayoría viene con su propio conjunto de dolores de cabeza.

Esto es lo que necesitaba:

Rendimiento ultrarrápido (porque la vida es muy corta para sitios web lentos)
Soporte para Markdown (quiero escribir, no pelear con editores)
Cero JavaScript por defecto (mantengamos las cosas ligeras)
Despliegue fácil (un clic estaría genial)
Experiencia de desarrollador que no me haga querer gritar

Astro cumplió con todo. Es como encontrar esa cafetería perfecta – la reconoces cuando la experimentas.

La Magia Detrás de Escena

Estructura de Proyecto Que Realmente Tiene Sentido

Así es como organicé todo:

PersonalProfile/
├── _posts/           # Posts en inglés
├── _posts_es/        # Posts en español  
├── public/
│   └── images/blog/  # Ilustraciones SVG
├── src/
│   ├── components/   # Componentes Astro reutilizables
│   ├── layouts/      # Plantillas de página
│   └── pages/        # Rutas dinámicas
├── astro.config.mjs  # Configuración de Astro
└── package.json      # Dependencias

Simple, limpio e intuitivo. Sin carpetas anidadas raras o convenciones confusas.

El Corazón de Todo: Markdown con Superpoderes

Cada post del blog es simplemente un archivo Markdown con una salsa especial en la parte superior llamada "frontmatter." Piénsalo como metadatos que le dicen a Astro cómo manejar cada post:

---
title: "El Título de Tu Post Genial"
categories: desarrollo_web
tags: ["astro", "markdown", "tutorial"]
date: "2025-06-23"
description: "Una descripción atractiva para SEO y previsualizaciones"
featured_image: "/images/blog/imagen-de-tu-post.svg"
featured_image_alt: "Texto alternativo descriptivo para accesibilidad"
---

# Tu contenido actual empieza aquí...

Este frontmatter es como una tarjeta de presentación para cada post. Le dice a Astro:

De qué trata el post (título y descripción)
Cuándo fue publicado (fecha)
Cómo categorizarlo (categorías y tags)
Qué imagen mostrar (featured_image)
Cómo hacerlo accesible (texto alternativo)

Enrutado Dinámico: El Ingrediente Secreto

Aquí es donde Astro realmente brilla. Creé una ruta dinámica que genera automáticamente páginas para todos mis posts de blog:

// src/pages/blog/[slug].astro
---
import Layout from '../../layouts/Layout.astro';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { marked } from 'marked';

export async function getStaticPaths() {
  const postsDirectory = path.join(process.cwd(), '_posts');
  const filenames = fs.readdirSync(postsDirectory);
  
  return filenames
    .filter(name => name.endsWith('.md'))
    .map(name => ({
      params: { slug: name.replace('.md', '') }
    }));
}

const { slug } = Astro.params;
const postsDirectory = path.join(process.cwd(), '_posts');
const fullPath = path.join(postsDirectory, `${slug}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
const { data: frontmatter, content } = matter(fileContents);
const htmlContent = marked(content);
---

<Layout title={frontmatter.title}>
  <article>
    <h1>{frontmatter.title}</h1>
    <div set:html={htmlContent} />
  </article>
</Layout>

Este único archivo crea páginas individuales para cada archivo Markdown en mi carpeta _posts. Escribe un nuevo post, guárdalo, y ¡boom! – tienes una nueva página con una URL limpia como /blog/mi-post-genial.

Soporte Bilingüe Sin Dolores de Cabeza

Como escribo tanto en inglés como en español, necesitaba una forma limpia de manejar múltiples idiomas. ¿Mi solución? Carpetas separadas y enrutado:

Los posts en inglés van en _posts/
Los posts en español van en _posts_es/
Cada uno tiene su propia ruta dinámica (/blog/[slug].astro y /blog-es/[slug].astro)

Esto mantiene las cosas organizadas y hace fácil mantener ambas versiones sin confundirse.

La Historia del Rendimiento

Una de las cosas que constantemente me asombra de Astro es lo rápido que carga todo. Aquí está el por qué:

Cero JavaScript por Defecto

Astro no envía JavaScript al navegador a menos que explícitamente lo necesites. Tus posts de blog son HTML y CSS puros – lo que significa que cargan instantáneamente y funcionan incluso con JavaScript deshabilitado.

Optimización Inteligente de Assets

Las imágenes se optimizan automáticamente, el CSS se minifica, y los estilos no utilizados se eliminan. Es como tener un entrenador personal de rendimiento que trabaja 24/7.

Generación en Tiempo de Construcción

Todo se pre-construye durante el despliegue. Cuando alguien visita tu sitio, está obteniendo archivos HTML pre-generados – sin delays de renderizado del lado del servidor.

Beneficios del Mundo Real Que He Experimentado

Escribir Es Realmente Placentero

Se acabó el pelear con editores WYSIWYG o flujos de publicación complejos. Escribo en Markdown, hago git push, y el sitio se actualiza automáticamente.

El Mantenimiento Es Mínimo

Sin base de datos que respaldar, sin actualizaciones de seguridad de qué preocuparse, sin servidor que mantener. Todo el sitio son simplemente archivos que se pueden hospedar en cualquier lugar.

La Velocidad de Carga Es Adictiva

Ver esas puntuaciones verdes de Lighthouse nunca pasa de moda. Los sitios rápidos no son solo algo bonito de tener – son esenciales para la experiencia del usuario y SEO.

El Despliegue Es Sin Esfuerzo

Conectado a GitHub, desplegado en Vercel. Push a la rama main, y el sitio se actualiza automáticamente. Es el tipo de flujo de trabajo que te hace preguntarte por qué todo no puede ser así de simple.

Lecciones Aprendidas en el Camino

Empieza Simple, Agrega Complejidad Después

Inicialmente quería agregar comentarios, búsqueda, analytics y una docena de otras características. Empezar solo con el blog y agregar características incrementalmente fue la decisión correcta.

Markdown + Frontmatter Es Poderoso

Esta combinación te da la experiencia de escritura de un editor de texto simple con el poder de un CMS completo. Es como tener tu pastel y comértelo también.

El Rendimiento Importa Más de lo Que Piensas

Un sitio rápido no es solo sobre métricas de vanidad. Afecta todo – experiencia del usuario, rankings de SEO, tasas de conversión, incluso tu propia motivación para mantener el sitio.

La Experiencia del Desarrollador Afecta Todo

Cuando es fácil y placentero agregar contenido, realmente lo haces. Cuando es un dolor, tu blog se convierte en un cementerio digital.

¿Qué Sigue?

Planeo agregar:

Funcionalidad de búsqueda (probablemente con Algolia o una solución simple del lado del cliente)
Estimaciones de tiempo de lectura
Sugerencias de posts relacionados
Feed RSS para suscriptores
Sistema de comentarios (tal vez con Giscus)

La belleza de esta configuración es que puedo agregar cualquiera de estas características sin reconstruir todo desde cero.

¿Quieres Probar Esto Tú Mismo?

Si este enfoque te suena atractivo, así es como empezar:

Instala Astro: npm create astro@latest
Agrega Tailwind (opcional pero recomendado): npx astro add tailwind
Crea tu primer post en una carpeta _posts
Configura enrutado dinámico siguiendo el patrón que mostré arriba
Despliega en Vercel o Netlify con integración de GitHub

Toda la configuración se puede hacer en una tarde, y tendrás un blog que es rápido, mantenible y placentero para trabajar.

Reflexiones Finales

Construir este blog con Astro ha sido uno de esos raros proyectos donde la herramienta simplemente se quita del camino y te deja enfocarte en lo que importa – crear contenido que la gente realmente quiera leer.

Si estás pensando en empezar un blog o migrar desde otra plataforma, consideraría seriamente este enfoque. Es lo suficientemente simple para principiantes pero lo suficientemente poderoso para crecer con tus necesidades.

Y oye, si tienes preguntas sobre la implementación o quieres ver algo específico, escríbeme. Siempre estoy feliz de hablar de desarrollo con compañeros desarrolladores.

¡Feliz programación! 🚀

Todo este blog es open source y está disponible en GitHub en https://github.com/jvillu/PersonalProfile. Siéntete libre de hacer fork, modificarlo, o simplemente curiosear para ver cómo funciona todo junto.