Mi nuevo sitio Statamic CMS + Tailwind CSS

Ya he perdido la cuenta de cuantas veces he rediseñado y cambiado la forma de hacer mi sitio/portafolio. Comencé la versión 1 utilizando HTML y CSS escrito manualmente, pasando por Wordpress y Jekyll y posteriormente agregando preprocesadores de CSS como Sass y Stylus.
Aunque cada iteración ha marcado un avance en mi aprendizaje, ninguna de ellas me ha dejado completamente satisfecho o ha sido fácil de modificar o mantener.

Pero por suerte, gracias a mi oficina, creo que finalmente he encontrado el workflow que se ajusta a mi estilo de trabajo y me permite hacer casi todo lo que siempre he querido de un CMS.

Este artículo no está pensado para entrar en detalle técnico dentro de cada herramienta, sino para dar una vista general y despertar la curiosidad. Pero sin duda en el fututo crearé más contenido para explicar cada cosa en más profundidad.

Se llama Statamic y, tienen una muy buena documentación, ejemplos, y comunidad, lo que me ha permitido poder aprender rápidamente y además de contar con un Marketplace con plantillas gratis que puedo usar para ver como otros crean sus sitios. Esto sumado a Tailwind CSS ha hecho que poder crear sitios sea mucho más sencillo.

¿Que es Statamic?

Statamic es un sistema de gestión de contenidos (CMS, por sus siglas en inglés) basado en PHP que se utiliza para construir sitios web y aplicaciones web. Al igual que otros CMS, como WordPress o Joomla, Statamic permite a los usuarios crear y gestionar el contenido de su sitio web de manera sencilla.

Una de las características distintivas de Statamic es que utiliza una estructura de archivos plana en lugar de una base de datos para almacenar el contenido. Esto significa que el contenido se almacena en archivos de texto plano (.md) en lugar de en una base de datos.

Otra ventaja de Statamic es su flexibilidad. Se puede utilizar tanto para sitios web pequeños y simples como para proyectos más complejos y escalables. Además, se integra fácilmente con otras herramientas de desarrollo web, como PHP y Laravel, y permite la creación de plantillas personalizadas y la integración de funcionalidades adicionales a través de add-ons y extensiones.

Su instalación es bastante simple, solo unas líneas de código en la terminal y ya estás trabajando, pero primero les recomiendo ver este curso muy completo de como configurar el ambiente para poder trabajar con la Laravel y Valet e incluso mejorar como trabajar en su terminal.

Como está estructurado:

Una colección en Statamic es un conjunto de entradas de contenido que comparten un tipo similar. Por ejemplo, podría haber una colección de artículos de blog o una colección de páginas estáticas.
En mi caso he creado colecciones de páginas, artículos, stories y experimentos que puedes ver listados en el menú principal.

Los blueprints son plantillas que se utilizan para definir la estructura y el comportamiento de las entradas de una colección. Los blueprints especifican qué campos de entrada se deben mostrar en el panel de control de Statamic y cómo deben validarse y almacenarse esos campos. Como ejemplo, este artículo contiene el título, el cuerpo del artículo hecho con un bard, slug, categoría, imagen destacada, fecha, autor, y un campo personalizado que reemplaza la imagen destacada en caso de que el artículo incluya un video a Youtube.

Las vistas son plantillas .antlers.html que es básicamente HTML y se utilizan para presentar la información de una entrada de una colección en un sitio web. Las vistas utilizan etiquetas especiales de Statamic para mostrar los campos de entrada y otros contenidos dinámicos del sitio web. El concepto básico es, creas un campo con un handle que lo identifique y lo muestras en la plantilla con doble llaves. Por ejemplo, podría usar la etiqueta {{ title }} para mostrar el título de un artículo de blog. En el caso de ser un {{ loop }} es muy pareció, pero para terminar el loop debes cerrar la etiqueta con {{ \loop }}

{{ loop }}
    contenido
{{ \loop }}

Sabiendo esto ya podemos agregarle un poco de lógica con “if o else”.

{{ If description }} mostrará el contenido si existe y {{ else }} si es que no. En este caso, como es una condición, debemos cerrarla y quedaría algo así.

{{ if descripcion }}
	// muestra lo que se ingreso en el campo de descripcion
	<span>{{ descripcion }}</span>
{{ else }}
	// muestra algo si el campo esta vacio o no cumple la regla.
{{ /if }}

Lo mantendremos simple esta vez, pero puedes hacer muchas cosas solo sabiendo esto e investigando un poco sobre cómo usar los parciales, que te va a ayudar a no repetir código.

