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

Statamic — це сучасна система керування контентом (CMS), побудована на базі фреймворку Laravel, яка славиться своєю гнучкістю та потужністю, ідеально підходить для створення найрізноманітніших сайтів. Однією з визначних особливостей Statamic є те, що вона за замовчуванням зберігає контент та конфігурації у файловій системі, хоча також підтримує і бази даних.

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

Кроки для встановлення Statamic

Встановити Statamic у середовищі ServBay досить просто та швидко. Виконайте наступні дії:

Крок 1: Створіть директорію проєкту

Спершу потрібно створити окрему піддиректорію для вашого проєкту Statamic у кореневій папці сайтів ServBay /Applications/ServBay/www. Відкрийте термінал і виконайте команди:

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

Ці команди перемістять вас у стандартну папку сайтів ServBay, створять нову папку servbay-statamic-app і одразу перейдуть у неї.

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

У ServBay вже встановлено Composer — це інструмент для керування залежностями PHP. Тому додатково нічого інсталювати не потрібно — можна одразу використовувати Composer для створення Statamic-проєкту.

У директорії servbay-statamic-app, створеній на попередньому кроці, виконайте команду:

composer create-project statamic/statamic .

Ця команда завантажить останню версію Statamic разом з усіма залежностями та встановить їх у поточну папку (.). Будь ласка, дочекайтеся завершення процесу завантаження та встановлення.

Крок 3: Налаштування веб-сервера (додавання сайту у ServBay)

Щоб ServBay міг обслуговувати ваш Statamic-проєкт, потрібно додати новий сайт у програмі ServBay.

1. Відкрийте додаток ServBay: Запустіть програму ServBay на вашому Mac.

2. Перейдіть на вкладку "Сайти": У головному інтерфейсі натисніть вкладку "Сайти" у верхньому меню (у старих версіях можливо відображається як "Хости").

3. Додайте новий сайт: Тисніть кнопку "+" у лівому нижньому куті, щоб створити новий сайт.

4. Заповніть інформацію про сайт:

   • Назва: Вкажіть зручне для вас ім’я, наприклад, My Statamic Site.
   • Домен: Введіть локальний домен для доступу до сайту, радимо використовувати суфікс .local, наприклад, servbay-statamic.local. ServBay автоматично налаштує локальне DNS.
   • Тип сайту: Оберіть PHP.
   • Версія PHP: Виберіть версію PHP, сумісну з вашим проєктом Statamic (зазвичай рекомендується остання стабільна).
   • Коренева директорія сайту: Дуже важливий крок! Стартовий файл Statamic, index.php, розташований у підпапці public вашого проєкту. Тому потрібно вказати кореневу папку сайту як: /Applications/ServBay/www/servbay-statamic-app/public.

5. Збережіть та застосуйте налаштування: Після заповнення всіх полів натисніть "Зберегти". Якщо ServBay попросить перезапустити сервіси для застосування нової конфігурації — підтвердіть перезапуск, щоб веб-сервер (типово Caddy або Nginx) завантажив ваш сайт.

Крок 4: Налаштування середовища Statamic

У кореневій папці проєкту Statamic використовує файл .env для керування середовищем (ключ програми, підключення до бази даних тощо).

1. Скопіюйте зразок файлу середовища: У проєкті Statamic є шаблон .env.example. Переконайтеся, що перебуваєте у /Applications/ServBay/www/servbay-statamic-app, і виконайте:

   cp .env.example .env

2. Згенеруйте ключ програми: Laravel/Statamic використовують унікальний ключ програми для безпеки, зокрема для шифрування сесій. Згенеруйте його командою:

   php artisan key:generate

   Після виконання цієї команди в файлі .env автоматично з’явиться значення для APP_KEY.

Крок 5: Запуск і доступ до Statamic

Тепер ваш сайт Statamic вже готовий для роботи у ServBay!

1. Перейдіть на свій сайт: Відкрийте браузер і введіть домен, який налаштовували на кроці 3, наприклад, https://servbay-statamic.local. ServBay автоматично створює SSL-сертифікат (через ServBay User CA або ServBay Public CA), отже, ви можете безпечно відвідувати сайт через HTTPS. Ви побачите вітальну сторінку Statamic.

2. Доступ до панелі керування: Адмін-панель Statamic доступна за адресою /cp. Відкрийте https://servbay-statamic.local/cp і ви побачите форму входу або налаштування.

