在 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 的簡單性和靈活性使其成為構建靜態網站的理想選擇。