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

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

В этом материале приведена подробная пошаговая инструкция по установке и настройке Statamic с помощью Composer в комплексной среде локальной web-разработки ServBay. ServBay предоставляет необходимые инструменты: подходящую версию PHP, поддержку Composer и удобное управление настройками сайтов.

Шаги установки Statamic

Установка Statamic в среде ServBay проста и интуитивно понятна. Следуйте последовательности ниже:

Шаг 1: Создайте директорию для проекта

Сначала нужно создать для вашего проекта Statamic новую вложенную папку в корневой директории сайтов ServBay — /Applications/ServBay/www. Откройте терминал и выполните команды:

bash

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

Это позволит перейти в корень сайтов ServBay, создать там новую папку с именем servbay-statamic-app и войти в неё.

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

В среде ServBay уже предустановлен Composer — инструмент для управления зависимостями в PHP. Дополнительно ничего устанавливать не потребуется, сразу используйте его для создания проекта Statamic.

Находясь в созданной раньше директории servbay-statamic-app, выполните команду:

bash

composer create-project statamic/statamic .

Эта команда загрузит через Composer последнюю версию Statamic и сопутствующие зависимости, установив их непосредственно в текущий каталог (.). Дождитесь завершения процесса загрузки и установки.

Шаг 3: Настройте веб-сервер (Добавьте сайт в ServBay)

Чтобы ServBay стал обслуживать созданный проект Statamic, потребуется добавить новый сайт через десктопное приложение ServBay.

Откройте приложение ServBay: Запустите десктопное приложение ServBay.
Перейдите на вкладку "Сайты": В интерфейсе ServBay наверху выберите вкладку «Сайты» (в старых версиях она может называться «Хосты»).
Добавьте новый сайт: Нажмите в левом нижнем углу кнопку «плюс» (+), чтобы добавить новую конфигурацию сайта.
Заполните сведения о сайте: В появившемся окне настройте следующие параметры:
- Имя: Придумайте легко узнаваемое название, например, My Statamic Site.
- Домен: Введите локальный домен для доступа в процессе разработки, рекомендуем использовать окончание .local, например, servbay-statamic.local. ServBay автоматически настроит локальный DNS.
- Тип сайта: Выберите PHP.
- Версия PHP: Укажите ту версию PHP, которая поддерживается вашим проектом Statamic (обычно рекомендуется использовать актуальную стабильную).
- Корневая директория сайта: Это очень важный момент. Стартовый файл Statamic, index.php, находится в поддиректории public вашего проекта. Укажите корень сайта как /Applications/ServBay/www/servbay-statamic-app/public.
Сохраните и примените настройки: После заполнения всех полей нажмите кнопку «Сохранить». ServBay может предложить перезапустить сервисы для применения изменений. Следуйте подсказкам — это необходимо, чтобы веб-сервер ServBay (по умолчанию Caddy или Nginx) загрузил новую конфигурацию сайта.

Шаг 4: Настройка окружения Statamic

В корне проекта Statamic используется файл .env для хранения конфигурационных переменных окружения (например, секретных ключей приложения, настроек БД и пр.).

Скопируйте шаблон файла окружения: В составе проекта Statamic уже есть пример файла .env.example. Находясь в /Applications/ServBay/www/servbay-statamic-app, скопируйте его командой:
bash
```
cp .env.example .env
```
1
Сгенерируйте ключ приложения: Laravel/Statamic требуют уникальный ключ для обеспечения безопасности — шифрования сессий и других данных. В корне проекта запустите Artisan-команду для генерации этого ключа:
bash
```
php artisan key:generate
```
1
Эта команда автоматически создаст и пропишет значение APP_KEY в вашем .env файле.

Шаг 5: Запуск и доступ к Statamic

Теперь ваш сайт на Statamic должен быть корректно настроен и запущен в ServBay.

Перейдите на свой сайт Statamic: Откройте браузер и введите доменное имя, которое вы указали на шаге 3, например, https://servbay-statamic.local. ServBay автоматически выписывает самоподписанный SSL-сертификат (от своего CA), поэтому можно использовать HTTPS. Вы должны увидеть приветственную страницу Statamic.
Доступ к административной панели: Панель управления Statamic обычно доступна по адресу /cp. Откройте в браузере https://servbay-statamic.local/cp — появится страница входа или начальной настройки.
Создание администратора: При первом заходе в панель управления система предложит создать учётную запись администратора. Следуйте подсказкам на экране: укажите имя пользователя, пароль и e-mail, затем нажмите «Создать аккаунт». После этого вы сможете войти в админку и приступить к настройке сайта.

