Instalación y Configuración de Jigsaw en el Entorno de ServBay

¿Qué es Jigsaw?

Jigsaw es un generador de sitios estáticos basado en Laravel, ideal para construir documentación, blogs y sitios web estáticos simples. Proporciona un sistema de plantillas flexible y potentes herramientas de desarrollo, lo que facilita enormemente la construcción y gestión de sitios web estáticos.

Pasos para instalar Jigsaw

En este artículo, explicaremos cómo instalar y configurar Jigsaw en el entorno de ServBay.

Paso 1: Crear el directorio del proyecto

Primero, crea un nuevo directorio de proyecto en el directorio www de ServBay:

cd /Applications/ServBay/www
mkdir servbay-jigsaw-app
cd servbay-jigsaw-app

Paso 2: Crear el proyecto Jigsaw usando Composer

ServBay ya viene con Composer incorporado, por lo que podemos usar Composer directamente para crear un proyecto Jigsaw:

composer create-project tightenco/jigsaw

Paso 3: Configurar el servidor web

1. Agregar un nuevo sitio web

   Abre ServBay, haz clic en la pestaña "Host" y agrega un nuevo sitio web:

   • Nombre: My Jigsaw Site
   • Dominio: servbay-jigsaw.local
   • Tipo de sitio web: PHP
   • Versión de PHP: Selecciona la versión correspondiente de PHP
   • Directorio raíz del sitio web: /Applications/ServBay/www/servbay-jigsaw-app/build_local

2. Guardar configuración

   Guarda la configuración.

Paso 4: Construir el sitio web Jigsaw

1. Instalar dependencias

   Ejecuta el siguiente comando en el directorio del proyecto para instalar las dependencias de npm:

   npm install

2. Construir el sitio web

   Ejecuta el siguiente comando para construir el sitio web Jigsaw:

   ./vendor/bin/jigsaw build

Paso 5: Ejecutar el servidor de desarrollo local

1. Acceder al servidor de desarrollo

   Abre un navegador y visita https://servbay-jigsaw.local, verás la versión local del sitio web Jigsaw.

Paso 6: Personalizar el sitio web Jigsaw

1. Editar contenido

   Edita los archivos Markdown y las plantillas Blade en el directorio source para personalizar el contenido y la disposición de tu sitio web.

2. Agregar nuevas páginas

   Crea nuevos archivos Markdown en el directorio source para agregar nuevas páginas. Por ejemplo, crea un archivo about.md:

   ---
   title: "About Us"
   ---
   
   # About Us
   
   This is the about page.

3. Configurar el menú de navegación

   Edita el archivo de plantilla Blade del menú de navegación en el directorio source/_layouts para agregar nuevos enlaces de navegación.

4. Reconstruir el sitio web

   Cada vez que modifiques contenido o plantillas, ejecuta el siguiente comando para reconstruir el sitio web Jigsaw:

   ./vendor/bin/jigsaw build

Usar Jigsaw para construir tu sitio web

Ahora que has instalado y configurado Jigsaw en el entorno ServBay, puedes empezar a usarlo para construir tu sitio web. A continuación, se incluyen algunas operaciones comunes:

Crear publicaciones de blog

1. Crear una publicación

   Crea un nuevo archivo Markdown en el directorio source/_posts para agregar una publicación de blog. Por ejemplo, crea un archivo 2024-06-05-my-first-post.md:

   ---
   title: "My First Post"
   date: 2024-06-05
   ---
   
   # My First Post
   
   This is the content of my first post.

2. Reconstruir el sitio web

   Ejecuta el siguiente comando para construir el sitio web Jigsaw:

   ./vendor/bin/jigsaw build

Personalizar estilos y scripts

1. Editar estilos

   Edita los archivos SCSS en el directorio source/_assets/sass para personalizar los estilos del sitio web.

2. Editar scripts

   Edita los archivos JavaScript en el directorio source/_assets/js para personalizar el comportamiento interactivo del sitio web.

3. Compilar recursos

   Ejecuta el siguiente comando para compilar los archivos SCSS y JavaScript:

   npm run dev

Con los pasos anteriores, has instalado y configurado Jigsaw correctamente en el entorno de ServBay y comenzado a usarlo para construir tu sitio web. La simplicidad y flexibilidad de Jigsaw lo convierten en una elección ideal para construir sitios web estáticos.