En algún momento de la vida, todos pueden tener la tentación de escribir sus pensamientos y compartir conocimientos de alguna manera. Quería crear un blog para hablar de tecnología y tomar notas sobre las cosas que aprendo.

Dicho blog personal quería crearlo con algunas cosas en mente:

1. Económico para alojar
2. Fácil de mantener
3. Probar alguna nueva tecnología genial

Después de buscar algunas opciones, descarté algunas soluciones como Medium, dev.to o Wordpress principalmente porque no pude lograr el elemento #3. También quería crear mi propio portafolio, así que a largo plazo, sería más difícil mostrar algo agradable alojado en un sitio genérico, así que decidí optar por Nuxt.

Nuxt es un framework web que te permite crear buenas aplicaciones interactivas usando Vue.js. Una de las principales cosas interesantes de Nuxt es la función recientemente lanzada llamado Nuxt Content que es básicamente un CMS usando solo su código fuente.

Nuxt Content te permite escribir cualquier tipo de contenido utilizando sintaxis Markdown y te permite utilizar componentes de Vue, sin grandes complicaciones con wysiwygs problemáticos (Gutemberg me refiero a tí) y es fácil de alojar como un sitio estático usando Netlify cumpliendo con los elementos #1 y #2 de la lista porque es básicamente gratis para alojar y Markdown es muy fácil de escribir.

Por otro lado, estaba pensando en qué framework debería usar para crear el diseño del sitio. Escuché sobre Tailwind por el twitter de Adam Wathan y tengo algo de interés. Tailwind es un framework postcss que te brinda muchas clases CSS que funcionan como primitivas (una sola clase haciendo una sola cosa bien) en lugar de dar una tema o estructura de diseño específico. Esto es como comparar Bootstrap o Bulma con algo como Tachyons.

Jugando con las herramientas

Después de trabajar un tiempo en la construcción del blog, comencé a amar lo bien que Tailwind funciona manteniendo un diseño de trabajo cohesivo y pensando en componentes. Esto es algo que funciona bien con Vue. Tailwind es tan poderoso que básicamente, construí todo el sitio sin escribir ninguna propiedad CSS personalizada.

Una de las principales cosas que noté al trabajar con algo como Bulma o Bootstrap, es que, además de tener variables SCSS o CSS, hay ocasiones en las que tienes que sobrescribir el estilo base, o peor aún, tienes que hackearlo cuando tratando de lograr diseños perfectos en píxeles. Así que no puedo dejar de recomendar Tailwind para cualquier nuevo desarrollo. Puede leer más sobre la experiencia de trabajar con diseño atómico (o utilidad primero como Tailwind lo llama) en esta publicación.

Finalmente, hablando de Nuxt Content, lo estoy usando para administrar contenido como una sitio generado. Tiene bastantes funcionalidades, puedes consultar contenido ubicado en archivos .md. Puedes agregar contenido estructurado a tus archivos de markdown usando Frontmatter (archivos yaml incrustados), incluso puedes usar componentes de vue personalizados con tu markdown para que sea fácil crear un buen blog con todas las funciones.

Una de las desventajas de trabajar con Nuxt Content es que aún no puede usar imágenes en markdown debido a la integración con webpack, por lo que tienes que buscar una solución alternativa como usar un componente de vue personalizado que funciona bien con el proceso de construcción de nuxt. Yo también creo que almacenar imágenes de contenido en Git no es una buena idea, así que usé Git LFS con Netlify.

Pensamientos finales

Recomendaría Nuxt junto con Nuxt Content y Tailwind para cualquier sitio nuevo que requieren poco esfuerzo en cuanto al manejo del contenido. Escribir contenido usando Markdown no es para todos, así que diría que mientras no necesite que gente no técnica escriba contenido, todo bien.

Esta es también mi primera publicación, así que espero que disfruten de cualquier contenido nuevo que estaré publicando en el futuro.