Install and Configure Jigsaw in the ServBay Environment

What is Jigsaw?

Jigsaw is a static site generator based on Laravel, suitable for building documentation, blogs, and simple static websites. It provides a flexible templating system and powerful development tools, making it very simple to build and manage static websites.

Steps to Install Jigsaw

In this article, we'll cover how to install and configure Jigsaw in the ServBay environment.

Step 1: Create Project Directory

First, create a new project directory in the www directory of ServBay:

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

Step 2: Create Jigsaw Project Using Composer

ServBay already comes with Composer, so we can directly use Composer to create a Jigsaw project:

composer create-project tightenco/jigsaw

Step 3: Configure the Web Server

1. Add a New Site

   Open ServBay, click on the “Host” tab, and add a new site:

   • Name: My Jigsaw Site
   • Domain: servbay-jigsaw.local
   • Site Type: PHP
   • PHP Version: Select the appropriate PHP version
   • Site Root Directory: /Applications/ServBay/www/servbay-jigsaw-app/build_local

2. Save Configuration

   Save the configuration.

Step 4: Build the Jigsaw Website

1. Install Dependencies

   Run the following command in the project directory to install npm dependencies:

   npm install

2. Build the Website

   Run the following command to build the Jigsaw website:

   ./vendor/bin/jigsaw build

Step 5: Run Local Development Server

1. Access the Development Server

   Open your browser and visit https://servbay-jigsaw.local, where you will see the local development version of the Jigsaw website.

Step 6: Customize the Jigsaw Website

1. Edit Content

   Edit the Markdown files and Blade template files in the source directory to customize your website content and layout.

2. Add New Page

   Create new Markdown files in the source directory to add new pages. For example, create an about.md file:

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

3. Configure Navigation Menu

   Edit the Blade template files for the navigation menu in the source/_layouts directory to add new navigation links.

4. Rebuild the Website

   After modifying the content or templates, run the following command to rebuild the Jigsaw website:

   ./vendor/bin/jigsaw build

Building a Website Using Jigsaw

Now that you have successfully installed and configured Jigsaw in the ServBay environment, you can start using it to build your website. Here are some common operations:

Create Blog Posts

1. Create a Post

   Create new Markdown files in the source/_posts directory to add blog posts. For example, create a 2024-06-05-my-first-post.md file:

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

2. Rebuild the Website

   Run the following command to build the Jigsaw website:

   ./vendor/bin/jigsaw build

Customize Styles and Scripts

1. Edit Styles

   Edit the SCSS files in the source/_assets/sass directory to customize the website’s styles.

2. Edit Scripts

   Edit the JavaScript files in the source/_assets/js directory to customize the website’s interactive behaviors.

3. Compile Assets

   Run the following command to compile SCSS and JavaScript files:

   npm run dev

By following the above steps, you have successfully installed and configured Jigsaw in the ServBay environment and started using it to build your website. The simplicity and flexibility of Jigsaw make it an ideal choice for building static websites.