Sin duda tendré que crear más artículos porque me quedo corto tratando de explicarles de la manera más general.

Ok, ahora que sabemos cómo mostrar lo que agregamos en las entradas de la colección tenemos que darle un poco de estilo.

Para esto podemos usar CSS o en este caso usar un framework para simplificarnos la vida, suena complicado, pero la verdad no lo es tanto.

Statamic está pensado para usarse con el framework Tailwind CSS y si usas uno de los starter packs lo más probable es que ya esté incluido.

Te recomiendo Statamic Peak.

¿Pero que es Tailwind CSS?

Tailwind CSS es un framework de CSS que se utiliza para estilizar elementos de interfaz de usuario (UI) de un sitio web. A diferencia de otros frameworks de CSS, como Bootstrap o Foundation, Tailwind CSS no incluye un conjunto predefinido de componentes UI, en su lugar, proporciona una serie de clases utilitarias que se pueden usar para aplicar estilos a los elementos, son fáciles de leer directamente en el HTML por lo que no tendrás que crear una clase y definir las propiedades dentro de otro archivo separado.

Cada clase cumple solo una función, pero combinadas te ayudarán a definir el estilo de los elementos.

Tailwind CSS se utiliza a menudo en conjunción con otras herramientas de desarrollo front-end como React o Vue.js para construir aplicaciones modernas y escalables.

Por ejemplo:

<h1 class="text-xl font-bold">{{ title }}<\h1>

Como puedes ver entender el estilo que estás aplicando a cada elemento es muy simple.

Estas propiedades pueden ser aplicadas al contenido o a los contenedores para crear el layout que quieras.

<div class="grid grid-cols-4 gap-4">
  {{ loop }}
    <div>{{ contenido }}</div>
  {{ /loop }}
</div>

Dale una mirada a la documentación, te aseguro qué hay una propiedad para lo que necesites y si no llegarás a encontrarla hay formas de agregar una personalizada, aunque no lo creo, pero eso quedará para otro día.

Puedes practicar darle estilos a tu código en el sandbox de Tailwind CSS sin miedo a romper nada desde acá.

https://play.tailwindcss.com/

Ok, creo que con esto ya tienes suficiente para estudiar y practicar por un buen tiempo, ahora te quiero mostrar cómo puse todo este trabajo en línea. Hay varias formas, pero creo que esta es la más simple.

¿Ahora donde lo alojo?

Para este tipo de sitios utilizo Netlify. Ofrece una serie de características útiles para desplegar y administrar sitios web estáticos, como integraciones con controladores de versiones como GitLab o GitHub, opciones de redirección y protección contra ataques.

Es especialmente útil para sitios web que se construyen con tecnologías modernas como React, Angular o Gatsby, y que utilizan herramientas de construcción para optimizar el código y mejorar la velocidad de carga.

Lo sé, todo esto puede ser un poco complejo, y requerir un poco de configuración y conocimientos técnicos. Pero ara más información les recomiendo mirar la documentación oficial de Statamic y ver este video que lo explica paso a paso bastante bien, aunque está un poco desactualizado.

Para empezar a utilizar Netlify

Primero necesitas tener tu sitio en un repositorio de código en un servicio de control de versiones como GitLab o GitHub. Luego, puedes conectarte a Netlify desde tu cuenta de ese servicio y seleccionar el repositorio que quieres implementar. Netlify te pedirá que especifiques ciertos detalles, como qué archivo de configuración de construcción utilizar y qué ruta de directorio quieres que se implemente. Por ejemplo:

npm run production && php please ssg:generate

Una vez que hayas configurado todo, Netlify se encargará de implementar tu sitio cada vez que se haga un cambio en el repositorio y generar una URL para que lo puedas visualizar. También puedes configurar Netlify para implementar tu sitio en un dominio personalizado.

En conclusión, Statamic y Tailwind CSS han sido clave en la creación de mi sitio/portafolio. Si estás buscando un CMS fácil de usar y altamente personalizable, definitivamente te recomiendo darle una oportunidad a esta combinación.

Si te gusta el contenido que comparto aquí y quieres recibir más actualizaciones y recursos útiles, ¡considera suscribirte a mi newsletter! También puedes encontrar más contenido en mi canal de YouTube, donde comparto mi historia y aventuras sobre Nueva Zelanda y temas que me apasionan. Si te suscribes a ambos, no te perderás ninguna de mis publicaciones y podrás seguir aprendiendo y creciendo junto a mí. ¡Espero verte pronto!