Розробка статичного сайту на Jekyll
Jekyll — генератор статичних сайтів на Ruby, створений Томом Престон-Вернером з GitHub. Це перший з розповсюджених SSG, навколо якого сформувалася екосистема. Пряма інтеграція з GitHub Pages робить його стандартом для документації open-source проектів, персональних блогів та невеликих корпоративних сайтів без складної інфраструктури.
Архітектура проекту
mysite/
├── _config.yml # Основна конфігурація
├── _config.dev.yml # Переопис для розробки
├── _data/ # YAML/JSON/CSV дані
│ ├── navigation.yml
│ └── team.yml
├── _drafts/ # Чорновики постів
├── _includes/ # Переиспользуемые фрагменти (аналог partial)
│ ├── head.html
│ ├── header.html
│ └── footer.html
├── _layouts/ # Базові шаблони
│ ├── default.html
│ ├── post.html
│ └── page.html
├── _posts/ # Блог-пости (YYYY-MM-DD-slug.md)
├── _sass/ # SCSS файли
├── _site/ # Скомпільований результат (gitignore)
├── assets/
│ ├── css/main.scss
│ └── js/
├── collections/ # Користувацькі колекції
└── index.md
Конфігурація _config.yml
title: "Назва сайту"
description: "Опис для SEO"
url: "https://example.com"
baseurl: "" # Пусто для кореневого домену, "/subdir" для поддиректорії
author:
name: "Команда"
email: "[email protected]"
# Структура URL
permalink: /blog/:year/:month/:slug/
# Markdown-процесор
markdown: kramdown
kramdown:
input: GFM
hard_wrap: false
syntax_highlighter: rouge
syntax_highlighter_opts:
block:
line_numbers: true
# SASS
sass:
style: compressed
sass_dir: _sass
# Плагіни
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
- jekyll-paginate-v2
- jekyll-redirect-from
# Виключити зі збірки
exclude:
- Gemfile
- Gemfile.lock
- node_modules
- vendor
- README.md
- "*.sh"
# Користувацькі колекції
collections:
services:
output: true
permalink: /services/:slug/
team:
output: true
permalink: /team/:slug/
# Значення за замовчуванням для front matter
defaults:
- scope:
path: "_posts"
type: "posts"
values:
layout: "post"
author: "default"
comments: true
- scope:
path: "_services"
type: "services"
values:
layout: "service"
Шаблони Liquid
Jekyll використовує Liquid — мова шаблонів від Shopify. Синтаксис простіший за Go Templates:
<!-- _layouts/default.html -->
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'uk' }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}
</title>
{% seo %}
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
</head>
<body>
{% include header.html %}
<main>
{{ content }}
</main>
{% include footer.html %}
<script src="{{ '/assets/js/main.js' | relative_url }}" defer></script>
</body>
</html>
<!-- _layouts/post.html -->
---
layout: default
---
<article class="post">
<header class="post__header">
<h1>{{ page.title }}</h1>
<time datetime="{{ page.date | date_to_xmlschema }}">
{{ page.date | date: "%d %B %Y" }}
</time>
{% if page.tags %}
<ul class="tags">
{% for tag in page.tags %}
<li><a href="/tags/{{ tag | slugify }}/">{{ tag }}</a></li>
{% endfor %}
</ul>
{% endif %}
</header>
{% if page.image %}
<img src="{{ page.image | relative_url }}" alt="{{ page.title }}" loading="eager">
{% endif %}
<div class="post__content">{{ content }}</div>
{% if page.related_posts %}
{% include related-posts.html posts=page.related_posts %}
{% endif %}
</article>
Робота з даними
# _data/services.yml
- title: "Розробка веб-сайтів"
slug: "web-development"
icon: "code"
description: "Корпоративні сайти, лендинги, інтернет-магазини"
features:
- "Адаптивна верстка"
- "SEO-оптимізація"
- "Інтеграції з CRM"
<!-- _includes/services-grid.html -->
<div class="services-grid">
{% for service in site.data.services %}
<div class="service-card">
<div class="service-card__icon">{{ service.icon }}</div>
<h3>{{ service.title }}</h3>
<p>{{ service.description }}</p>
<ul>
{% for feature in service.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
<a href="/services/{{ service.slug }}/">Докладніше</a>
</div>
{% endfor %}
</div>
Пагінація через jekyll-paginate-v2
# _config.yml
pagination:
enabled: true
per_page: 12
permalink: '/page/:num/'
title: ':title - сторінка :num'
sort_field: 'date'
sort_reverse: true
<!-- blog/index.html -->
---
layout: default
title: Блог
pagination:
enabled: true
collection: posts
category: news
---
<div class="posts-grid">
{% for post in paginator.posts %}
{% include post-card.html post=post %}
{% endfor %}
</div>
{% if paginator.total_pages > 1 %}
<nav class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}">← Назад</a>
{% endif %}
<span>{{ paginator.page }} з {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}">Вперед →</a>
{% endif %}
</nav>
{% endif %}
SCSS та ассети
Jekyll обробляє SCSS нативно через _sass/. Файл assets/css/main.scss повинен починатися з двох рядків front matter:
---
---
@import "variables";
@import "base";
@import "components/header";
@import "components/footer";
@import "components/post-card";
@import "pages/home";
@import "pages/blog";
GitHub Actions для розгортання
# .github/workflows/jekyll.yml
name: Build and Deploy Jekyll
on:
push:
branches: [main]
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: ruby/setup-ruby@v1
with:
ruby-version: '3.2'
bundler-cache: true
- name: Build
env:
JEKYLL_ENV: production
run: bundle exec jekyll build --config _config.yml
- name: Deploy to S3
run: aws s3 sync _site/ s3://${{ secrets.S3_BUCKET }} --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
Терміни
Сайт на готовій темі з користувацьким контентом та базовою настройкою — 3–5 днів. Розробка з нуля: лейаути, SCSS, колекції, дані, пагінація, CI/CD — 2–3 тижні. Крупний сайт з багатьма колекціями, багатомовністю (jekyll-multiple-languages-plugin) та складними шаблонами — 1–2 місяця.