ServBay

Українська

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
ไทย
한국어

Українська

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
ไทย
한국어

Appearance

Встановлення та налаштування Jigsaw у середовищі ServBay ​

Огляд ​

У цьому документі описано кроки з встановлення та налаштування статичного генератора сайтів Jigsaw у потужному локальному веб-середовищі ServBay. ServBay забезпечує інтегроване середовище для таких стеків, як PHP, Node.js тощо, значно спрощуючи процес запуску проектів на Jigsaw. За допомогою ServBay ви зможете легко налаштувати локальні домени, HTTPS та високопродуктивний веб-сервер для проектів на Jigsaw, тож зможете сконцентруватися на розробці контенту вашого сайту.

Що таке Jigsaw? ​

Jigsaw — це статичний генератор сайтів, створений на базі компонентів Laravel командою Tighten. Він використовує потужність і гнучкість шаблонізатора Laravel Blade та Markdown-файли для створення повністю статичних HTML-сайтів. Jigsaw ідеально підходить для розробки сайтів-документації, блогів, лендінгів чи будь-яких сайтів, яким не потрібна база даних або серверна логіка. Основні переваги Jigsaw:

  • Знайомі інструменти: Якщо ви працювали з Laravel або Blade, почати з Jigsaw буде дуже просто.
  • Продуктивність і безпека: Статичні сайти завантажуються миттєво та є безпечнішими, оскільки відсутнє виконання серверного коду.
  • Гнучкі шаблони: Blade дозволяє створювати складні макети та компоненти.
  • Підтримка Markdown: Легко створюйте і редагуйте контент.

Приклади використання ​

Jigsaw стане у пригоді в таких ситуаціях:

  • Сайти з документацією для проекту чи API
  • Особисті блоги або технічні сайти
  • Лендінги для компаній або продуктів
  • Малі презентаційні сайти
  • Будь-які сайти, яким потрібна висока швидкість, безпека і фіксований контент

Попередні вимоги ​

Перед початком переконайтесь, що ви виконали наступні умови:

  1. ServBay встановлений і запущений: ServBay повинен бути інстальований і працювати на macOS. Він вже містить PHP, Composer і Node.js/npm, які необхідні для Jigsaw.
  2. Базові знання роботи з терміналом: Потрібно буде виконувати команди в Terminal.
  3. Розуміння Composer і npm: Встановлення Jigsaw залежить від Composer, а для зборки фронтенд-ресурсів використовується npm.

Кроки встановлення та налаштування ​

В цьому розділі докладно описані дії для запуску й налаштування проекту Jigsaw у середовищі ServBay.

Крок 1: Створення директорії для проекту ​

Відкрийте термінал і перейдіть до стандартної кореневої папки сайтів ServBay /Applications/ServBay/www, створіть нову піддиректорію для вашого проекту Jigsaw.

bash
cd /Applications/ServBay/www
mkdir servbay-jigsaw-demo
cd servbay-jigsaw-demo

Директорію проекту названо servbay-jigsaw-demo — тут зберігатимуться всі файли вашого проекту.

Крок 2: Створення проекту Jigsaw за допомогою Composer ​

У ServBay вже встановлено та налаштовано Composer, отож ви можете використовувати команду composer прямо в терміналі. Знаходячись у щойно створеній папці (/Applications/ServBay/www/servbay-jigsaw-demo), виконайте команду для створення проекту Jigsaw:

bash
composer create-project tightenco/jigsaw .

Ця команда завантажить останню версію Jigsaw разом з усіма PHP-залежностями у поточну директорію (.). Зверніть увагу на крапку в кінці — це означає, що проект буде створено тут, а не у новій підпапці jigsaw.

Крок 3: Налаштування сайту у ServBay ​

