DEV Community

Cover image for ¿Cómo usar la api de Dev.to para escribir un post?
Matías Hernández Arellano
Matías Hernández Arellano

Posted on • Originally published at matiashernandez.dev

¿Cómo usar la api de Dev.to para escribir un post?

Uno de los proceso que realizo cuando escribo un post o artículo es la republicación de ellos en distintas comunidades como por ejemplo dev.to. Esto ayuda a llegar a más lectores (siempre y cuando mantengas la url canonica apuntando al sitio original).

Pero esto puede ser bastante tedioso, escribir en tu sitio, copiar, editar el contenido y pegar en el siguiente editor, pero, como buen desarrollador, siempre busco formas de automatizar el proceso :D

Mi actual flujo de trabajo a la hora de crear un post/artículo es:

  1. Escribir el contenido en Sanity y publicar.
  2. Esto envía un webhook a una función "serverless" de mi sitio web en netlify.
  3. Esta función convierte el contenido a markdown.
  4. Se crea un archivo en mi repositorio en github (me gusta tener mi contenido en archivos markdown).
  5. Espera por el build en netlify
  6. Usa la api de dev.to para escribir el mismo contenido.
  7. Lo mismo se hace para hashnode y medium

¿Cómo utilizar la api de Dev.to?

Dev. to ( y los otros servicios nombrados) proveed de una API REST que permite publicar contenido, el proceso es simple:

export default async function writeToDevTo(post) {
    const article = {
        title: post.title,
        body_markdown: post.content,
        published: true,
        main_image: post.image,
        canonical_url: post.canonicalUrl
        description: post.description,
        tags: 'javascript, spanish, webdev'
    };

    try {
        const res = await fetch('https://dev.to/api/articles', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'api-key': import.meta.env.VITE_DEVTO_TOKEN
            },
            body: JSON.stringify({ article })
        });
        return {
            status: res.status,
            url: res.url
        };
    } catch (e) {
        console.error(e);
        return {
            status: 500,
            error: e
        };
    }
}
Enter fullscreen mode Exit fullscreen mode

Sólo requieres de una pequeña función que:

  • Crea un objeto con el contenido del post, indicando los atributos requeridos
  • Realiza una llamada POST al endpoint https://dev.to/api/articles
  • Usa el token de autorización
  • Retorna 200 si todo fue bien o 500 en caso contrario

Para obtener tu ApiKey debes, en tu cuenta de dev.to ingresar en Settings -> Extensions y hacer scroll hasta el final, has click en Generate API Key y ya tienes lo necesario.

undefined

Footer Social Card.jpg
✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Top comments (1)

Collapse
 
matiasfha profile image
Matías Hernández Arellano

Nice.
Personalmente me gusta (para este caso) el uso de async/await.