Migrar de Gatsby a Jigsaw
Una guía sencilla para migrar de Gatsby a Jigsaw.
Cuando empecé mi blog, busqué las «mejores» herramientas disponibles en ese momento. Pensaba que, si usaba una gran herramienta, aprendería rápidamente a utilizarla y podría adaptarla a mis necesidades en poco tiempo. Siguiendo esa idea elegí Gatsby, que realmente es una herramienta fabulosa. Casi dos años después, no he escrito tanto como quería por muchas razones, pero sobre todo por la fricción que introduce en mi agenda aprender una tecnología que no uso en ningún otro lugar.
Gatsby es un excelente framework, al igual que NextJS y otros. Ofrecen muchísimas funcionalidades, una gran comunidad y un desarrollo muy activo. Sin embargo, no uso ni necesito gran parte de esas funcionalidades para las necesidades actuales de mi blog. Su configuración y herramientas pueden resultar engorrosas si no las conoces bien ni las utilizas habitualmente. Ofrecen un conjunto increíble de plugins que permite desarrollar rápidamente lo que necesitas, pero cambian con frecuencia y muchos quedan obsoletos en muy poco tiempo.
¡Año nuevo, propósitos nuevos! Uno de mis propósitos es publicar un artículo cada dos semanas. Pero ¿cómo lograrlo si en casi dos años solo he publicado una docena? Necesito un cambio porque, como dice el refrán, la locura es hacer lo mismo una y otra vez esperando resultados diferentes. ¿Qué puedo hacer distinto para lograrlo? Necesito facilitar el proceso de escritura y publicación, como sugiere James Clear en Cómo empezar hábitos que perduren.
Escribir un blog ya está fuera de mi zona de confort, así que empecé a buscar una alternativa a Gatsby basada en tecnologías y herramientas que uso a menudo. Seguía queriendo un sitio estático porque son muy rápidos y el tema me interesa mucho. Busqué un generador de sitios estáticos basado en Laravel, Symfony o PHP, los frameworks y el lenguaje de mis otros proyectos. Hay varios, pero el ganador para mis necesidades e intereses fue Jigsaw. Puede procesar plantillas Blade, Markdown y otros tipos de archivos. Su plantilla de blog utiliza TailwindCSS, un framework CSS con el que empecé a experimentar el año pasado y que disfruto mucho.
¡Decisión tomada, ahora toca actuar!
Migración
El proceso fue bastante sencillo porque ya tenía todos mis artículos en Markdown y la documentación de Jigsaw es clara.
Instalar Jigsaw
Seguí la documentación de instalación.
composer require tightenco/jigsawInstalar la plantilla de blog de Jigsaw
Inicialicé el proyecto con la plantilla de blog.
./vendor/bin/jigsaw init blogCompilar y previsualizar
Compilé y previsualicé la plantilla predeterminada en mi entorno de desarrollo. Más información: Compilar y previsualizar.
$ ./vendor/bin/jigsaw build
npm run watchModificaciones
Después de comprobar que todo funcionaba, copié los archivos Markdown de los artículos de Gatsby a source/_posts. Modifiqué los metadatos de cada artículo según mis necesidades y eliminé las secciones de la plantilla que no utilizaría por ahora. Volví a compilar y previsualizar en mi entorno de desarrollo. Todo estaba bien.
Conclusión
La compilación es muy rápida: hasta ahora, menos de un segundo de media. El rendimiento del sitio es excelente, como indica la imagen al inicio del artículo. Lo evalué con Lighthouse y obtuvo 100 en todos los indicadores salvo accesibilidad, debido a un problema de contraste de colores que debo investigar.
Gracias al equipo de colaboradores de Jigsaw, especialmente a Tighten.
Mejoras e ideas
- No tengo claro cómo funciona la internacionalización en Jigsaw. Es una gran oportunidad para aprender más sobre el tema.
- Quiero aprender cómo funciona la compilación y compararla con la de otros frameworks como Hugo y Gatsby para ver cómo se implementa y cómo podría mejorarse.
- Gestionar formularios en sitios estáticos no es lo más sencillo. Muchos lenguajes de programación se crearon inicialmente para ello. Hoy, con arquitecturas sin servidor, podemos crear un buen flujo para gestionarlos. Planeo implementar un formulario de contacto y escribir un artículo al respecto.
- Quiero incorporar la idea de usar herramientas que permitan resolver el problema eficientemente, tanto por el resultado final como por el tiempo invertido.
- Lighthouse es una gran herramienta para comprobar el rendimiento de los sitios web. Podemos aprender mucho de los detalles y la información que proporciona.
- ¿Te interesa desplegar un sitio estático? Consulta mi próximo artículo.
- ¿Te interesa mantener un nuevo hábito? Consulta mi proyecto Habits para llevar su seguimiento.