Щоб мати змогу відкривати ваш Jigsaw-сайт у браузері, потрібно додати цей проект як локальний сайт у ServBay.

  1. Відкрийте інтерфейс ServBay: Двічі клікніть на іконці застосунку ServBay на панелі або скористайтеся іконкою у меню macOS.
  2. Перейдіть до «Сайти»: Виберіть вкладку «Сайти» у лівому меню.
  3. Додайте новий сайт: Натисніть кнопку «+» внизу інтерфейсу, оберіть «Додати сайт».
  4. Заповніть дані сайту:
    • Назва (Name): Вкажіть зрозумілу назву, наприклад ServBay Jigsaw Demo.
    • Домен (Domain): Вкажіть домен, який використовуватиметься для локального доступу. Рекомендується використовувати суфікс .servbay.demo, аби уникнути конфліктів з реальними доменами, наприклад: jigsaw-demo.servbay.demo. ServBay автоматично направить цей домен на локальний комп’ютер.
    • Тип сайту (Site Type): Оберіть PHP — Jigsaw потребує PHP для збірки.
    • Версія PHP (PHP Version): Оберіть встановлену у ServBay стабільну версію PHP (рекомендовано — найновішу).
    • Коренева директорія сайту (Site Root): Дуже важливий крок! Jigsaw створює статичні файли у директорії build_local вашого проекту. Тому вкажіть цю папку як корінь: /Applications/ServBay/www/servbay-jigsaw-demo/build_local
  5. Збережіть та застосуйте: Після внесення всіх даних натисніть «Зберегти». ServBay запропонує застосувати зміни — підтвердіть. Система автоматично оновить налаштування веб-сервера (Caddy або Nginx) та налаштує HTTPS.

Крок 4: Встановлення фронтенд-залежностей ​

Проекти на Jigsaw зазвичай використовують npm для керування і збірки фронтенд-ресурсів (SASS, JavaScript тощо). У середовищі ServBay Node.js та npm вже встановлені.

Знаходячись у директорії проекту (/Applications/ServBay/www/servbay-jigsaw-demo), виконайте таку команду для встановлення залежностей:

bash
npm install

Система зчитує файл package.json у корені вашого проекту і завантажує необхідні модулі у папку node_modules.

Крок 5: Збірка сайту на Jigsaw ​

Після встановлення залежностей запустіть команду, яка згенерує статичні файли вашого сайту.

Виконайте у директорії проекту:

bash
./vendor/bin/jigsaw build

Ця команда:

  1. Обробляє файли Markdown та шаблони Blade у папці source.
  2. Виконує завдання, описані у webpack.mix.js (якщо встановлено Laravel Mix через npm install).
  3. Виводить готові HTML, CSS, JS та інші матеріали у папку build_local.

Крок 6: Перегляд сайту ​

Тепер статичні файли сайту Jigsaw знаходяться у /Applications/ServBay/www/servbay-jigsaw-demo/build_local. Оскільки ви вже зазначили цю папку як корінь сайту у ServBay, ви можете відкрити сайт у браузері.

Відкрийте браузер і зайдіть на домен, який ви вказали у кроці 3, наприклад: https://jigsaw-demo.servbay.demo. ServBay автоматично згенерує локальний HTTPS-сертифікат (від користувацького CA ServBay), і ви повинні побачити стандартну привітальну сторінку Jigsaw.

Кастомізація та розробка ​

Коли базове середовище готове, можна переходити до кастомізації контенту та дизайну вашого Jigsaw-сайту.

Редагування контенту та шаблонів ​

  • Вихідний код сайту міститься у директорії source проекту.
  • HTML-структури та компоненти реалізовані на Blade та розміщені в піддиректоріях, наприклад, source/_layouts і source/_partials.
  • Сторінки, як правило, оформляються у Markdown і зберігаються у source або її підпапках (наприклад, source/index.md, source/about.md).
  • Блог-пости знаходяться у source/_posts з іменами у форматі YYYY-MM-DD-slug.md.

Додавання нових сторінок чи статей ​

Щоб створити нову сторінку або блог-пост, просто додайте новий Markdown-файл у директорії source чи відповідну підпапку (наприклад, source/_posts).

Наприклад, створення source/about.md:

markdown
---
title: "Про нас"
description: "Дізнайтеся більше про ServBay Jigsaw Demo"
---

# Про нас

Це сторінка «Про нас», створена за допомогою Jigsaw.

Тут ви можете додати інформацію про компанію, команду та інше.

