Cómo Crear un Blog con Next.js y Markdown

AuthorClaudia Valdivieso
Tiempo
~10m
EN ESTA PÁGINA

Por el día internacional de la mujer fui invitada a dar un taller en el evento "Nevertheless, She Codes" organizado por la comunidad de Ruby Perú y Tech Talks. Este artículo es cuasi una transcripción actualizada a la fecha de ese taller. Te dejo el video a continuación por si eres más de videos.

Aquí puedes revisar la charla

¿Por qué bloguear?

Para aprender nuevas cosas

Tener un blog nació de mi, fue por el 2012 más o menos y la verdad es que siempre leía artículos en inglés porque no había mucho contenido en español y recuerdo que los traducía con Google Translate que en ese tiempo no era tan bueno como ahora, y a veces traducía medio raro las cosas, entonces lo que yo hacía luego era escribir con mis propias palabras lo que entendía, y no solo eso traducía artículos sino que si yo experimentaba con alguna tecnología o hacía algo nuevo en el trabajo lo ponía en un blog para compartirlo.

Te puede ayudar a conseguir trabajo

Por ejemplo mi primer trabajo en planilla lo conseguí en parte porque vieron mi blog y a través de él vieron mi potencial para aprender cosas, enseñar y mentorear.

Puede ser tu trabajo

Existen empresas que buscan personas que puedan escribir artículos para sus webs y les pagan por ello. Uno mismo puede crear su propio emprendimiento de ello, como Ali Spittel o Kent C. Dodds. También, bloguear te puede llevar a crear cursos en video ya que al aprender nuevas cosas y tomarte el tiempo de explicarlas vas creciendo en expertise tanto en tus habilidades de programación como en las blandas.

Ahora quizá te hagas esta pregunta

¿Tienes suficiente experiencia para escribir sobre X tema?

La respuesta es ¡Sí!

No importa si estás aprendiendo algo nuevo y no tienes experiencia en tal tema, siempre puedes compartir de tu aprendizaje y la forma en que afrontas las cosas.

Y lo resumiría así:

Bloguea para...

  • Para escribir el post que te habría ayudado en el pasado. Al que puedes regresar a revisar en el futuro.
  • Para reforzar y estructurar tu aprendizaje. Probando así que puedes mejorar tus habilidades.
  • Para establecerte como un experto, para el futuro de tu carrera. Mucha gente piensa que eres un experto por escribir algo y no, pero quizás sí, eso depende de cada uno.
  • Para hacer amigos y enseñar. Sí, tener un blog te permite crecer en comunidad, tal y como lo estamos haciendo ahora.
⚠️

Puedes ser tan serio o tan informal acerca de bloguear. ¡Sé razonable contigo mismo! Pero, como dice Ali Spittel, recuerda que escribir un artículo es mejor que no escribir ninguno 😉

Escoger una plataforma

Un consejo es que no construyas tu sitio para bloguear al menos que sepas que te gusta hacerlo. En mi caso yo empecé usando WordPress.com, BlogSpot, luego pasé a pagar hosting para tener mi WordPress customizado. Cuando ya no tenía dinero pasé a Medium, luego me dije, voy a construir algo custom para mi y que no me cueste 😅 y probé con Jekyll, Gatsby deployando el GitHub Pages y ahora estoy con Next.js deployando en Vercel.

Lo que nos lleva a la carnesita del artículo!

Crear un blog con Next.js

Lo primero que vamos a hacer es crear nuestro proyecto. Para ello utilizaremos el siguiente comando:

Luego, en la raíz de nuestro proyecto, creamos nuestra carpeta articles donde estarán nuestros artículos.

Puedes crear allí tus propios artículos o encontrar los artículos de prueba en el repositorio de GitHub.

Por defecto Next.js no puede leer estos archivos y mostrarlos. Para ello vamos a hacer uso de un paquete llamado contentlayer.

Contentlayer es un SDK de contenido que valida y transforma el contenido en data tipo JSON con tipado para que lo importemos fácilmente en nuestra aplicación.

Como vemos en la documentación tenemos que modificar nuestro next.config.js envolviendo nuestra configuración con la utilidad withContentlayer

Luego toca crear el archivo contentlayer.config.js donde especificaremos nuestros tipos de documentos o archivos.

También le vamos a agregar una propiedad readingTime para tener el tiempo de lectura, a lo Medium.

Vamos a usar un paquete llamado reading-time que nos va a calcular ese tiempo de acuerdo al contenido de nuestro artículo.

