Блог на Jekyll. Быстрый старт

Как правило, основная задача “быстрого старта” - познакомить пользователя с возможностями своей системы, функционалом, интерфейсом, настройками. Сделать это максимально просто и без особых временных затрат. Jekyll также дает еще и пощупать результат своей работы, что также приятно.

По своему опыту скажу, что быстрый старт - хорошая отправная точка для тех, кто уже имеет понимание всего происходящего в подобных генераторах статических страниц. Для себя я позднее выбрал путь попроще, но обо всем по порядку.

Подготовка к использованию

Как писал ранее, осуществить старт с Jekyll достаточно просто, однако, перед этим необходимо убедиться, что ваша система готова к использованию. Необходимо проверить наличие или провести установку:

  • Ruby, начиная со 2-ой версии.
  • RubyGems
  • NodeJS или другую среду выполнения для JavaScript

Также следует отметить, что официально Jekyll на Windows не поддерживается, но вариант вполне работоспособный. Дополнительно понадобится установить Ruby DevKit, а также просто прочитать полезную информацию и быть готовым, если что-то пойдет не так :) Исчерпывающая информация содержится на странице Jekyll on Windows официальной документации, а также на страницах проекта Run Jekyll on Windows. После необходимых приготовлений можно одной командой установить Jekyll. Удобнее всего это делать через RubyGems, прописав в консоли:

 $ gem install jekyll

Большой плюс подобной установки - это то, что по этой команде будет установлен Jekyll со всеми зависимостями, и нам не придется заботиться об этом дополнительно. Это все сработает, даже если не вникать во все новые понятия, но лучше все же задержаться на вышеуказанных сайтах и усвоить общую информацию… всегда будет полезно при решении проблем.

Первый запуск

Если по ходу установки возникли, какие-то неполадки, то рекомендую обращаться к официальной странице. Самые часто встречающиеся неполадки там описаны. Проверьте еще раз всю последовательность действий и повторите при необходимости. По своему опыту скажу, что у меня тут прошла достаточно гладко вся процедура, особенно на linux. На Windows надо было не заниматься самодеятельностью, а сразу внимательно читать полезные советы.

Далее прописываем еще пару строчек в консоли и получаем первый рабочий экземпляр блога:

 $ jekyll new myblog
 New jekyll site installed in path/to/myblog
 $ cd myblog
 $ jekyll serve

Jekyll создает в текущей директории новую папку с названием “myblog” и размещает в ней все необходимые каталоги и файлы для первого запуска и ознакомления. Последней командой Jekyll запускает локальный сервер для разработки, доступный по адресу http://localhost:4000/. Сразу можно наблюдать результат работы в браузере.

Структура папки

На момент версии Jekyll v3 структура папок выглядит следующим образом:

 myblog
|   about.md
|   feed.xml
|   index.html
|   _config.yml
|+---- css
|+---- _includes
|+---- _layouts
|+---- _posts
|+---- _sass

Вся эта структура, в общем и целом, предназначена для настройки конечного вида статической страницы или набора страниц сайта. Все что здесь находится - это наполнение и оформление сайта. Само ядро jekyll’а находится там, где ему и положено быть - в папке с остальными gem’ами (для Windows это может выглядеть примерно так: C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems). Вкратце рассмотрим основное содержимое.

_config.yml - главный конфигурационный файл. В нём редактируются глобальные переменные, переменные среды, переменные, используемые при сборке и локальном запуске проекта. Также этот файл может хранить какие-то кастомные настройки, которые впоследствии можно будет использовать в шаблонах кода.

_includes - папка для хранения различных частей кода (в основном), а также, например, иконок и изображений. С помощью тега {% include example.html %} Jekyll позволяет включать наш блок кода в любой другой. Таким образом значительно упрощается повторное использование одинаковых элементов кода.

_layouts - папка для хранения шаблонов страниц. Тут шаблон выступает в роли некоей “обертки” для содержимого. Служит, в основном, для включения различного контента в единое оформление. Например, что касается блога - имеются разные статьи, разные по содержанию, но оформлены они должны быть одинаково. Включение содержимого статей в шаблон осуществляется посредством тега {{ content }}, а в самой статье определенным образом делается ссылка на используемый шаблон. Таким образом очень удачно происходит отделение смысловой части от оформления.

_posts - папка со статьями. Здесь хранится основное содержимое вашего сайта в виде постов. Важно отметить, названия файлов в этой папке должны быть представлены в формате: год-месяц-день-название.extension

В папках _sass и css находятся файлы со стилями вашего блога. Благодаря поддержке Jekyll Sass, можно создавать в _sass исходники стилей в виде .scss или .sass файлов и Jekyll при сборке копилирует все в один единый style.css на выходе в папку css.

Резюме

Таким образом, с небольшой предварительной подготовкой Jekyll позволяет быстро представить рабочий макет будущего проекта. Если количество папок и файлов вводит в небольшое заблуждение, начинать работать с Jekyll можно и иначе, создав структуру гораздо проще и постепенно её наращивая по мере необходимости. В дальнейшем я опишу именно такой путь, от простого к сложному, по которому пошел сам.