Hola, volviendo de entre las cenizas, renace un blog que no duró debido a la falta de dinero, tiempo y quizá también creatividad… Sí, el “Bar do Clovão” existía hace 10 años, como un proyecto hecho durante la escuela secundaria, por un adolescente que no sabía muy bien qué quería hacer con su vida.
Todo quedó muy bien indexado por Google (lo cual es excelente y no todos los blogs lo hacen correctamente), en una época en la que todavía no tenía esta idea de blog, sino la de un sitio de contenido geek, con reseñas, noticias y hasta quién sabe, un podcast. En aquella época pensé en algo que pudiera diferenciarlo: contenido de fútbol y geek, todo en el mismo lugar. ¿Genial?
¿Por qué volver?
Siempre pensé en volver con el Bar, pero siempre aparecía algún obstáculo. Necesitaba concentrarme en estudiar y/o trabajar y, en el tiempo libre, tenía que tener mi tiempo de ocio; al fin y al cabo, nadie es de hierro. Durante todo ese tiempo el blog fue quedando atrás, fueron surgiendo oportunidades y terminé enfocándome en otra área, la audiovisual (esa historia queda para otro día).
Me doy cuenta de que muchas personas tienen el siguiente pensamiento: “¿Para qué voy a hacer algo si ya existen tantos?”. Durante mucho tiempo, esto fue uno de los obstáculos, pero con la madurez el famoso que le den empezó a aparecer con más frecuencia. Este tipo de pensamiento impide aprender algo nuevo, tener un hobby saludable y conocer gente nueva; es una oportunidad perdida. Cuando me di cuenta de eso, empecé a estudiar más sobre técnicas de audio y vídeo, y aprendí mucho sobre software de streaming. Y durante todo este aprendizaje, me di cuenta de que estaría genial volver a escribir sobre lo que me gusta, sin ningún compromiso.
Es decir, el blog ya no tendrá noticias prácticamente diarias solo para llenarlo de contenido y hacer que los indexadores me noten. Será algo más ligero, al igual que el nuevo diseño: sencillo y muy práctico. Decidí poner en práctica mis habilidades como desarrollador de software. En 2015 estaba aprendiendo y programaba por hobby. Además, en aquella época hice el diseño a toda prisa, usando WordPress y llenándolo de plugins y frameworks para agilizarlo todo, lo que hacía que los ajustes técnicos fueran bastante molestos (lo cual era horrible, porque sobrecargaba el servidor, que era gratuito, además de ocupar el tiempo que podría haber dedicado a escribir algún contenido para el blog).
El contenido será sobre lo que yo quiera escribir, ya sea un análisis o una anotación que quiera hacer por si algún día necesito consultarla en el futuro, y lo más divertido de todo: ¡compartirlo en internet!
A continuación dejaré anotado un poco del proceso de la engine del blog. Será una parte un poco más técnica y, en el futuro, pretendo dejar el código abierto para que cualquiera pueda usarlo.
## ¿Cómo se hizo todo esto?
Primero, como es un proyecto personal, particularmente no me la paso buscando bibliotecas de front-end. Me gusta hacerlo a mi manera; al fin y al cabo, es un proyecto personal y tiene que ser algo que no se convierta en un trabajo, tiene que ser algo más “divertido”. Claro, no hice todo desde cero, utilicé algunas bibliotecas de React.
Dicho esto, empecemos: usé React puro sin framework, para tener control total. Me basé en una engine ya preparada, en la que se toma un archivo Markdown (md) y se transforma en este post en HTML (al fin y al cabo, el navegador no sabe leer Markdown). Tuve que instalar bibliotecas como react-markdown, remark-gfm y gray-matter, pero ¿para qué?
Mi plantilla de publicación tiene un formato como este:
---
title: ""
thumbnail: ""
date: "2001-01-01T00:00:03+00:00"
description: ""
categories:
- category
tags:
- tag
draft: true
---
Tengo que usar gray-matter para leer este encabezado, react-markdown para la interpretación y remark-gfm para complementar la interpretación y mejorar algunos componentes, como demostré anteriormente con las imágenes y sus comentarios justo debajo. Para ello, simplemente utilicé  y él simplemente hizo la conversión a un HTML más estructurado y no solamente a una etiqueta img.
Otra función bastante interesante es insertar vídeos. Una cosa que Markdown no hace es insertar la etiqueta iframe para los vídeos, pero eso no es un problema: basta con usar remark-gfm y dejar que lea las URL y detecte si se trata de un vídeo (de YouTube, por ejemplo). A continuación haré un ejemplo sencillo utilizando la URL https://www.youtube.com/watch?v=dQw4w9WgXcQ:
¿Lo viste? ¡Creando un HTML personalizable que se adapta al móvil, totalmente responsive!
Y para ponerlo en línea, no es nada del otro mundo. Podría haber usado Github Pages, pero preferí usar Netlify para alojarlo. ¡Ambos son gratuitos!
Alojar imágenes tampoco es un problema usando AWS S3, pero antes de enviar cualquier imagen allí, utilizo Tiny, que hace una compresión sin perder la calidad de la imagen (acepta png, jpeg, gif y webp). Es de pago, pero solo si se utiliza para comprimir más de 500 imágenes, y este blog es pequeño; ¡no hay ninguna razón para que utilice más de 500 imágenes al mes!
Estuve un tiempo pensando si valdría la pena poner un sistema de comentarios, pero entonces me surgió una pregunta: “¿Por qué no valdría la pena habilitar los comentarios?”. Hay gente desagradable por todo internet; si alguna de ellas llega a los comentarios del blog, ¡simplemente la bloqueo y sigo con mi vida! Así que decidí usar Disqus, que es un buen sistema de comentarios (y muy fácil de usar, tanto para el desarrollador como para el usuario final), y lo mejor de todo es que ¡es gratis!
Creo que eso es todo por ahora… El blog quedó fácil de ajustar técnicamente y de hacer una nueva publicación; cualquier editor de texto servirá, y Github y Netlify hacen el resto del trabajo.
¡Gracias por tu atención!