Создание сайта часто превращается в долгую возню с базами данных, панелями администрирования, бесконечными обновлениями движка и латанием дыр в безопасности. А ведь есть путь проще. Статические генераторы возвращают веб-разработку к её корням, когда сайт был просто набором HTML-файлов на сервере, который отдавал их по запросу с молниеносной скоростью. Jekyll стал одним из первых таких инструментов, который доказал, что для блога, портфолио или документации совсем не обязательно поднимать тяжёлую CMS.
Этот движок написан на Ruby и берёт обычные текстовые файлы, написанные в Markdown или другом разметочном языке, прогоняет их через шаблоны и выдаёт готовый статический сайт. Никаких баз данных, никаких PHP-обработчиков, никаких уязвимостей в плагинах. Просто HTML, CSS и немного JavaScript при желании. Такой подход даёт безумную скорость загрузки, минимальные требования к серверу и почти нулевые расходы на хостинг. Многие крупные проекты вроде технической документации языков программирования и блогов разработчиков построены именно так.
В материале разобран полный путь от чистой системы Ubuntu 22.04 до работающего сайта на Jekyll, доступного через браузер. Каждый шаг сопровождается пояснением, чтобы не оставалось белых пятен и было понятно, зачем выполняется та или иная команда.
Почему стоит обратить взгляд на Jekyll и где этот инструмент раскрывается лучше всего
Прежде чем погружаться в установку, стоит понять, зачем вообще нужен Jekyll и какие задачи он решает изящнее конкурентов. Это статический генератор сайтов, что означает простую вещь. Контент пишется в текстовых файлах, обычно с разметкой Markdown, а движок один раз превращает их в готовые HTML-страницы. После сборки никаких процессов на сервере не запускается, только отдача файлов. Сравните это с типичным WordPress, где каждый запрос пользователя порождает запросы к базе, выполнение PHP-скриптов и сборку страницы налету.
Скорость работы такого сайта поражает даже на самых слабых серверах. Открытие страницы занимает доли секунды, потому что сервер не думает, он просто отдаёт готовый файл. Безопасность тоже выходит на принципиально другой уровень. Атаковать нечего, нет ни базы данных с паролями, ни админ-панели с формой входа, ни плагинов с возможными уязвимостями. Хостинг таких сайтов обходится копейки, а часто и вовсе ничего, потому что многие сервисы вроде GitHub Pages принимают Jekyll нативно.
Где Jekyll показывает себя во всей красе. Личные блоги, технические заметки разработчиков, документация к проектам с открытым исходным кодом, посадочные страницы продуктов, портфолио дизайнеров и фотографов, корпоративные сайты с редко меняющимся контентом. Если контент обновляется не каждые пять минут и не требует пользовательских аккаунтов с авторизацией, Jekyll справится отлично. Для интернет-магазина или социальной сети он, конечно, не подойдёт, но это и не его поле боя.
Движок умеет работать с постоянными ссылками, категориями, тегами, страницами и записями. Встроенная поддержка шаблонов Liquid позволяет создавать сложные структуры с переиспользуемыми блоками. Многие темы доступны бесплатно, а собственная вёрстка пишется один раз и обслуживает сайт годами без переделок.
Подготовка свежей системы Ubuntu 22.04 к работе и установка базовых пакетов окружения
Любая серьёзная работа с серверным программным обеспечением начинается с приведения системы в порядок. Свежеустановленная Ubuntu обычно содержит устаревшие версии пакетов, потому что образ собран на момент релиза, а с тех пор накопились обновления. Без актуализации репозиториев и пакетов можно нарваться на странные ошибки при установке Ruby или зависимостей.
Первая команда обновляет список доступных пакетов из репозиториев. Она не трогает сами пакеты, только обновляет информацию о том, какие версии сейчас доступны. Вторая команда уже скачивает и устанавливает обновлённые версии всего, что установлено в системе. Флаг -y автоматически отвечает yes на все вопросы установщика, что удобно при автоматизации, но требует осторожности на боевых серверах.
apt update -y
apt upgrade -y
После обновления системы устанавливается набор базовых утилит, которые понадобятся в процессе. Пакет make нужен для сборки нативных расширений Ruby-гемов, потому что некоторые из них требуют компиляции из исходников. Метапакет build-essential тянет за собой компилятор gcc, библиотеки и заголовочные файлы для разработки. Утилита curl пригодится для скачивания файлов из командной строки, git нужен для работы с репозиториями кода, а tree поможет наглядно посмотреть структуру создаваемого проекта Jekyll.
apt install make build-essential curl git tree -y
Этот набор инструментов считается классическим джентльменским набором для любого Linux-сервера, на котором планируется хоть какая-то разработка. Без build-essential большинство гемов Ruby просто не соберутся, потому что они написаны частично на C для скорости работы. Многие новички сталкиваются с непонятными ошибками компиляции именно потому, что пропускают этот шаг.
Развёртывание интерпретатора Ruby и настройка пользовательского окружения для гемов
Поскольку Jekyll написан на Ruby, без интерпретатора этого языка движок просто не запустится. Ruby известен своей элегантностью и выразительностью, а сообщество вокруг него создало тысячи библиотек, которые в экосистеме называются гемами. Установить Ruby можно несколькими способами, но для большинства случаев подойдёт стандартный пакет из репозиториев Ubuntu, который ставится одной командой.
apt install ruby ruby-dev -y
Стоит разобрать, почему ставятся два пакета. Первый, ruby, содержит сам интерпретатор и стандартную библиотеку языка. Второй, ruby-dev, добавляет заголовочные файлы и инструменты разработки, необходимые для компиляции тех самых нативных расширений в гемах. Без ruby-dev многие популярные библиотеки откажутся устанавливаться с туманными ошибками про отсутствие mkmf.rb или подобными загадочными сообщениями.
После установки Ruby приходит время настроить, куда менеджер гемов будет складывать устанавливаемые библиотеки. По умолчанию gem пытается ставить гемы в системные директории, что требует прав суперпользователя и создаёт ворох проблем. Гораздо разумнее настроить установку гемов в домашнюю папку пользователя, чтобы не загрязнять систему и иметь полный контроль над окружением. Это делается через переменные окружения, которые задаются в файле .bashrc.
nano ~/.bashrc
В открытый редактор nano добавляются две строки в самый конец файла. Переменная GEM_HOME указывает, где физически будут лежать установленные гемы. Переменная PATH расширяется так, чтобы оболочка знала, где искать исполняемые файлы из установленных гемов. Без второй переменной можно установить Jekyll, но команда jekyll не запустится, потому что система не найдёт нужный бинарник.
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH
После сохранения файла нужно либо перезайти в систему, либо вручную применить изменения. Команда source перечитывает указанный файл в контексте текущей сессии, что мгновенно подхватывает новые переменные окружения без перезагрузки или повторного входа.
source ~/.bashrc
Теперь можно ставить сам Jekyll и дополнительный инструмент bundler. Менеджер bundler управляет зависимостями Ruby-проектов, гарантируя, что у каждого проекта будут именно те версии библиотек, которые ему нужны. Это спасает от хаоса, когда один проект требует одну версию гема, а другой совсем другую.
gem install jekyll bundler
Команда отработает не мгновенно. Менеджер скачает Jekyll и все его зависимости, после чего скомпилирует те части, что написаны на C. На свежем сервере процесс занимает от тридцати секунд до пары минут в зависимости от скорости интернета и мощности машины.
Создание первого проекта сайта и разбор сгенерированной файловой структуры
Когда инфраструктура готова, наступает самый приятный момент. Создание реального проекта. Jekyll умеет генерировать заготовку сайта одной командой, после чего разработчику остаётся только наполнять её контентом и крутить настройки внешнего вида. Имя проекта обычно совпадает с будущим доменом сайта, но это не обязательное правило, а просто удобная договорённость.
jekyll new jekyll.example.com
После запуска команды Jekyll создаст одноимённую папку, скопирует в неё базовые файлы темы по умолчанию и сразу же запустит bundler для установки всех зависимостей проекта. В терминале появится довольно длинный вывод с информацией о скачиваемых гемах.
Bundler: Using jekyll 4.2.2
Bundler: Fetching jekyll-seo-tag 2.8.0
Bundler: Fetching jekyll-feed 0.16.0
Bundler: Installing jekyll-feed 0.16.0
Bundler: Installing jekyll-seo-tag 2.8.0
Bundler: Fetching minima 2.5.1
Bundler: Installing minima 2.5.1
Bundler: Bundle complete! 7 Gemfile dependencies, 31 gems now installed.
Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.Don't run Bundler as root. Bundler can ask for sudo if it is needed, and
Bundler: installing your bundle as root will break this application for all non-root
Bundler: users on this machine.
New jekyll site installed in /root/jekyll.example.com.
В выводе видны три ключевые зависимости. Гем jekyll-seo-tag автоматически добавляет на страницы метатеги для поисковой оптимизации. Расширение jekyll-feed генерирует RSS-ленту для блога, без которой подписчики не смогут отслеживать новые публикации в своих читалках. Тема minima это минималистичный шаблон оформления, который Jekyll использует по умолчанию. Она опрятна, читабельна и подходит для быстрого старта, хотя многие потом меняют её на что-то более выразительное.
Заметьте предупреждение про работу из-под root. Bundler честно намекает, что запуск под суперпользователем плохая идея. На локальной разработке это терпимо, но на боевом сервере крайне рекомендуется создавать отдельного пользователя для работы с проектом. Это снижает риски и упрощает управление правами доступа.
Чтобы оценить, что именно нагенерировал Jekyll, удобно посмотреть структуру созданной папки с помощью утилиты tree, которую устанавливали в самом начале.
tree jekyll.example.com
Вывод покажет аккуратное дерево файлов и папок.
jekyll.example.com
??? 404.html
??? about.markdown
??? _config.yml
??? Gemfile
??? Gemfile.lock
??? index.markdown
??? _posts
??? 2022-09-25-welcome-to-jekyll.markdown
1 directory, 7 files
Каждый файл здесь несёт смысловую нагрузку. Страница 404.html показывается посетителям, когда они забредают на несуществующий адрес. Файл about.markdown это страница "О сайте", которую принято заполнять описанием проекта или автора. Конфигурационный файл _config.yml содержит глобальные настройки сайта, такие как заголовок, описание, имя автора, базовый URL и десятки других параметров. Gemfile и Gemfile.lock описывают зависимости проекта для bundler. Главная страница лежит в index.markdown. А папка _posts хранит записи блога, причём имена файлов обязаны начинаться с даты в формате ГГГГ-ММ-ДД, иначе Jekyll их проигнорирует.
Запуск встроенного веб-сервера Jekyll и подключение библиотеки webrick для работы под современной версией Ruby
Когда проект создан, его нужно скомпилировать и запустить локальный сервер для просмотра. Jekyll поставляется со встроенным сервером разработки, который отслеживает изменения в файлах и автоматически пересобирает сайт. Сначала нужно перейти в директорию проекта, потому что все команды Jekyll работают относительно неё.
cd jekyll.example.com
Прежде чем стартовать сервер, есть один нюанс. Начиная с Ruby версии 3.0 из стандартной поставки языка убрали библиотеку webrick, которая раньше использовалась Jekyll для встроенного веб-сервера. Это было сделано для уменьшения размера базового пакета, но создало проблему для пользователей Jekyll. Теперь webrick нужно добавлять явно в зависимости проекта.
bundle add webrick
Команда bundle add делает две вещи одновременно. Она прописывает webrick в файл Gemfile проекта и тут же устанавливает этот гем со всеми его зависимостями. После этого можно стартовать сервер.
jekyll serve --host=0.0.0.0
Параметр host со значением 0.0.0.0 говорит серверу слушать соединения на всех сетевых интерфейсах машины, а не только на локальном loopback. Без этого флага сайт будет доступен только с самой машины, что неудобно при работе на удалённом сервере. На локальной машине этот параметр можно опустить, тогда сервер привяжется только к 127.0.0.1.
Успешный запуск сопровождается информативным выводом.
Configuration file: /root/jekyll.example.com/_config.yml
Source: /root/jekyll.example.com
Destination: /root/jekyll.example.com/_site
Incremental build: disabled. Enable with --incremental
Generating...
Jekyll Feed: Generating feed for posts
done in 0.375 seconds.
Auto-regeneration: enabled for '/root/jekyll.example.com'
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.
В выводе видно много полезной информации. Source указывает на исходные файлы проекта, а Destination на папку _site, куда складывается готовый собранный сайт. Именно содержимое _site нужно будет позже копировать на боевой веб-сервер. Время сборки в виде "done in 0.375 seconds" показывает, насколько быстро работает движок даже на скромном железе. Auto-regeneration enabled означает важную вещь. Jekyll следит за файлами проекта и при любом изменении автоматически пересобирает сайт. Это бесценно при разработке, потому что не нужно каждый раз вручную запускать сборку.
Открытие сайта через браузер и проверка корректности работы установленного движка
Теперь сайт работает и слушает на порту 4000. Чтобы его увидеть, открывается любой современный браузер и в адресную строку вводится URL вида http://your-server-ip:4000, где your-server-ip заменяется на реальный IP-адрес сервера. Если работа ведётся локально на той же машине, можно использовать http://localhost:4000 или http://127.0.0.1:4000.
Перед глазами должна появиться стандартная страница темы minima с приветственным постом, ссылками на разделы "About" и архив записей. Это и есть базовый шаблон, от которого начинается дальнейшая работа над уникальным дизайном сайта.
Если страница не открывается, чаще всего виноваты три вещи. Файрвол на сервере блокирует порт 4000, и нужно либо открыть его в правилах, либо использовать другой порт через флаг --port. Сервер запущен с привязкой к localhost вместо 0.0.0.0, что не позволяет подключаться извне. Или браузер просто не достучался до сервера из-за сетевых настроек провайдера или промежуточных маршрутизаторов.
Чтобы остановить работающий сервер, в терминале нужно нажать сочетание клавиш Ctrl+C. Сервер корректно завершит работу, освободит порт и вернёт управление командной строке. Это стандартный способ остановки для большинства консольных программ в Linux.
Тонкости работы с конфигурацией Jekyll и расширение базовых возможностей сайта под реальные задачи
Базовая установка это только начало пути. Настоящая работа с Jekyll начинается, когда нужно адаптировать сайт под конкретные нужды. Главным инструментом тонкой настройки служит файл _config.yml, лежащий в корне проекта. Туда вписываются такие параметры, как заголовок сайта, описание для поисковиков, имя автора, ссылка на электронную почту, базовый URL для развёртывания на поддиректории и многое другое.
Темы оформления меняются простой правкой в Gemfile и _config.yml. Существуют тысячи бесплатных тем для Jekyll, от строгих корпоративных до причудливых блогерских. Для смены темы достаточно прописать новый гем темы в Gemfile, запустить bundle install и указать имя темы в _config.yml. Через минуту сайт получает совершенно новый облик без единой строчки кода.
Плагины расширяют функциональность движка. Уже упомянутые jekyll-seo-tag и jekyll-feed это лишь верхушка айсберга. Есть плагины для пагинации, для подсветки синтаксиса, для генерации sitemap, для интеграции с системами комментариев. Установка плагина обычно сводится к добавлению строки в Gemfile и упоминанию его в _config.yml в секции plugins.
Развёртывание собранного сайта тоже заслуживает отдельного разговора. После выполнения jekyll build готовый сайт лежит в папке _site. Её содержимое можно залить на любой веб-сервер, будь то nginx, apache или даже простейший хостинг с поддержкой статики. Многие выбирают GitHub Pages, потому что эта платформа умеет сама собирать Jekyll-сайты из репозитория и предоставляет хостинг бесплатно. Достаточно запушить исходники в репозиторий с правильными настройками, и сайт сам появится по адресу username.github.io.
Есть несколько типичных ловушек, в которые попадают новички. Файлы постов должны называться строго по шаблону ГГГГ-ММ-ДД-название.md, иначе пост просто не появится на сайте. Front matter, тот самый блок с тремя дефисами в начале файлов, обязателен почти для всего, что должно обрабатываться движком. Изменения в _config.yml требуют перезапуска сервера, потому что автоматическая перегенерация на этот файл не распространяется. И конечно, кеш браузера часто прячет свежие изменения, так что при странном поведении первым делом стоит попробовать жёсткое обновление страницы.
Что даёт освоение Jekyll специалисту и куда движется экосистема статических генераторов
Освоение Jekyll открывает дверь в целый мир статических генераторов сайтов, которые переживают настоящий расцвет последние годы. Принципы, заложенные в Jekyll, переняли и развили десятки других инструментов. Hugo на языке Go собирает сайты за миллисекунды и подходит для огромных проектов. Eleventy предлагает гибкость JavaScript-экосистемы. Next.js и Gatsby добавили к статической сборке возможности React. Но Jekyll остаётся отличной точкой входа, потому что прост, документирован и обкатан годами на тысячах сайтов.
Знание Jekyll пригодится разработчику в самых разных ситуациях. Быстрое создание сайта-визитки для нового проекта, развёртывание технической документации к собственным библиотекам, запуск личного блога, который не будет требовать обслуживания и оплаты дорогого хостинга, помощь команде с настройкой статической документации продукта. Это та самая универсальная отвёртка, которую полезно иметь в рабочем ящике любого айтишника.
Философия статических сайтов отражает более глубокую тенденцию в веб-разработке. Возвращение к простоте, отказ от ненужных слоёв сложности, фокус на скорости и надёжности. После десятилетий гонки за функциональностью, которая привела к тому, что обычный блог стал требовать гигабайт памяти и сложных стеков технологий, индустрия начала задумываться о цене такой избыточности. Jekyll и его собратья предлагают альтернативу. Контент важнее технологии, и если можно обойтись без базы данных, без сервера приложений, без сложной инфраструктуры, то почему бы и не обойтись. Сайт, который продолжит работать через десять лет на любом хостинге, который не сломается от обновлений и не потребует срочного латания дыр, это редкая ценность в постоянно меняющемся техническом ландшафте.
Канал сайта в Telegram
Канал сайта на YouTube