Розробка веб-сайту на CMS Statamic
Statamic — PHP CMS, побудована на Laravel, що зберігає контент у плоских файлах (YAML/Markdown) або у базі даних. Відрізняється від WordPress та Craft підходом «git-first»: вся структура та контент живуть у репозиторії, розгортання — це просто git push.
Плоскі файли vs. Eloquent
Плоскі файли (за замовчуванням) — контент у директорії content/ як YAML/Markdown. Не потрібна БД для хостингу. Ідеально для малих веб-сайтів, блогів, документації, де контент змінюється рідко та розгортається через git.
Eloquent — контент у базі даних MySQL/PostgreSQL. Потрібен для: тисяч записів, складного пошуку, частих редагувань без розгортання, багатокористувацьких середовищ з конфліктами.
Архітектура Statamic
my-site/
├── content/
│ ├── collections/
│ │ ├── pages/ # Collection: сторінки
│ │ └── blog/ # Collection: блог
│ ├── trees/
│ │ └── pages.yaml # Структура дерева навігації
│ └── globals/
│ └── site.yaml # Глобальні змінні
├── resources/
│ ├── blueprints/
│ │ ├── collections/
│ │ │ ├── pages/article.yaml
│ │ │ └── blog/post.yaml
│ │ └── globals/site.yaml
│ ├── views/ # Antlers-шаблони
│ └── fieldsets/ # Переиспользуемые групи полів
├── config/statamic/
└── public/
Blueprint — опис структури контенту
# resources/blueprints/collections/blog/post.yaml
title: Blog Post
sections:
main:
display: Main
fields:
- handle: title
field:
type: text
required: true
display: Заголовок
- handle: slug
field:
type: slug
generate: true
display: Slug
- handle: content
field:
type: bard
buttons: [h2, h3, bold, italic, link, anchor, image, blockquote, quote, table, code]
display: Вміст
- handle: featured_image
field:
type: assets
container: assets
max_files: 1
display: Головне зображення
- handle: categories
field:
type: terms
taxonomies: [categories]
display: Категорії
seo:
display: SEO
fields:
- import: seo
Antlers — шаблонізатор Statamic
{{# layouts/default.antlers.html #}}
<!DOCTYPE html>
<html lang="{{ site:locale }}">
<head>
<meta charset="utf-8">
<title>{{ title ?? site:name }} | {{ site:name }}</title>
{{ partial:meta }}
{{ vite src="resources/js/app.js|resources/css/app.css" }}
</head>
<body>
{{ partial:navigation }}
<main>{{ template_content }}</main>
{{ partial:footer }}
</body>
</html>
{{# resources/views/blog/index.antlers.html #}}
{{ collection:blog
sort="date:desc"
paginate="12"
status:is="published"
}}
{{ if no_results }}
<p>Публікацій поки немає.</p>
{{ /if }}
<div class="posts-grid">
{{ results }}
<article class="post-card">
{{ if featured_image }}
<img src="{{ featured_image | glide:width=800:height=400:fit=crop }}" alt="{{ title }}">
{{ /if }}
<h2><a href="{{ url }}">{{ title }}</a></h2>
<time datetime="{{ date format='Y-m-d' }}">{{ date format="d F Y" }}</time>
{{ if excerpt }}<p>{{ excerpt }}</p>{{ /if }}
<a href="{{ url }}">Читати далі →</a>
</article>
{{ /results }}
</div>
{{ paginate }}
<nav class="pagination">
{{ if prev_page_url }}<a href="{{ prev_page_url }}">← Назад</a>{{ /if }}
{{ if next_page_url }}<a href="{{ next_page_url }}">Далі →</a>{{ /if }}
</nav>
{{ /paginate }}
{{ /collection:blog }}
Glide — трансформація зображень
Statamic використовує League/Glide для переміщення на льоту:
{{# Простий ресайз #}}
{{ featured_image | glide:width=1200:height=630:fit=crop }}
{{# Preset-трансформації (config/statamic/assets.php) #}}
{{ featured_image | glide:preset=hero }}
{{# Responsive srcset #}}
{{ responsive:featured_image
sizes="(max-width: 768px) 100vw, 50vw"
webp="true"
}}
E-commerce: Statamic + Simple Commerce
Офіційний плагін doublethreedigital/simple-commerce:
composer require doublethreedigital/simple-commerce
php artisan simple-commerce:install
Додає: Products Collection, Orders Collection, Stripe/PayPal gateway, податки, купони.
Сроки розробки
| Етап | Час |
|---|---|
| Встановлення + налаштування колекцій | 1 день |
| Blueprints (5–8 типів) | 1–2 дні |
| Antlers-шаблони | 3–7 днів |
| Навігація та структура | 0.5 дня |
| Додатки (SEO, форми, пошук) | 1–2 дні |
| Корпоративний веб-сайт | 8–14 днів |