Incluyendo Giscus a nuestro blog con Next.js

Como ya comenté en el post de la migración a NextJS, al ser un blog estático, no hay forma de tener un sistema de comentarios propio. No tenemos una base de datos donde guardarlos, así que tenemos que usar servicios de terceros para poder permitir a los lectores escribir en nuestras entradas.

En mi caso he optado por Giscus, Giscus es un sistema de comentarios que funciona con Github discussions y que permite que los lectores con cuenta de Github dejen comentarios y reacciones en los posts. Si el código del blog está en un repositorio de Github, ¡los comentarios también!

Giscus es gratis, no trackea nada, no tiene anuncios, admite temas personalizados y muchas cosas más. Disqus es otra opción buena, pero en mi caso he preferido tener TODO en Github y no complicarme mucho más. Y no, no es un post patrocinado por Giscus.

Una vez elegido qué sistema de comentarios que vamos a añadir en el blog, vamos a ver punto a punto los pasos que hay que seguir para poder tenerlo disponible en nuestro blog:

• Habilitar las Discussions dentro de Github

  • Dentro del repositorio de Github de nuestro blog, vamos a settings, y hacemos clic en 'Set up discussions'.
  • Hacemos clic en 'Start discussion'.

• Habilitar Giscus

  • Accedemos a la página de Giscus y lo habilitamos para el respositorio en el que tengamos el blog.

• Obtener la API key de nuestro repositorio

  • Para obtener estos datos, podemos usar la API en GraphQL de Github. Es tan sencillo como hacer una consulta con el siguiente JSON. (Es necesario sustituir los datos de owner y name.)

  query { 
    repository(owner: "owner", name:"nombre del repositorio"){
      id
      discussionCategories(first:10) {
        edges {
          node {
            id
            name
          }
        }
      }
    }
  }
  

  La respuesta que recibiremos será un listado 'discussions' que posee el repositorio que hemos consultado. Necesitamos algunos de esos IDs para ponerlos en nuestro proyecto.

• Instalamos el paquete Giscus en nuestro blog npm i @giscus/react

• Importamos Giscus al proyecto y lo añadimos como componente (hay que rellenar los campos con vuestros valores)

  import { Giscus } from "@giscus/react";
  
  export default function Comment() {
    return (
      <Giscus
        repo="usuario/repositorio"
        repoId="id del repositorio"
        category="General"
        categoryId="id de la categoria"
        mapping="pathname"
        reactionsEnabled="0"
        emitMetadata="0"
        theme="dark"
      />
    );
  }
  

Una vez realizado todos los pasos, ya tendréis disponible Giscus en vuestro blog de NextJS. ¿Cómo queda? Echad un vistazo al final de este post, y comprobadlo.

Y hasta aquí llega mi post sobre cómo añadir un sistema de comentarios externo a nuestro blog. Espero que os haya resultado interesante, si es así, compartidlo. Si tenéis alguna duda, dejad un comentario y contestaré lo antes posible.

Saludos,