DEV Community

Cover image for Usar Dev.to como un CMS Headless para tu blog
Joaquin Sáez
Joaquin Sáez

Posted on

Usar Dev.to como un CMS Headless para tu blog

#api #tutorial #webdev

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..."
//   },
//   ...
// ]
Enter fullscreen mode Exit fullscreen mode

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;
}

// Aquí recibes una propiedad clave:
// post.body_html  <-- Esto es tu artículo ya convertido a HTML
// post.body_markdown <-- Esto es el crudo por si quieres procesarlo tú
Enter fullscreen mode Exit fullscreen mode

3. Cómo renderizar el contenido (El truco)

Dev.to es amable y te devuelve el campo body_html con el Markdown ya convertido a HTML y con estilos básicos de resaltado de sintaxis para código.

  • En React / Next.js:
    Tienes que usar dangerouslySetInnerHTML para inyectar ese HTML.

    // Ejemplo en un componente de página de Next.js
<div className="prose main-article">
  <h1>{post.title}</h1>
  <img src={post.cover_image} alt={post.title} />

  {/* Aquí inyectas el contenido que viene de Dev.to */}
  <div dangerouslySetInnerHTML={{ __html: post.body_html }} />
</div>

  • Estilos (CSS):
    El HTML que te da Dev.to es "limpio" (etiquetas <h2>, <p>, <pre>). Para que se vea bonito sin escribir mucho CSS, te recomiendo usar la librería Tailwind Typography (prose). Si le pones la clase prose al contenedor padre, el blog se verá profesional automáticamente.

4. Ventajas de esta estrategia

  1. Imágenes gratis: Subes las imágenes al editor de Dev.to y ellos las alojan en su CDN. No gastas ancho de banda ni espacio en tu servidor.
  2. Backup automático: Si tu web personal se cae o borras algo por error, el contenido sigue seguro en Dev.to.
  3. 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: 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.

Top comments (0)