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

Что такое Statamic?

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

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

В этой статье мы покажем, как установить и настроить Statamic в среде ServBay с помощью Composer.

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

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

bash

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

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

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

bash

composer create-project statamic/statamic .

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

Добавление нового сайта
Откройте ServBay, перейдите на вкладку «Хосты» и добавьте новый сайт:
- Имя: My Statamic Site
- Домен: servbay-statamic.local
- Тип сайта: PHP
- Версия PHP: выберите соответствующую версию PHP
- Корневой каталог сайта: /Applications/ServBay/www/servbay-statamic-app/public
Сохранение конфигурации
Сохраните конфигурацию и перезапустите ServBay.

Шаг 4: Настройка Statamic

Редактирование файла конфигурации окружения
В корневом каталоге проекта скопируйте файл .env.example в .env:
bash
```
cp .env.example .env
```
1
Генерация ключа приложения
Выполните следующую команду для генерации нового ключа приложения:
bash
```
php artisan key:generate
```
1

Шаг 5: Запуск Statamic

Доступ к Statamic
Откройте браузер и перейдите по адресу https://servbay-statamic.local, чтобы увидеть приветственную страницу Statamic.
Доступ к панели управления
Откройте браузер и перейдите по адресу https://servbay-statamic.local/cp, чтобы увидеть страницу входа в панель управления Statamic.
Создание учетной записи администратора
Следуйте инструкциям на экране для создания учетной записи администратора, заполнив имя пользователя, пароль и адрес электронной почты, затем нажмите «Создать учетную запись».

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

Установка плагинов
Войдите в панель управления Statamic, нажмите на значок «плюс», затем «Плагины», найдите и установите нужные вам плагины.
Установка тем
Нажмите значок «плюс», затем «Темы», выберите и установите понравившуюся тему.

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

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

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

Создание коллекций
В панели управления Statamic перейдите в раздел «Контент» -> «Коллекции», создайте новую коллекцию, заполните название коллекции и другие настройки, затем нажмите «Сохранить».
Создание контента
Перейдите в раздел «Контент» -> «Коллекции», выберите только что созданную коллекцию, нажмите «Новая запись», заполните заголовок и контент, затем нажмите «Сохранить».

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

Создание навигации
В панели управления Statamic перейдите в раздел «Контент» -> «Навигация», создайте новую навигацию, заполните название навигации и другие настройки, затем нажмите «Сохранить».
Добавление элементов навигации
Добавьте коллекции и контент в навигацию, затем нажмите «Сохранить».

Настройка шаблонов и стилей

Редактирование шаблонов

Отредактируйте файлы шаблонов Blade в каталоге resources/views, чтобы настроить макет и отображение контента вашего сайта. Например, отредактируйте файл 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>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Добавление стилей
Создайте файл CSS в каталоге resources/css и добавьте его в шаблон. Например, создайте файл app.css:
css
```
/* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}
```
1
2
3
4
Добавьте ссылку на файл CSS в шаблон:
html
```

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```
1
2
Добавление скриптов
Создайте файл JavaScript в каталоге resources/js и добавьте его в шаблон. Например, создайте файл app.js:
javascript
```
// resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});
```
1
2
3
4
Добавьте ссылку на файл JavaScript в шаблон:
html
```

<script src="{{ mix('js/app.js') }}"></script>
```
1
2
Компиляция ресурсов
Выполните следующие команды для компиляции файлов CSS и JavaScript:
bash
```
npm install
npm run dev
```
1
2

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

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

Что такое Statamic? ​

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

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

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

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

Шаг 4: Настройка Statamic ​

Шаг 5: Запуск Statamic ​

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

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

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

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

Настройка шаблонов и стилей ​