Mi Primer Post: Cómo No Olvidar Mi Propia Configuración de CMS

Bienvenido a Mi Blog (aka disco duro externo de mi cerebro)

Este es mi primer “artículo” en este blog estático casi dinámico, aunque llamarlo blog es ser generoso. Ahora mismo es más como un post-it digital que finge ser un CMS.

"El mejor momento para plantar un árbol fue hace 20 años. El segundo mejor momento es ahora."

— Algún sabio chino

¿Y cuál es el punto de este post?

En esta profundamente importante guía, te voy a mostrar:

Cómo uso frontmatter para mantener una buena estructura
La lista completa de elementos de MDX que me permito usar
Por qué el nombre de archivo es mi forma de expresar
Cómo evito escribir en español (controversial)
Y por qué todo esto es básicamente un parche temporal hasta que termine mi CMS hecho desde cero (todavía a unos cuantos años luz)

Spoiler: Este blog es 80% para mí, 20% para ti. Solo quiero evitar olvidar cómo funciona mi propio sistema el próximo mes.

Frontmatter: Donde los metadatos se vuelven terapia

Cada archivo .md empieza con YAML frontmatter. Es como el DNI de tu artículo, excepto que aquí incluye si es “destacado” o “tristemente ignorado”.

code

---
title: "Título de tu artículo"
description: "Descripción que aparece en la lista y en SEO"
author: "Tu nombre"
date: "2025-08-13"
publishDate: "2025-08-13"
readTime: "X min read"
category: "Categoría"
tags: ["tag1", "tag2", "tag3"]
featured: true  # Si quieres que sea artículo destacado
image: "/images/blog/imagen.jpg"  # Opcional
---

Obtengo los archivos usando articles.ts, que hace un fetch de todo en src/content/articles. Muy simple

code

export function getAllArticles() {
    const files = fs.readdirSync(articlesDir).filter(f => f.endsWith(".md"));

    return files.map((filename) => {
        const filePath = path.join(articlesDir, filename);
        const fileContents = fs.readFileSync(filePath, "utf8");

        const { data, content } = matter(fileContents);

        const match = filename.replace(".md", "").match(/^(.*)-(es|en)$/);
        if (!match) return null;

        const [, slug, locale] = match;

        return {
            slug,
            locale,
            content,
            title: data.title ?? "",
            description: data.description ?? "",
            author: data.author ?? "",
            date: data.date ?? "",
            publishDate: data.publishDate ?? "",
            readTime: data.readTime ?? "",
            category: data.category ?? "",
            tags: data.tags ?? [],
            featured: data.featured ?? false,
            image: data.image ?? "",
        } satisfies Article;
    }).filter(Boolean);
}

Elementos de MDX: Porque HTML es para masoquistas (aunque probablemente termine migrando)

Títulos y Subtítulos

Usa de # a ###. No bajes más a menos que estés escribiendo una tesis.

code

# Título Principal (H1)
## Subtítulo (H2)  
### Subtítulo Menor (H3)

Texto y énfasis

Negrita con **texto**
Cursiva con *texto*
~~Tachado~~ si te arrepientes de algo.

Listas

Lista con viñetas:

Primer elemento
Segundo elemento
Tercer elemento con más texto

Lista numerada (escribiendo esto acabo de darme cuenta que… no funciona):

Primer paso
Segundo paso
Tercer paso (beneficio)

Citas y Quotes

Para sabiduría falsa o ideas robadas:

"Programar no es sobre lo que sabes. Es sobre lo que eres capaz de descubrir."

— Reflexión personal, mientras depuraba

Código

Código en línea: helloworld("print")

o bloques de código:

code

function greet(name) {
    console.log(`Hello, ${name}!`);
    return `Welcome to the blog, ${name}`;
}

// Usage example
const message = greet("Rodrigo");
console.log(message);

code

def create_article(title, category):
    """
    Function to create a new article
    """
    article = {
        "title": title,
        "category": category,
        "date": datetime.now(),
        "author": "me"
    }
    return article

# Create an example article
my_article = create_article("My First Post", "Tutorial")
print(f"Article created: {my_article['title']}")

Tablas

Para cuando necesitas sentirte organizado:

Elemento	Sintaxis	Ejemplo
Título	`# Título`	# Mi Título
Negrita	`texto`	importante
Cursiva	`texto`	énfasis
Código	`código`	`console.log()`
Lista	`- elemento`	- elemento

Enlaces e Imágenes

Puedes crear enlaces a otras páginas o incluir imágenes (cuando las tengas):

code

![Descripción de la imagen](/images/blog/ejemplo.jpg)

Organización de archivos: Mi TOC en exhibición

Todos los artículos viven en src/content/articles. Siguiendo esta convención de nombres:

mi-primer-articulo-en.md → Inglés
mi-primer-articulo-es.md → Español

Pero aquí está el giro: ya no escribo nada en español.
¿Por qué? Porque automatizé la traducción con Gemini y… necesito mejorar mi inglés.
¿Es perfecto? No.
¿Podría traducir accidentalmente “Amo el ceviche” como “Odio el sushi”? Probablemente.

