Коли стандартна тема Jekyll не відповідає брендбуку, починається кастомізація. Ми налаштовуємо Jekyll-теми під ключ: від перевизначення шаблонів до впровадження кастомних SCSS-стилів та плагінів. За 5 років роботи з Jekyll ми виконали понад 20 проєктів — від простих блогів до багатосторінкових сайтів з 5000+ сторінками. Кастомізація економить до 40% часу в порівнянні зі створенням теми з нуля, а готовий сайт працює на 30% швидше типових рішень на CMS.
Основні способи поширення тем
Існує два підходи: gem-based (тема як Ruby gem) та remote theme (з GitHub). Gem-based теми встановлюються через Bundler, їх файли зберігаються в директорії Ruby gems. Remote theme копіюється напряму при збірці. Механізм кастомізації схожий: файли в корені проєкту перекривають файли теми. Однак є нюанси.
| Характеристика | Gem-based | Remote theme |
|---|---|---|
| Установка | gem "minima" в Gemfile |
remote_theme: "owner/repo" |
| Локація файлів | В gems директорії | Копіюються в _sass/, _layouts/ |
| Гнучкість кастомізації | Повний override | Обмежений override (складніше перевизначити парціали) |
| Рекомендація | Для детального налаштування | Для швидкого старту |
Для gem-based використовуємо команду bundle exec jekyll theme-files, щоб побачити всі файли теми, і копіюємо потрібні в проєкт. Як описано в Jekyll documentation.
Як перевизначити шаблони в Jekyll?
Для override скопіюйте файл з gem в корінь проєкту, зберігши структуру папок. Наприклад, скопіювати лейаут поста:
cp $(bundle info --path minima)/_layouts/post.html _layouts/post.html Після цього редагуємо скопійований файл. Jekyll при збірці використовує файл з кореня проєкту, а не з gem. Це стандартний механізм для всіх шляхів: _layouts/, _includes/, _sass/.
Налаштування через _config.yml та кастомізація стилів
Більшість тем читають параметри з _config.yml. Приклад для Minimal Mistakes:
remote_theme: "mmistakes/[email protected]" minimal_mistakes_skin: "air" locale: "uk-UA" title: "Назва сайту" name: "Команда" description: "Опис" author: name: "Ім'я" avatar: "/assets/images/avatar.jpg" bio: "Короткий опис" links: - label: "Email" icon: "fas fa-fw fa-envelope-square" navigation: - title: "Головна" url: / - title: "Блог" url: /blog/ Зверніть увагу: параметри тем часто описані в документації. Ми завжди перевіряємо актуальну версію теми.
Gem-теми зазвичай дозволяють додати кастомні стилі через assets/css/style.scss. Для Minima:
--- --- @import "minima"; :root { --base-font-size: 16px; --base-line-height: 1.7; --brand-color: #2563eb; } .site-header { border-top: 4px solid var(--brand-color); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } Для Minimal Mistakes — через _sass/minimal-mistakes/_variables.scss (скопійований з gem). Такий підхід гарантує, що зміни не загубляться при оновленні теми (якщо не перезаписувати при оновленні).
Перевизначення шаблонів Liquid та управління навігацією
Приклад: додати таблицю змісту (TOC) в лейаут поста. Створюємо _layouts/post.html з умовою:
--- layout: default --- <article> <header>...</header> {% if page.toc %} <aside class="toc"> <h2>Зміст</h2> {% include toc.html html=content %} </aside> {% endif %} <div class="post-content">{{ content }}</div> </article> Для складних меню використовуємо _data/navigation.yml, де визначаємо ієрархію пунктів. В _includes/header.html виводимо їх через цикл з перевіркою на підпункти.
Кастомні компоненти та часті проблеми
Якщо тема не передбачає потрібний елемент (наприклад, CTA-банер), створюємо кастомний парціал в _includes/. Парціали приймають параметри і легко вставляються через {% include %}.
Типові помилки при кастомізації
- Конфлікт імен файлів: якщо скопійований файл не відповідає структурі, Jekyll не підхопить його.
- Застарілі змінні: при оновленні теми деякі змінні можуть бути видалені.
- Проблеми з залежностями: плагіни вимагають вказівки в Gemfile.
Ми перевіряємо збірку після кожної зміни і використовуємо bundle exec jekyll serve з флагом --verbose для діагностики.
| Мета кастомізації | Підхід |
|---|---|
| Зміна колірної схеми | CSS custom properties, SCSS variables |
| Додавання нового типу сторінок | Створення нового layout та колекції |
| Інтеграція зовнішніх сервісів | Парціали, плагіни |
Як проходить процес кастомізації?
- Аналіз — вивчаємо поточну тему та вимоги до кастомізації.
- Проектування — обираємо стратегію: gem або remote theme.
- Налаштування конфігу — прописуємо параметри теми.
- Override шаблонів — копіюємо та редагуємо потрібні файли.
- Кастомізація стилів — підключаємо кастомні SCSS/CSS.
- Додавання компонентів — створюємо парціали для відсутніх елементів.
- Тестування — перевіряємо локально та на CI.
- Деплой — публікуємо на хостингу.
Що входить в кастомізацію Jekyll-теми?
При замовленні кастомізації Jekyll-теми під ключ ми надаємо:
- аналіз поточної теми та список змін;
- налаштування
_config.ymlтаGemfile; - перевизначення шаблонів (layout, includes);
- кастомізацію стилів (SCSS, CSS custom properties);
- додавання кастомних компонентів;
- інтеграцію аналітики та коментарів;
- тестування на всіх сторінках;
- інструкцію з оновлення теми;
- доступ до репозиторію проєкту.
Терміни та вартість
Терміни налаштування залежать від обсягу: просте налаштування через конфіг та CSS — від 1 до 2 днів. Override шаблонів та додавання кастомних компонентів — від 3 до 5 днів. Точну вартість розраховуємо індивідуально, виходячи зі складності теми та вимог. Зв'яжіться з нами — оцінимо проєкт безкоштовно.
Ми працюємо з Jekyll більше 5 років, виконали понад 20 проєктів на статичних сайтах. Гарантуємо результат: сайт відповідатиме вашим очікуванням та Core Web Vitals. Замовте кастомізацію Jekyll-теми під ключ — отримайте сучасний статичний сайт.
Для довідки: Jekyll — популярний генератор статичних сайтів, що використовується для блогів та документації.