Шаг 6: Установка плагинов и тем (по желанию)

У Statamic мощная экосистема плагинов и тем, расширяющих функционал и внешний вид сайта.

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

Создание сайта на Statamic

После успешной установки и начальной настройки можно приступить к наполнению и оформлению сайта, используя весь потенциал Statamic. Вот краткое руководство по базовым действиям:

Создание контента и коллекций

В Statamic для структурирования контента используется концепция "Коллекций" (Collections), что аналогично типам записей или страниц в классических CMS.

Создайте коллекцию: Через панель управления — «Контент» → «Коллекции» — нажмите «Создать коллекцию». Придумайте название (например, Posts, Pages), настройте структуру маршрутов, Blueprint полей и прочее.
Добавьте материал: Внутри коллекции кликните «Создать», чтобы добавить конкретный контент — например, блог-пост или страницу. Заполните поля по шаблону, который вы определили для этой коллекции.

Настройка навигации

Вы можете создавать и управлять навигационными меню сайта.

Создание навигации: В панели управления перейдите в «Контент» → «Навигация», кликните «Создать навигацию». Задайте название, например, Main Navigation.
Добавление пунктов: Перетяните созданные элементы контента (из коллекций или отдельных страниц) в дерево навигации, выстраивая нужную структуру меню.

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

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

Редактирование шаблонов: Файлы представлений обычно расположены в каталоге resources/views вашего проекта. Внутри по структуре Statamic традиционно есть папки layouts, partials, collections и др. Редактируйте или добавляйте Blade-шаблоны (.blade.php) чтобы полностью контролировать HTML. Например, отредактируйте файл resources/views/layouts/default.blade.php для изменения основной структуры страниц.

html

<!-- 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>

Добавление стилей и скриптов: В проектах на Statamic в качестве инструментов для сборки и компиляции фронтенд-ресурсов часто используются Laravel Mix или Vite. Исходные CSS и JavaScript файлы размещаются в папках resources/css и resources/js.

Например, добавьте CSS-стили в resources/css/app.css:

css

/* 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;
}

А JavaScript — например, в resources/js/app.js:

javascript

// resources/js/app.js
console.log('Statamic frontend assets loaded!');

// Пример: простое взаимодействие
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('nav li a');
    navItems.forEach(item => {
        item.addEventListener('mouseover', () => {
            console.log(`Наведение на: ${item.textContent}`);
        });
    });
});

Сборка фронтенд-ресурсов: Чтобы ваши CSS- и JS-файлы преобразовались в формат, пригодный для запуска в браузере, выполните сборку. В типовом проекте Statamic есть файл package.json, позволяющий использовать npm или yarn для установки зависимостей и запуска сборки. Так как ServBay поддерживает Node.js, всё можно делать прямо в терминале:
bash
```
npm install
npm run dev
```
1
2
Команда npm install установит все необходимые фронтенд-пакеты (Laravel Mix/Vite, Tailwind CSS, Vue/React и прочие). npm run dev запустит сборку в режиме разработки — с не сжатым кодом и картами исходников для удобства отладки. Для продакшена используйте npm run prod или npm run build.

Итоги

Следуя этим шагам, вы установите и настроите Statamic CMS в функциональной локальной среде разработки ServBay. Все необходимое (PHP, Composer, web-сервер, удобное управление сайтами, поддержка Node.js) поставляется в едином пакете, благодаря чему разработка на Statamic становится максимально быстрой и удобной. Теперь вы можете использовать весь потенциал Statamic для быстрого создания и дальнейшей эволюции собственного сайта!

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

Шаги установки Statamic ​

Шаг 1: Создайте директорию для проекта ​

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

Шаг 3: Настройте веб-сервер (Добавьте сайт в ServBay) ​

Шаг 4: Настройка окружения Statamic ​

Шаг 5: Запуск и доступ к Statamic ​

Шаг 6: Установка плагинов и тем (по желанию) ​

Создание сайта на Statamic ​

Создание контента и коллекций ​

Настройка навигации ​

Кастомизация шаблонов и стилей ​

Итоги ​