¡Hola y bienvenidos a nuestro nuevo blog! Hemos estado trabajando en algunas cosas nuevas y locas que no podemos esperar a compartir con todos vosotros. Pero para empezar, este primer post será sobre cómo y por qué construimos el blog en sí ¿qué podemos decir? - somos frikis del desarrollo web! :).

Como muchos otros proyectos de blogs, al principio podíamos haber empezado publicando en Medium por su sencillez y alcance orgánico. Sin embargo, debido a los recientes cambios que han hecho decidimos que era el momento de invertir en nuestro propio blog que nosotros mismos alojamos y poseemos.

En este post queremos compartir el proceso y algunos detalles técnicos detrás de la construcción del propio “diario online”. Esperamos que te ayude con tus propias decisiones e implementación para un blog privado o de empresa.

La elección

Así pues, la segunda decisión después de la resolución de “pongámonos a bloguear” fue: ¿cómo publicamos? Las dos opciones principales son:

• Utilizar una plataforma de publicación: me vienen a la mente Squarespace, WordPress, Medium o Dev.
• Construir uno mismo, ya sea desde cero o utilizando algunas bibliotecas disponibles.

Las consideraciones habituales son que las plataformas te dan una herramienta lista (sólo tienes que sentarte y empezar a escribir) y un mayor alcance, mientras que las autoconstruidas te conceden un control total.

Para nosotros, en Mynter, había un aspecto importante adicional que había que tener en cuenta, y que hizo que la elección final fuera una obviedad.

Como nos dimos cuenta hace tiempo, una gran fuerza impulsora de nuestro trabajo es querer ayudar a los desarrolladores, ingenieros, y gente del mundo del software a construir sus propias soluciones informáticas. Nos encanta promover la plataforma web, los experimentos y los proyectos de código abierto. Reforzar eso tenía sentido: el código abierto lo es.

La solución que elegimos tenía que ser también relativamente sin fricción: fácil de empezar y de ampliar más tarde. Ah, y - como el propio software de Mynter- ¡también debía ser rápida!

Un software rápido tiene al menos tres aspectos:

• Tiempo hasta producción corto
• Tiempos de construcción breves
• Tiempo de adopción mínimo.

Entonces… Hugo? WordPress? Gatsby? …?

Si buscas en jamstack.org, verás cientos de opciones diferentes de código abierto entre las que elegir. Aquí están algunos de los pros y los contras de las soluciones que hemos considerado:

Hugo

Este año hemos asistido a un gran debate y entusiasmo en torno a Hugo. Escrito en Goland, y optimizado para la velocidad de generación de sitios, Hugo no opina sobre la arquitectura del sitio que genera, sino que pone la responsabilidad y el control sobre esas decisiones en manos del desarrollador a través de sus plantillas Go.

Aunque está escrito en Go, la gestión de las dependencias de Hugo es muy sencilla, lo que permite simplificar la experiencia del desarrollador. El binario de Hugo puede ser instalado directamente sin necesidad de instalar y configurar Go. Esto se simplifica aún más para aquellos que utilizan Node como parte de su cadena de herramientas gracias a la disponibilidad del binario de Hugo como paquete NPM.

La gran velocidad de generación de sitios de Hugo conduce a una experiencia de desarrollo rápida y gratificante y también ha llevado a que se utilice en algunos despliegues de sitios a gran escala donde el número de páginas únicas que se generan puede ser de decenas de miles, o más.

• Pros
  • Rápido.
  • Popular.
  • Utiliza Markdown.
• Contras
  • Al estar escrito en Go es un ecosistema bastante exótico para nosotros, y comenzar este tipo de nueva aventura sólo para un blog sería un ajetreo innecesario.

WordPress

WordPress es un sistema de gestión de contenidos gratuito y de código abierto basado en PHP y MySQL. Cuenta con una arquitectura de plugins y un sistema de plantillas. Se asocia sobre todo a la creación de blogs, pero admite otros tipos de contenido web, como listas de correo y foros más tradicionales, galerías multimedia y tiendas online.

• Pros
  • Extremadamente popular.
  • Hay plugin para prácticamente todo.
• Contras
  • No soporta Markdown por defecto.
  • Mal rendimiento por defecto.

Gastby

Podría decirse que es la opción más rápida en nuestra lista, Gatsby es otro SSG basado en React que tiene un enfoque en el rendimiento en su corazón. Diseñado para generar un sitio y un marco del lado del cliente para soportar puntos de entrada pre-renderizados junto con la hidratación del lado en el sitio.

