Установка и настройка Jigsaw в среде ServBay

Что такое Jigsaw?

Jigsaw — это генератор статических сайтов, основанный на Laravel, который подходит для создания документации, блогов и простых статических сайтов. Он предлагает гибкую систему шаблонов и мощные инструменты разработки, благодаря чему создание и управление статическими сайтами становится очень простым.

Шаги по установке Jigsaw

В этой статье мы расскажем, как установить и настроить Jigsaw в среде ServBay.

Шаг 1: Создание директории проекта

Сначала создайте новую директорию проекта в директории www среды ServBay:

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

Шаг 2: Создание проекта Jigsaw с помощью Composer

ServBay уже включает Composer, поэтому мы можем напрямую использовать Composer для создания проекта Jigsaw:

composer create-project tightenco/jigsaw

Шаг 3: Настройка веб-сервера

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. Редактирование контента

   Редактируйте файлы Markdown и Blade в директории source, чтобы настроить контент и макет вашего сайта.

2. Добавление новых страниц

   Создайте новые файлы Markdown в директории source, чтобы добавить новые страницы. Например, создайте файл about.md:

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

3. Настройка навигационного меню

   Редактируйте шаблоны навигационного меню в директории source/_layouts, чтобы добавить новые ссылки в навигацию.

4. Пересборка сайта

   После каждого изменения контента или шаблонов выполните следующую команду для пересборки сайта Jigsaw:

   ./vendor/bin/jigsaw build

Использование Jigsaw для создания сайта

Теперь вы успешно установили и настроили Jigsaw в среде ServBay, и можете начинать использовать его для создания вашего сайта. Вот несколько общих задач:

Создание постов в блоге

1. Создание поста

   Создайте новые файлы Markdown в директории source/_posts, чтобы добавить посты в блог. Например, создайте файл 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. Редактирование стилей

   Редактируйте файлы SCSS в директории source/_assets/sass, чтобы настроить стили вашего сайта.

2. Редактирование скриптов

   Редактируйте файлы JavaScript в директории source/_assets/js, чтобы настроить интерактивное поведение вашего сайта.

3. Компиляция ресурсов

   Выполните следующую команду для компиляции файлов SCSS и JavaScript:

   npm run dev

Следуя этим шагам, вы успешно установили и настроили Jigsaw в среде ServBay и начали использовать его для создания вашего сайта. Простота и гибкость Jigsaw делают его идеальным выбором для создания статических сайтов.