Как создать блог на Jekyll: статические сайты для разработчиков

Почему Jekyll?

Привет, меня зовут Кирилл Алехин — предприниматель, атишник и создатель веб-студии XSL в ОАЭ. В мире, где динамические CMS вроде WordPress доминируют, я часто задаюсь вопросом: зачем усложнять, если можно упростить? Jekyll — это статический генератор сайтов, который идеально подходит разработчикам, ценящим скорость, безопасность и полный контроль над контентом.

Статические сайты не требуют баз данных, не уязвимы к SQL-инъекциям и работают молниеносно. Jekyll, написанный на Ruby, позволяет писать посты в Markdown, использовать шаблоны Liquid и развертывать проект за считанные минуты. Если вы разработчик и хотите блог без лишних наворотов — это ваш выбор.

Что понадобится для старта

Прежде чем приступить, убедитесь, что у вас установлены:

  • Ruby (версия 2.5.0 или выше)
  • RubyGems
  • Bundler
  • Git (для деплоя на GitHub Pages)

Если вы работаете на macOS или Linux, Ruby, скорее всего, уже установлен. Пользователям Windows рекомендую использовать RubyInstaller или подсистему WSL.

Установка Jekyll

Откройте терминал и выполните команду:

gem install bundler jekyll

Это установит Jekyll и Bundler — менеджер зависимостей для Ruby-проектов. После установки создайте новый проект:

jekyll new мой-блог

Перейдите в созданную директорию:

cd мой-блог

И запустите локальный сервер:

bundle exec jekyll serve

Теперь ваш блог доступен по адресу http://localhost:4000. Поздравляю — вы только что создали статический сайт!

Структура проекта

Jekyll использует простую и понятную структуру:

Директория/Файл Назначение
_config.yml Конфигурационный файл с настройками сайта
_posts/ Папка для постов в формате Markdown
_layouts/ Шаблоны страниц (например, default.html)
_includes/ Переиспользуемые блоки кода (например, header.html)
assets/ Статические файлы (CSS, JS, изображения)

Создание первого поста

Посты в Jekyll хранятся в папке _posts и имеют формат ГГГГ-ММ-ДД-название-поста.md. Например:

2024-05-20-как-создать-блог-на-jekyll.md

Откройте файл в любом текстовом редакторе и добавьте метаданные в формате YAML (так называемый «front matter»):

---
layout: post
title: "Как создать блог на Jekyll"
date: 2024-05-20 10:00:00 +0400
categories: разработка
tags: jekyll блог статический-сайт
---

После метаданных пишите содержимое поста в Markdown. Jekyll автоматически сгенерирует HTML-страницу на основе вашего шаблона.

Настройка темы

Jekyll поддерживает темы, которые можно установить через Gemfile. Например, популярная тема Minima уже включена по умолчанию. Чтобы изменить тему:

  1. Найдите тему на RubyGems или GitHub.
  2. Добавьте ее в Gemfile:
gem "название-темы"
  1. Обновите зависимости:
bundle install
  1. Укажите тему в _config.yml:
theme: название-темы

Деплой на GitHub Pages

GitHub Pages — идеальная платформа для хостинга статических сайтов на Jekyll. Вот как развернуть блог:

  1. Создайте репозиторий на GitHub с именем username.github.io, где username — ваш логин.
  2. Склонируйте репозиторий локально:
git clone https://github.com/username/username.github.io
  1. Скопируйте файлы вашего Jekyll-проекта в репозиторий.
  2. Закоммитьте и запушьте изменения:
git add .
git commit -m "Первый деплой блога"
git push origin main

Через несколько минут ваш блог будет доступен по адресу https://username.github.io. GitHub Pages автоматически соберет и развернет проект.

Оптимизация и расширения

Jekyll можно расширять с помощью плагинов. Вот несколько полезных:

  • jekyll-seo-tag — добавляет мета-теги для SEO.
  • jekyll-sitemap — автоматически генерирует карту сайта.
  • jekyll-feed — создает RSS-ленту.

Чтобы установить плагин, добавьте его в Gemfile и обновите зависимости:

gem "jekyll-seo-tag"
bundle install

Заключение

Jekyll — это мощный инструмент для разработчиков, которые хотят создать блог без лишних сложностей. Он быстрый, безопасный и легко настраивается. Если вы устали от громоздких CMS и хотите полный контроль над своим контентом — попробуйте Jekyll.

В нашей студии XSL мы часто используем статические генераторы для проектов, где важна скорость и надежность. Надеюсь, это руководство поможет вам сделать первые шаги в мире статических сайтов.

Удачи в разработке!

от автора

написал в