Почему Jekyll это изумительно?

Почему Jekyll это изумительно?

Jekyll - это простая CMS предназначенная для ведения личных блогов. Но зачем это нужно если существует Wordpress или ModX?

Статья покажет только основные особенности системы. Полное руководство на русском вы сможете найти на сайте Прогрессора или оригинал на оф. сайте Jekyll.

Простота в действии

Jekyll имеет дело лишь с простыми страничками .html. Это значит что сайт не может быть динамическим. Никакого бекенда, баз данных.

Плохо ли это? Конечно нет. Ваш сайт будет молниеносным! Никакого отклика от сервера, только показать HTML.

Безопасность? Статические странички никак не изменить извне.

Система создавалась для ведения личных блогов. Именно персональных. Создать такой сайт для клиента проблематично, так как он должен знать как писать посты на HTML c учетом вашей персонализации (разных классов CSS, особенности структуры поста).

Требования

Jekyll построен на языке Ruby, потому для его работы он необходим. С его помощью так же можно писать расширения.

Базовый фреймворк для установки плагинов и тд.

Скачайте .zip файл, извлеките в любое место. Откройте командную строку, перейдите в каталог и выполните команду:

ruby setup.rb

Установка

Откройте командную строку (Win + R -> cmd), введите:

gem install bundler jekyll

Структура

Jekyll - движок трансформации текста. Текст в выбранном вами формате Markdown, Textile или в чистом HTML (рекомендую, хоть это и более комплексно для написания, но стилизация решает), формирируется в соответствии с файлами шаблонов. В шаблонах идет настройка всего, как будет виглядить URL страницы, какие данные стоит выводить на конкретной странице и тд. Финальным результатом будет статический сайт, расположенный в каталоге _site.

├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
|   └── compress.html
├── _posts
|   ├── 2018-12-22-jekyll-begin.html
|   └── 2000-03-31-mdk2.html
├── _site
|   ├── assets
|   └── search
|   └── .htaccess
|   └── index.html
|   └── 404.html
|   └── feed.xml
├── _sass
|   ├── _base.sass
|   └── _layout.sass
├── _config.yml
├── index.html
├── 404.html
├── .htaccess

_includes - включения, вставки кода, к примеру хедер, который используется на всех страницах.

_layouts - наши шаблоны. К примеру:

<!DOCTYPE html>
<html lang="{{ site.lang }}" prefix="og: http://ogp.me/ns#">

  {% include head.html %}
  
  <body>
    {% include header.html %}
    
     <div class="wrapper">
      {{ content }}
     </div>

    {% include footer.html %}
  </body>
</html>

_posts - посты. Названия исключительно типа ГОД-МЕСЯЦ-ДЕНЬ-НАЗВАНИЕ.html, никаких пробелов и табов.

_site - готовый после сборки сайт. Все содержимое после новой сборки обновляется!

_sass - SASS стили, сборщик сам соберет их в CSS в папку сайта.

Что такое {{ content }}? Это переменная по умолчанию, к примеру мы используем шаблон default на главной странице. Она возьмет все ниже записанное после закрывающего ---. Значит в главном корневом index.html мы делаем такую конструкцию:

---
layout: default
---

Ваш HTML код

Переменные

Это наши данные, которые будут многократно использоваться в шаблонах. Переменные храняться в конфиге _config.yml. Существуют дефолтные значения, такие как port, url, baseurl и множество других. Их можно менять под свои нужды. Так же здесь мы пишем свои, задавая любое название и значение (не путаем с дефолтными).

title: "Predaytor - Программируемъ?"
email: contact@predaytor.com

baseurl: "" 
url: "http://predaytor.com"
name: Predaytor

image: "assets/images/local/predaytor.png"

telegram: predaytor
  
#Options
port: 3000

lang: "ru"

exclude: [
  'Gemfile',
  'Gemfile.lock'
]

Их можно и нужно писать для конкретного файла. Буть то главная страница или статья. Для этого существует YAML-шапка, где и будут наши данные.

Опять же здесь есть ряд значений по умолчанию, изучите документацию.

Liquid - язык для создания шаблонов. Основа построения сайтов на Jekyll.

При билде сайта, Liquid пройдёт каждый файл, и если тот имеет конструкцию в начале файла открывающих и закрывающих --- - будет включен в массив.

---
layout: post  #название шаблона

categories:
  - jekyll
tags:
  - jekyll
  - design
  - cms

permalink: "/t/:categories/:title/"  #вид URL поста

title: "Почему Jekyll это изумительно?"
---
В .yml файлах используйте только пробелы, без табов. Коментарии используют # вместо привычных //

Глобальные и локальные переменные

Здесь как и в любом языке программирования, но со своей спецификой.

В Jekyll с помощью Liquid существуют основные объекты, такие как site, page, post.

site - базовый глобальный объект. Имеет доступ к переменным _config.yml.

<title>{{ site.title | capitalize }}</title>

{{ site.var | название_свойства }} это настройка переменной. capitalize делает первую заглавную букву.

page - объект конкретной страницы (поста), берет данные с шапки.

<p>{{ page.intro }}</p>

post (тот же page) напрямую связан с постами. Используется только в цикле c переменной site.posts.

Конструкция {% for just in site.doit %} - это операторы языка Liquid. {{ site.var }} лишь вывод переменных. Полный список всех операторов и переменных есть на сайте learn.cloudcannon.
{% for post in site.posts %}
  <div class="item">
    <a href="{{ post.url | relative_url }}">
      <div class="image" style="background-image: url('{{ post.image }}');"></div>
      <div class="item-text main">
        <h1>{{ post.title }}</h1>
        <p>{{ post.intro }}</p>
      </div>
    </a>
  </div>
{% endfor %}

Первый сайт

Откройте консоль в любой папке:

jekyll new my_site
cd my_site
jekyll server

jekyll build собирает проект на продакшин, меняет URL localhost:port на ваши (из конфигов), к примеру http://predaytor.com.

jekyll server открывает локальный хост с портом 4000 (по умолчанию) и собирает проект. Именно он нам и нужен.

Стандартный шаблон автоматически соберет Jekyll. Перейдите на http://localhost:4000. Во время каждого сохранения файлов в папке сайта, сработает регенерация, на подобие BrowserSync.

При обновлении системных файлов _config.yml, Gemfile нужно перезапустить сборку.

jekyll server/build нужен доступ к _config.yml, выполняйте команды в корне сайта.

Jekyll дополнения

Jekyll Exstentions здесь можно найти что-то полезное.

Jekyll имеет ряд плагинов, которые помогут существенно разнообразить функционал. Установить можно в папку _plugins, или что более удобно просто добавить название в ваш Gemfile:

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.6"
  gem 'jekyll-sitemap'
end

Github Pages

И самое главное. Раз наш сайт полностью статический, нам доступен GitHub Pages!

Это бесплатный и надежный хостинг который очень любит нашу обозреваемую систему :3

GitHub Pages

Заключение

Jekyll изящная CMS, которая комбинирует функциональность и простоту использования для несложных сайтов без нагрузки на сервер, множества ненужных расширений и уязвимостей. Легкость, скорость и возможность бесплатного хостинга. Разве нужно что-то еще?

    Поделиться: