Розробка сайту на CMS Grav

Розробка веб-сайту на CMS Grav

Grav — flat-file CMS: контент зберігається у Markdown-файлах, база даних відсутня. Це спрощує розгортання, резервне копіювання та роботу з версійним контролем — весь сайт цілком лежить в git. Grav побудований на PHP, використовує Twig для шаблонів та YAML для конфігурації.

Де Grav уместен

Grav підходить для проектів, де:

• контент статичний або змінюється рідко
• команда працює з Markdown та git
• потрібен швидкий сайт без накладних видатків БД
• хостинг обмежений (нема MySQL/PostgreSQL)
• сайт-документація, портфоліо, блог, лендинг

Grav не підходить для e-commerce з тисячами SKU, складних порталів із користувальницьким контентом або сайтів з інтенсивними користувальницькими сесіями.

Структура сайту

user/
  pages/
    01.home/          # сторінка (число = порядок сортування)
      home.md         # підпадання імені файлу з шаблоном → templates/home.html.twig
    02.services/
      _service-dev/   # _ = прихована сторінка, не попадає в listings
        default.md
      services.md
    03.blog/
      blog.md         # шаблон blog.html.twig
      2024-12-01.my-post/
        post.md
  themes/
    my-theme/
  plugins/
  config/
    site.yaml
    system.yaml
  data/               # дані форм, кастомні дані

Ім'я .md-файлу — це ім'я шаблону. home.md → home.html.twig.

Frontmatter сторінки

Кожен .md-файл починається з YAML frontmatter:

---
title: Розробка під заказ
slug: custom-development
date: 2024-11-15
published: true
template: service-detail
taxonomy:
    category: [services]
    tag: [php, laravel, api]
metadata:
    description: 'Розробка веб-додатків на PHP/Laravel'
    keywords: 'розробка, laravel, api'
hero_image: hero.jpg
show_sidebar: true
---

## Розробка веб-додатків

Текст сторінки в **Markdown** з підтримкою shortcodes...

Колекції та листинги

Шаблон blog.html.twig — листинг дочірніх сторінок:

{% set posts = page.children.visible.order('date', 'desc').slice(0, 10) %}

{% for post in posts %}
<article class="post-card">
    <time datetime="{{ post.date|date('Y-m-d') }}">{{ post.date|date('d.m.Y') }}</time>
    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
    {% if post.header.summary %}
        <p>{{ post.header.summary }}</p>
    {% else %}
        <p>{{ post.content|striptags|slice(0, 200) }}…</p>
    {% endif %}
    {% if post.header.hero_image %}
        <img src="{{ page.media[post.header.hero_image].url }}" alt="{{ post.title }}">
    {% endif %}
</article>
{% endfor %}

{{ page.children.paginate(10) }}

Плагіни та функціональність

Grav розширюється плагінами через GPM (Grav Package Manager):

bin/gpm install form           # форми
bin/gpm install login          # авторизація користувачів
bin/gpm install sitemap        # XML-sitemap
bin/gpm install seo            # SEO-метатеги
bin/gpm install shortcode-core # shortcodes у Markdown
bin/gpm install admin          # адміністративна панель

Плагін Form дозволяє створити контактну форму через YAML прямо в frontmatter сторінки без програмування.

Blueprints: кастомні поля

Blueprints описують поля сторінки для форми в админці:

# user/blueprints/pages/service-detail.yaml
title: Service Detail
extends@:
    type: default
    context: blueprints://pages

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        service:
          type: tab
          title: Сервіс
          fields:
            header.intro:
              type: textarea
              label: Вступлення
              size: large
            header.hero_image:
              type: filepicker
              label: Головне зображення
              preview_images: true
              accept: ['image/*']
            header.features:
              type: list
              label: Переваги
              fields:
                .icon:
                  type: text
                  label: Іконка (CSS-клас)
                .text:
                  type: text
                  label: Текст

Продуктивність

Grav кешує сторінки в /cache/ автоматично. Налаштування в system.yaml:

cache:
  enabled: true
  driver: auto       # auto вибирає між file, apc, memcache, redis
  lifetime: 604800   # 7 днів
  gzip: true

pages:
  cache_all: true

assets:
  css_pipeline: true    # об'єднати CSS
  js_pipeline: true     # об'єднати JS
  js_minify: true
  css_minify: true

На слабому хостингу без APC/Redis сторінки раздаються з файлового кешу — швидкість сопоставима зі статичними сайтами.

Типова структура проекту