Usar Dev.to como un CMS Headless para tu blog

Source: Dev.to

Usar Dev.to como un CMS Headless para tu blog personal es una de las estrategias más inteligentes y económicas que existen. Escribes en un editor cómodo (Dev.to) y tu web personal simplemente “lee” lo que escribes y lo muestra con tu propio diseño.

Aquí tienes la guía paso a paso para implementarlo.

1. Los Endpoints (Las URLs que necesitas)

La API de Dev.to es pública para leer artículos. No necesitas autenticación (API Key) para mostrar tus artículos públicos, lo cual lo hace muy fácil.

Solo necesitas estas dos URLs:

Para obtener la lista de tus posts:

https://dev.to/api/articles?username=TU_NOMBRE_DE_USUARIO

Para obtener un post específico (el contenido completo):

https://dev.to/api/articles/TU_NOMBRE_DE_USUARIO/SLUG_DEL_POST

2. Implementación en Código (Ejemplo General)

Imagina que estás usando JavaScript (puede ser React, Next.js, Vue, Astro, o Vanilla JS). La lógica es siempre la misma.

Paso A: Obtener la lista de entradas (Para tu página “Blog”)

Esto te devolverá un array (lista) con tus últimos 30 artículos.

const username = 'tu_usuario_devto'; // Reemplaza esto

async function getMyPosts() {
  const response = await fetch(`https://dev.to/api/articles?username=${username}`);
  const posts = await response.json();
  return posts;
}

// Lo que recibes (simplificado):
// [
//   {
//     "id": 12345,
//     "title": "Mi primer post",
//     "slug": "mi-primer-post-xy2",
//     "description": "Resumen del post...",
//     "cover_image": "https://...",
//     "tag_list": ["javascript", "webdev"],
//     "published_at": "2024-05-10T..."
//   },
//   ...
// ]

Nota: Este endpoint no suele devolver el contenido completo del artículo (body_html), solo el resumen. Sirve para crear las “tarjetas” de tu blog.

Paso B: Obtener el contenido de un post (Para la página del artículo)

Cuando el usuario hace clic en un artículo, usas el slug para pedir el contenido entero.

async function getSinglePost(slug) {
  const username = 'tu_usuario_devto';
  const response = await fetch(`https://dev.to/api/articles/${username}/${slug}`);
  const post = await response.json();
  return post;
}

Uso del resultado

// Ejemplo en React / Astro
const post = await getSinglePost(slug);

// Título del artículo
<h1>{post.title}</h1>

// Inyectas el contenido que viene de Dev.to
<div className="prose" dangerouslySetInnerHTML={{ __html: post.body_html }} />

Estilos (CSS)

El HTML que devuelve Dev.to es “limpio” (<p>, <h2>, <ul>…). Para que se vea bonito sin escribir mucho CSS, puedes usar la librería Tailwind Typography (prose). Basta con añadir la clase prose al contenedor padre y el blog tendrá un aspecto profesional automáticamente.

4. Ventajas de esta estrategia

• Imágenes gratis: Subes las imágenes al editor de Dev.to y ellas se alojan en su CDN. No gastas ancho de banda ni espacio en tu servidor.
• Backup automático: Si tu web personal se cae o borras algo por error, el contenido sigue seguro en Dev.to.
• Doble tráfico:
  • La gente te lee en tu web personal.
  • La gente te lee en Dev.to (la red social).

5. El consejo “Pro” para SEO (Canonical URL)

Si quieres que Google sepa que TU sitio web es el original y Dev.to es la copia (para que tu web posicione mejor), haz esto:

1. Publica el artículo en tu web usando la API (como vimos arriba). Imagina que la URL queda: https://misitio.com/blog/mi-post.
2. Ve a Dev.to, edita el post.
3. En la configuración del post, busca el campo “Canonical URL”.
4. Pega ahí https://misitio.com/blog/mi-post.

¡Listo! Tienes un blog gratis, headless, con hosting de imágenes incluido y con una comunidad detrás.