3. Створіть акаунт адміністратора: Під час першого відкриття панелі система запросить створити акаунт адміністратора. Заповніть ім'я користувача, пароль, електронну пошту та натисніть "Створити акаунт". Після цього ви зможете увійти і повноцінно керувати вашим сайтом на Statamic.

Крок 6: Встановлення плагінів та тем (опціонально)

Statamic має багату екосистему плагінів та тем для розширення функціоналу та зміни вигляду сайту.

1. Встановлення плагінів: Після входу до панелі керування Statamic ви можете додавати нові плагіни через зручний інтерфейс (шукайте в лівому меню відповідний розділ) або за допомогою Composer-команд. У більшості випадків інтерфейс простіший.
2. Встановлення тем: Аналогічно, теми можна інсталювати як через панель керування, так і самостійно, додавши файли у відповідну папку.

Створення сайту зі Statamic

Коли Statamic успішно встановлений і налаштований — можете переходити до наповнення і розробки сайту. Ось кілька базових порад для початку:

Створення контенту та колекцій

Statamic організовує контент через "Колекції" (Collections) — це щось на кшталт категорій для записів чи сторінок у традиційних CMS.

1. Створення колекції: В адмін-панелі Statamic перейдіть у "Контент" → "Колекції", натисніть "Створити колекцію". Вкажіть ім’я (наприклад, Posts чи Pages) і визначте додаткові параметри (правила маршрутизації, поля тощо).
2. Додавання матеріалів: Усередині створеної колекції натисніть "Новий", щоб додати конкретний контент — наприклад, пост у блозі чи окрему сторінку. Вводьте дані згідно з шаблонами полів для цієї колекції.

Налаштування меню навігації

Можете створювати та керувати навігаційними меню вашого сайту.

1. Створіть навігацію: У панелі керування перейдіть до "Контент" → "Навігація" та натисніть "Створити навігацію". Придумайте назву (наприклад, "Головна навігація").
2. Додавайте пункти меню: Перетягуйте контент із колекцій або окремих сторінок у структуру меню для організації ієрархії.

Кастомізація шаблонів та стилів

Statamic розроблений на основі Laravel, тож для дизайну ви можете використовувати шаблонізатор Blade.

1. Зміна шаблонів: Всі шаблони сайту знаходяться у resources/views. Для зміни структури HTML-сторінок редагуйте чи створюйте Blade-файли (.blade.php) у відповідних папках, наприклад: layouts, partials, collections тощо. Щоб змінити базовий макет — відредагуйте файл resources/views/layouts/default.blade.php:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- Підключення скомпільованих CSS --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Приклад: рендеринг навігації з іменем 'main_navigation' --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- Виведення контенту поточної сторінки --}}
           @yield('content')
       </main>
       {{-- Підключення скомпільованого JavaScript --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Додавайте стилі та скрипти: У Statamic зазвичай використовуються Laravel Mix або Vite для збирання фронтенд-ресурсів. Власні стилі пишіть у resources/css/app.css, а скрипти — у resources/js/app.js:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   // resources/js/app.js
   console.log('Статичні фронтенд-ресурси Statamic завантажені!');
   
   // Приклад: проста взаємодія
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Навели курсор на: ${item.textContent}`);
           });
       });
   });

3. Збирання фронтенд-ресурсів: Щоб скомпілювати CSS та JavaScript для використання у браузері, необхідно запустити команду складання. У Statamic-проєкті вже є package.json, тому достатньо виконати у терміналі (ServBay підтримує Node.js):

   npm install
   npm run dev

   npm install встановить всі залежності (наприклад, Laravel Mix/Vite, Tailwind CSS, Vue/React тощо) із package.json. npm run dev збере ресурси у режимі розробки (зручний для тестування і дебагу). Для бойового середовища використовуйте npm run prod або npm run build.

Підсумок

Після виконання цих кроків ви успішно встановили, налаштували та освоїли базову роботу з Statamic у потужному локальному середовищі ServBay. Інтегрована підтримка PHP, Composer, веб-сервера, менеджменту сайтів і Node.js значно спрощує старт розробки на Statamic. Тепер ви можете повною мірою використовувати переваги Statamic і гнучку файлову структуру для швидкої розробки й оновлення ваших веб-проєктів!