¿Cómo hacer un blog como este?

NextJS

• La estructura inicial del blog está tomada del tutorial de aprendizaje de la web de NextJS

CSS

• Para nombrar y estructurar el CSS intento utilizar (probablemente no muy bien) la metodología BEM
• Probé también utilizar la opción de CSS Modules que proporciona NextJS.

Markdown

• Las entradas del blog se escriben en archivo con formato Markdown. Estos archivos contienen al comienzo un "front matter" con metadatos de la entrada (Ej: título, descripción, fecha, tags, etc.) en formato YAML.
• La extensión Front Matter CMS para Visual Studio Code facilita el manejo de los archivos Markdown y sus metadatos.
• Aquí https://learntheweb.courses/topics/Markdown-yaml-cheat-sheet/ una cheatsheet de Markdown y YAML
• Con la librería gray-matter se leen los metadatos y el contenido en Markdown desde los archivos.
• Con la librería remark se pasa de Markdown a HTML.

Syntax Highlighting (resaltado de código)

Para darle color a los bloques de código utilicé PrismJS vía remark-prism. Para implementarlo seguí este ejemplo: https://github.com/leerob/nextjs-prism-markdown

Tipografías

• En el blog se utilizan tres tipografías: "Roboto Mono", "Roboto Slab", y "Karma".
• Hay una web que te muestra tipografías que combinan bien juntas. Se le puede indicar una (o dos) y que a partir de esa te ofrezca otra. La web se llama Fontjoy.
• Se pueden descargar gratuitamente desde Google Fonts.

Iconos

• Para incorporar iconos utilicé React Icons