Creando sitios estáticos con Jigsaw

Hace algún tiempo tenía ganas de probar Jigsaw, así que describiré como creé este mismo blog de la mano de esta herramienta.

¿Qué es un Sitio Estático?

Los sitios web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el usuario se limita a obtener la información, sin poder realizar mayor interacción con la página web visitada. Entre estos sitios podemos listar por ejemplo al website de una empresa, a un simple blog o a la web de la documentación de un proyecto.

¿Qué es Jigsaw?

Jigsaw es un proyecto open-source desarrollado por el genial equipo de Tighten. Tal como mencionan en la web del proyecto, Jigsaw es un framework para la rápida creación de sitios estáticos utilizando las mismas herramientas que hacen posibles nuestras aplicaciones web.

¿Cómo funciona?

Jigsaw hace uso de Laravel Blade para generar las vistas, por lo que podemos usar todo el poder de este componente tal como lo haríamos en Laravel.

Por otro lado, viene pre-configurado con TailwindCSS, un frameworks de CSS que facilita bastante la aplicación de estilos (ya ahondaré en Tailwind en un artículo futuro). Tailwind nos ayudará a aplicar estilos de manera rápida y consistente para personalizar nuestro sitio a placer.

Sin más que añadir, manos a la obra.

Instalación

Para el propósito de esta guía asumiré que ya tienes instalado Composer y -a la fecha de publicación de este artículo- PHP 7.1 (o superior).

Para instalar Jigsaw, haremos uso de la consola para crearemos un directorio nuevo en donde instalaremos el framework:

mkdir mi-sitio 
cd mi-sitio 
composer require tightenco/jigsaw

Esperamos unos segundos -o minutos, dependiendo de la calidad de tu conexión- y ya tendremos el código base del proyecto.

A continuación procederemos a inicializar Jigsaw.

Aquí podemos optar por una versión limpia o utilizar algunas de las plantillas iniciales que tienen a disposición como “Blog”, un sitio básico para un blog o “Docs”, que te da la configuración inicial de un sitio de documentación. En mi caso escogeré “Blog”, pues de paso nos sirve también para familiarizarnos con el framework.

./vendor/bin/jigsaw init blog

Luego de la instalación, tu directorio mi-sitio tendrá la siguiente estructura