y lo vamos a importar en contentlayer.config.js

y vamos a añadir el campo en computedFields

Luego vamos a ir a index.js para pintar los artículos.

ahora vamos a correr nuestra aplicación

Y, nos muestra un error 😅

failed to compile Loading

Este error es porque no encuentra el módulo que estamos importando, esto es porque el archivo index.js está dentro de la carpeta pages.

Lo que podemos hacer es importarlo así "../.contentlayer/generated"

crear un archivo jsconfig.json para decirle al compilador que nuestros imports empiezan en la carpeta base.

Entonces creamos nuestro archivo jsconfig.json con lo siguiente

Ahora, detenemos el servidor y volvemos a probar ejecutando

Y ¡ya podemos ver el listado de nuestros artículos!

compile the query Loading

Pero todavía nos falta ver su contenido, así que para ello vamos a ver cómo funcionan las rutas dinámicas en Next.js.

Para esto vamos a crear una carpeta dentro de pages llamada blog y dentro un archivo que se llame [slug].js con lo siguiente

Detenemos el servidor y ejecutamos nuevamente

y si entramos a uno de nuestros artículos podremos ver que ya se muestra la información:

Rendering article Loading

Ahora que ya podemos ver nuestros artículos vamos a crear nuestros componentes para que nuestra web se vea bonita.

Para estilar nuestros componentes vamos a usar TailwindCSS y vamos a hacer todo lo que dice en su guía "Install Tailwind CSS with Next.js"

Luego de haber realizado todo lo de la guía, vamos a agregar el paquete @tailwindcss/typography para hacer que nuestro artículo se vea muy bien.

en nuestro config tenemos que agregar lo siguiente a nuestro tailwind.config.js

y en nuestro globals.css

Luego pasamos a modificar el index.js

Creamos una carpeta components en la raíz donde estarán nuestros componentes, por ahora crearemos el componente Article en article.js

Como vemos estamos usando la librería date-fns así que pasaremos a instalarla

rendering articleLoading

Ahora pasaremos a darle los últimos arreglos a nuestro archivo contentlayer.config.js, porque, si bien ahora estamos mostrando el HTML, quisiéramos mostrar la data markdown parseada y estilada, por ejemplo las partes de código se vieran con un formato bonito, que la sintaxis esté resaltada, que el markdown sea el formato de GitHub y que los headers estén linkeados.

  • remark-gfm es para tener un GitHub Flavored Markdown
  • rehype-slug para agregar ids a los headings
  • rehype-code-titles para agregar títulos al código, es decir que se vea el nombre de los archivos jsx:pages/_app.jsx
  • rehype-autolink-headings para agregar enlaces a los headings que tengan un id.
  • rehype-prism-plus es para resaltar el código con la librería usando la librería Prism.

Entonces, vamos a agregarlos a nuestro config

Y vamos a modificar nuestro tipo Article para decirle que el tipo de contenido es MDX, y la función a exportar agregando los plugins.

Para linkear los headers le estamos diciendo que vamos a usar la clase .anchor por lo que vamos a agregar el siguiente código a nuestro global.css

A continuación, vamos al archivo [slug].js y modificamos nuestro componente Article tal y como nos dice la documentación de Contentlayer.

y voila! ya tenemos nuestros artículos!

final articleLoading

Pero el código no tiene mucho color que digamos 🤔 y es que falta que agreguemos algunos estilos.

Como yo soy muy fan del tema Shades of Purple de Ahmad Awais le vamos a poner esos estilos para resaltar el código.

Vamos a copiar este archivo prism-shades-of-purple.css del repo de temas para Prism en nuestro código y lo vamos a importar en _app.js

Ahora sí, voilá!

final article Loading

Puedes ver el preview del proyecto aquí 👉 https://blog-with-next-js-theta.vercel.app/

Desplegar en Vercel

Para desplegar tu blog en Vercel solo debes seguir los pasos de la guía "Deploying a Git Repository" o darle al botón Deploy del repositorio en GitHub

Resumen y perspectiva

En este artículo hemos pasado el contenido de nuestros artículos MDX como data JSON con Contentlayer y pronto podremos unificar nuestro contenido ya sea que venga de archivos locales como de algún CMS, todo en uno solo y con tipado!

Espero que hayas aprendido mucho! aunque nos faltaron muchas cosas como el SEO, generar un sitemap y un RSS para el blog de los cuales te dejo algunos recursos a continuación para que te inspires 😉

Recursos adicionales