在 ServBay 环境中安装和配置 Jigsaw

什么是 Jigsaw？

Jigsaw 是一个基于 Laravel 的静态网站生成器，适用于构建文档、博客和简单的静态网站。它提供了灵活的模板系统和强大的开发工具，使得构建和管理静态网站变得非常简单。

安装 Jigsaw 的步骤

在这篇文章中，我们将介绍如何在 ServBay 环境中安装和配置 Jigsaw。

步骤 1：创建项目目录

首先，在 ServBay 的 www 目录中创建一个新的项目目录：

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

步骤 2：使用 Composer 创建 Jigsaw 项目

ServBay 已经自带 Composer，因此我们可以直接使用 Composer 来创建 Jigsaw 项目：

composer create-project tightenco/jigsaw

步骤 3：配置 Web 服务器

1. 添加新网站

   打开 ServBay，点击「主机」标签，添加一个新的网站：

   • 名字：My Jigsaw Site
   • 域名：servbay-jigsaw.local
   • 网站类型：PHP
   • PHP 版本：选择对应的 PHP 版本
   • 网站根目录：/Applications/ServBay/www/servbay-jigsaw-app/build_local

2. 保存配置

   保存配置。

步骤 4：构建 Jigsaw 网站

1. 安装依赖

   在项目目录中运行以下命令来安装 npm 依赖：

   npm install

2. 构建网站

   运行以下命令来构建 Jigsaw 网站：

   ./vendor/bin/jigsaw build

步骤 5：运行本地开发服务器

1. 访问开发服务器

   打开浏览器，访问 https://servbay-jigsaw.local，你将看到 Jigsaw 网站的本地开发版本。

步骤 6：自定义 Jigsaw 网站

1. 编辑内容

   在 source 目录中编辑 Markdown 文件和 Blade 模板文件，以自定义你的网站内容和布局。

2. 添加新页面

   在 source 目录中创建新的 Markdown 文件，以添加新页面。例如，创建一个 about.md 文件：

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

3. 配置导航菜单

   在 source/_layouts 目录中编辑导航菜单的 Blade 模板文件，以添加新的导航链接。

4. 重新构建网站

   每次修改内容或模板后，重新运行以下命令来构建 Jigsaw 网站：

   ./vendor/bin/jigsaw build

使用 Jigsaw 构建网站

现在你已经成功在 ServBay 环境中安装和配置了 Jigsaw，可以开始使用它来构建你的网站了。以下是一些常见的操作：

创建博客文章

1. 创建文章

   在 source/_posts 目录中创建新的 Markdown 文件，以添加博客文章。例如，创建一个 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. 重新构建网站

   运行以下命令来构建 Jigsaw 网站：

   ./vendor/bin/jigsaw build

自定义样式和脚本

1. 编辑样式

   在 source/_assets/sass 目录中编辑 SCSS 文件，以自定义网站的样式。

2. 编辑脚本

   在 source/_assets/js 目录中编辑 JavaScript 文件，以自定义网站的交互行为。

3. 编译资源

   运行以下命令来编译 SCSS 和 JavaScript 文件：

   npm run dev

通过以上步骤，您成功在 ServBay 环境中安装和配置了 Jigsaw，并开始使用它来构建你的网站。Jigsaw 的简单性和灵活性使其成为构建静态网站的理想选择。