Cómo crear posts en nuestro blog

Esta guía te mostrará el proceso completo para crear y editar artículos en nuestro blog usando MDX, un formato que combina Markdown con componentes de React.

Estructura de un post

Cada post debe comenzar con un frontmatter, que es un bloque de metadatos en formato YAML delimitado por tres guiones (---). Este es un ejemplo:

---
title: Cómo crear posts en nuestro blog
description: Guía completa para crear y editar artículos en nuestro blog usando MDX.
image: /_static/blog/blog-post-1.jpg
date: "2023-06-01"
authors:
  - beatscode
categories:
  - education
published: true
related:
  - deploying-next-apps
  - server-client-components
---

Campos del frontmatter

• title: El título del artículo (obligatorio)
• description: Breve descripción del contenido (obligatorio)
• image: Ruta a la imagen principal del artículo (obligatorio)
• date: Fecha de publicación en formato YYYY-MM-DD (obligatorio)
• authors: Lista de nombres de usuario de los autores (obligatorio)
• categories: Categorías a las que pertenece el artículo (obligatorio)
  • Opciones disponibles: education, news
• published: Booleano que indica si el post está listo para ser publicado (por defecto: true)
• related: Lista de slugs de artículos relacionados (opcional)

Formato del contenido

El contenido se escribe en Markdown con soporte para componentes de React (MDX). Aquí hay algunos ejemplos:

Encabezados

Puedes usar #, ##, ###, etc. para crear diferentes niveles de encabezados:

# Título principal (H1)
## Subtítulo (H2)
### Sección (H3)

Formato de texto

• Texto en negrita: **negrita**
• Texto en cursiva: *cursiva*
• Texto tachado: ~~tachado~~

Listas

Lista sin orden:

- Elemento 1
- Elemento 2
  - Subelemento 2.1
  - Subelemento 2.2

Lista ordenada:

1. Primer paso
2. Segundo paso
3. Tercer paso

Enlaces e imágenes

Enlaces:

[Texto visible](https://ejemplo.com)

Imágenes:

![Texto alternativo](ruta/a/la/imagen.jpg)

Para imágenes con características avanzadas, usa el componente Image:

<Image
  src="/_static/blog/ejemplo.jpg"
  width="718"
  height="404"
  alt="Descripción de la imagen"
/>

Bloques de código

Puedes incluir bloques de código con resaltado de sintaxis:

// Esto es un ejemplo de código JavaScript
function saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}

Componentes especiales

Nuestro blog incluye varios componentes especiales que puedes usar en tus artículos:

Callout

Para destacar información importante:

<Callout type="info">
  Esta es información importante que quiero destacar.
</Callout>

Tipos disponibles: info, warning, error, success

Dónde colocar los archivos

1. Crea un nuevo archivo .mdx en la carpeta content/blog/
2. El nombre del archivo se convertirá en la URL del post (usa kebab-case)
3. Las imágenes deben colocarse en public/_static/blog/

Vista previa y publicación

1. Durante el desarrollo, puedes ver una vista previa de tu post ejecutando npm run dev
2. Para publicar, asegúrate de que el campo published esté establecido en true
3. Haz commit y push de tus cambios al repositorio

Consejos para escribir posts efectivos

• Usa títulos descriptivos que incluyan palabras clave relevantes
• Divide el contenido en secciones con encabezados claros
• Incluye imágenes relevantes para hacer el contenido más atractivo
• Utiliza listas y bloques de código para mejorar la legibilidad
• Mantén los párrafos cortos y concisos
• Enlaza a otros posts relacionados cuando sea apropiado

¡Ahora estás listo para crear excelentes artículos para nuestro blog!