Produce una SPA (Single Page Application) de alto rendimiento con capacidades offline a través de service workers, y una rica capa de datos basada en GraphQL. Gatsby es opinable y lleva la carga de muchos trucos de rendimiento por por defecto.

También tiene un número creciente de plugins y una comunidad y ecosistema cada vez más comprometidos.

• Pros
  • Muy popular en la comunidad JavaScript.
  • Utiliza Markdown para el contenido.
  • React para la estructura.
  • Hay un plugin para (casi) todo.
• Contras
  • Necesitas un plugin para (casi) todo.
  • El uso de GraphQL para entregar datos a las páginas del blog parece un poco exagerado.

Jekyll

Durante muchos años, Jekyll ha sido el SSG con mayor reconocimiento de marca. Su popularidad se ve reforzada por el apoyo de GitHub al proyecto y por el hecho de que es el SSG que soporta GitHub Pages.

Todavía próspero y con una comunidad activa, Jekyll estableció muchos de los patrones que ahora vemos en otros SSG. Muchos de estos patrones son los que hacen que Jekyll siga siendo popular y capaz, desde los metadatos en el front matter y las carpetas de datos estructurados, hasta el soporte para Markdown, la expresiva plantilla Liquid y el soporte para categorías y etiquetas.

• Pros
  • Desarrollo en la nube.
  • GitHub es tu CMS.
• Contras
  • No soporta server-side scripting.
  • No representa dinamicamente.
  • No es una tarea sencilla lanzar una instalación auto hosteada.

Introduciendo ASTRO

Astro cumple todos los criterios iniciales: Es un proyecto de código abierto sencillo, pero extensible, y además está escrito en JavaScript, el lenguaje que vivimos y respiramos. Es menos popular que las opciones mencionadas, pero ya tiene una comunidad vibrante. Puede utilizar Markdown o consumir un CMS, tiene algunos plugins, pero parecen ser realmente ligeros. De hecho, la complejidad arquitectónica de Astro es bastante pequeña: pudimos empezar a jugar con él en poco tiempo, lo que siempre es una ventaja.

Entonces, ¿cómo lo configuramos? Bueno, ¡me alegro de que lo hayas preguntado!

El Markup

Los posts estan escritos en Markdown, el cual es un lenguaje de marcado ligero con todas las herramientas necesarias para un blog. De hecho se pueden utilizar metadatos dentro de estos ficheros con frontmatter.

---
title: Primer post!
description: Post de Ejemplo
date: 2021-12-12
layout: layouts/BlogPostLayout.astro
---

# Hola Mundo!

This blog ......

Los componentes … React, Svelte, Vue…

Astro permite escribir tus componentes y paginas en cualquiera de los lenguajes y formatos mencionados. Las páginas y layouts como tal tiene que ser componentes de Astro, pero su sintaxis es practicamente identica a la de React puesto que son SFC.

En nuestro caso vamos a utilizar Svelte puesto que pensamos que es la aproximación más purista que ofrece la experiencia de desarrollo más refinada, rápida y agradable, pero tu puedes utilizar cualquiera de los mencionados.

Los estilos

Si has estado trabajando con frontend durante más de un par de años probablemente has visto de todo: estilo 100% personalizado, bases de código SCSS avanzadas, Bootstraps, componentes con estilo, ¡oh Dios!

Sin embargo, la solución que parece dar en el clavo para nosotros es Tailwind CSS. Es una gran mezcla de reglas y flexibilidad. No se requirio ninguna personalización para construir este sitio web ni este blog. Esto permite junto con PostCSS entregar unicamente las reglas de CSS necesarias para tu sitio web minimizando de esta forma en bundle entregado al usuario.

El resultado

Hemos terminado con una configuración de blogging bastante fácil de usar -y extender-. Lo hemos subido a GitHub, y lo hemos configurado con Cloudflare Pages (Tiempo total de despliegue: 2min 40s⚡️). También nos hemos asegurado de que rinde bien en la velocidad y otros campos de accesibilidad ejecutando la auditoría de Lighthouse. ¿Los resultados?

Bueno, parece que el blog está listo. ¡Y nosotros también estamos listos para publicar! De hecho, no podemos esperar a compartir con vosotros algunas de las cosas geniales que hemos estado preparando para vosotros en el último año. Muchas de ellas harán que los generadores de sitios estáticos como Astro, herramientas de creación de APIs y otras cosas sean aún más fáciles de configurar y utilizar 😉 .

Así que estad atentos.

¡Gracias, comunidad de desarrolladores! ❤️ ¡Hablamos pronto!