Así que si algo suena raro o culturalmente ofensivo, culpa a la IA, no a mí.
Este blog corre con MDX, TypeScript y una dosis saludable de negación plausible.

Consejos para no apestar blogueando

Para mi futuro yo:
¿Vas a olvidar cómo bloguear en cuánto? ... tres semanas?
Y como probablemente vas a empezar a escribir ese paper o artículo científico que llevas postergando,
esta guía también es para que no termine sonando como una mala entrada de Wikipedia.

1. Estructura como desarrollador, escribe como humano

Empieza con un gancho. No clickbait, y tampoco un hook de React.
Los subtítulos son breadcrumbs (para secciones de blog y para subsecciones en papers).
Termina con algo: una conclusión, un chiste o ambos. Te gustan ambos. (0 chistes en papers).
Agrega una llamada a la acción. En blogs, es “lee más”. En papers, es “se requiere más investigación” (movida académica clásica).

2. SEO y legibilidad: No tortures a futuros lectores (o revisores)

Nota para el Futuro Yo: Aún no has arreglado los metadatos. Ninguno de tus artículos está realmente optimizado para SEO. Hazlo antes de fingir que te importa el factor de impacto.
¿Palabras clave en título/descripción? Sí, funciona también para Google Scholar.
¿Párrafos de más de 4 líneas? Mal para lectores. ¿Párrafos densos sin figuras o tablas? Mal para revisores.
Rompe la monotonía con listas, snippets de código, diagramas o citas: la gente necesita descansos mentales.
Optimiza tu descripción para búsqueda y citas (Google Scholar, ResearchGate o la plataforma que exista en el futuro).

3. Categorías: Haz que tengan sentido

Esto funcionó la última vez:

Tutorial – “Haz esto y debería funcionar… probablemente.”
Reflexiones – “Cosas que aprendí después de prenderle fuego a todo.”
Tecnología – “Cosa cool que acabo de descubrir y medio entiendo.”
Proyectos – “He aquí mi creación (con sus 17 bugs).”
Aprendizaje – “Notas para el Futuro Yo cuando inevitablemente olvide esto otra vez.”
Notas de investigación – “Datos, experimentos y esa gráfica que espero nadie verifique dos veces.”

Eso es todo.
Sigue esto y tal vez, solo tal vez, el Futuro Tú le agradezca al Tú del pasado en lugar de dejar mensajes pasivo-agresivos en commits…
o peor, leer tu propio paper publicado y preguntarte quién escribió esa tontería.

¿Qué sigue?

Ahora que viste mi esqueleto digital, puedes:

Crear tu primer artículo real (no solo una plantilla sobre plantillas)
Jugar con Markdown como si fuera 2004 y todos estuviéramos emocionados por ello
Encontrar tu voz (sin comentarios)
Planear una serie o improvisar, sin presión

Este artículo existe únicamente para que no olvide cómo funciona mi propio blog antes de migrar todo a mi CMS personalizado. De nada.

Y si estás pensando “¿Por qué no usar simplemente WordPress?”
Porque… ¿dónde estaría la diversión en eso? Necesito al menos 3 capas innecesarias de abstracción.

¿Te resultó útil?
Compártelo, copia mi sistema, etc.
¿Tienes un tema que quieras que cubra? Háblame.

Y atentos, porque lo que viene es una serie de inmersiones profundas en cómo construí mi propio CMS desde cero (sí, estoy asumiendo que lo termine), las mejoras borderline obsesivas a mi renderizador Markdown personalizado, la documentación pulida de unas cuantas librerías que he estado cocinando, la historia interna de mi proyecto de IA Lisa AI, y, por supuesto, la vez que “accidentalmente” hackeé mi universidad y de alguna manera me contrataron por ello. Va a estar divertido.

Bienvenido a Mi Blog (aka disco duro externo de mi cerebro)

¿Y cuál es el punto de este post?

Frontmatter: Donde los metadatos se vuelven terapia

Elementos de MDX: Porque HTML es para masoquistas (aunque probablemente termine migrando)

Títulos y Subtítulos

Texto y énfasis

Listas

Lista con viñetas:

Lista numerada (escribiendo esto acabo de darme cuenta que… no funciona):

Citas y Quotes

Código

Tablas

Enlaces e Imágenes

Organización de archivos: Mi TOC en exhibición

Consejos para no apestar blogueando

1. Estructura como desarrollador, escribe como humano

2. SEO y legibilidad: No tortures a futuros lectores (o revisores)

3. Categorías: Haz que tengan sentido

Eso es todo. Sigue esto y tal vez, solo tal vez, el Futuro Tú le agradezca al Tú del pasado en lugar de dejar mensajes pasivo-agresivos en commits… o peor, leer tu propio paper publicado y preguntarte quién escribió esa tontería.

¿Qué sigue?

Eso es todo.
Sigue esto y tal vez, solo tal vez, el Futuro Tú le agradezca al Tú del pasado en lugar de dejar mensajes pasivo-agresivos en commits…
o peor, leer tu propio paper publicado y preguntarte quién escribió esa tontería.