Кастомізація стилів та скриптів ​

Jigsaw-проекти зазвичай використовують Laravel Mix (webpack.mix.js) для компіляції фронтенд-ресурсів.

  • Файли стилів (SASS/SCSS) знаходяться у source/_assets/sass.
  • JavaScript-файли — у source/_assets/js.

Для компіляції цих ресурсів, у директорії проекту виконайте потрібний npm-скрипт:

  • npm run dev: компіляція для розробки (джерела, не зжаті).
  • npm run watch: компіляція у режимі спостереження — ресурси автоматично перекомпілюються при зміні файлів.
  • npm run prod: компіляція для продакшну — ресурси оптимізуються і мінімізуються.

Наприклад, після зміни source/_assets/sass/main.scss виконайте npm run dev або npm run watch для оновлення CSS.

Повторна збірка сайту ​

Важливо: Кожного разу, коли ви міняєте файли контенту (Markdown) або шаблони (Blade) у директорії source, потрібно повторно запускати команду збірки Jigsaw, щоб зміни застосувалися в build_local:

bash
./vendor/bin/jigsaw build

Якщо ви змінювали фронтенд-ресурси (SASS, JS), запустіть npm run dev чи npm run watch для компіляції. Зазвичай команда jigsaw build також викликає Mix-компіляцію, але для відлагодження краще розділяти ці процеси.

Корисні зауваження ​

  • Директорія збірки: За замовчуванням Jigsaw генерує файли у build_local (для розробки) і build_production (для продакшну). Переконайтесь, що корінь сайту у ServBay вказує на потрібну папку (зазвичай для розробки це build_local).
  • Веб-сервер: ServBay використовує Caddy або Nginx, які напряму обслуговують файли з build_local — це швидко і ефективно. Команду jigsaw serve запускати не потрібно (вона призначена лише для мінімального локального перегляду і має менше можливостей).
  • HTTPS: ServBay автоматично налаштовує HTTPS для доменів .servbay.demo і видає сертифікат від користувацького CA ServBay. Можливо, вам потрібно буде додати цей CA до довірених, щоб уникнути попереджень у браузері.
  • Чиста збірка: Якщо виникають дивні проблеми зі збіркою, спробуйте виконати чисту збірку командою ./vendor/bin/jigsaw build --clean.

Поширені запитання (FAQ) ​

Питання: Я змінив Markdown-файл, але зміни не видно у браузері.

Відповідь: Після зміни контенту або шаблону запустіть у терміналі команду ./vendor/bin/jigsaw build для повторної збірки сайту.

Питання: Я відредагував SCSS-файл, але стиль не змінився.

Відповідь: Щоб зміни застосувалися, запустіть у директорії проекту npm run dev або npm run watch для перекомпіляції фронтенду.

Питання: За адресою сайту з’являється «недоступно» або «файл не знайдено».

Відповідь: Перевірте наступне:

  1. Чи працює ServBay.
  2. Чи правильно налаштований сайт у ServBay: чи вірний домен? Чи кореневий каталог вказує на /Applications/ServBay/www/servbay-jigsaw-demo/build_local?
  3. Чи виконана команда ./vendor/bin/jigsaw build і чи існують в директорії build_local потрібні статичні файли (наприклад, index.html).

Питання: Як опублікувати сайт Jigsaw?

Відповідь: Jigsaw створює чисто статичний сайт. Зазвичай, потрібно:

  1. Виконати ./vendor/bin/jigsaw build production для створення оптимізованої версії сайту.
  2. Завантажити всі файли з директорії build_production на будь-який хостинг, який підтримує статичні сайти (Netlify, Vercel, GitHub Pages, хмарні сховища тощо).

Висновок ​

ServBay робить встановлення і налаштування Jigsaw для статичних сайтів у середовищі macOS максимально простим та ефективним. ServBay надає всі потрібні інструменти: PHP, Composer, Node.js, npm — а також гнучке керування локальними веб-сайтами. Дотримуючись цієї інструкції, ви зможете швидко запустити свій Jigsaw-проект та отримати всі переваги локальної розробки за допомогою ServBay.