Разработка сайта на Jekyll (Static Site Generator)
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]"
# Permalink структура
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: 'ru' }}">
<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 месяца.