Этот сайт собирается с помощью Jekyll, генератора статических сайтов. Расскажу, что это и какие возможности предоставляет.

Исторически первые сайты разрабатывались путём непосредственного прямого редактирования html-страниц. Однако, когда количество страниц сайта увеличивалось, изменять оформление и структуру сразу всех страниц становилось трудоёмко.

Возникла идея разделения страницы на контент, разметку и стилевое оформление. Все 3 компонента редактируются независимо и в конце собираются в финальную страницу. Для генерации страниц стали использоваться программы на языках программирования PHP, Python и т.д., которые выполняются на сервере и создают html-страницу на каждый запрос пользователя. Контент при таком подходе хранится в базе данных.

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

Статические сайты

Статические сайты - это блоги, сайты-визитки, сайты-справочники и т.д.

Идея в том, что на сервере не используются никакие базы данных и программы для генерации html-страниц. На сервере хранятся только статические файлы. HTML-странички генерируются заранее на ноутбуке автора из составных частей: контента, разметки, стилей. Для этого используются специальные программы - генераторы статических сайтов. Далее полученный HTML заливается на сервер.

Плюсы:

  • Минимальная настройка сервера. Достаточного доступа по FTP.
  • Нет необходимости изучать языки программирования.
  • Простота переноса на другой хостинг или другой домен.
  • Полный контроль над контентом. Весь контент хранится на компьютере автора, а также можно:
    • делать бэкапы на Я.Диск или другие облачные хранилища;
    • использовать системы контроля версий Git или Mercurial.

Минус:

  • Для взаимодействия с пользователем (комментарии к постам, форма обратной связи), нужно подключать внешние сервисы через JavaScript.

Jekyll

Существует множество генераторов статических сайтов. Список таких генераторов можно посмотреть здесь.

Самым популярным на текущий момент является Jekyll. Процесс редактирования сайта с помощью него выглядит так:

  1. Тексты для сайта пишутся с помощью легкого языка разметки Markdown.
  2. Jekyll генерирует html из Markdown.
  3. html-файлы загружается на сервер по FTP.

Jekyll написан на языке Ruby, поэтому предварительно необходимо установить интерпретатор Ruby.

Вместе с Ruby будет установлен менеджер пакетов gem. С помощью него можно установить Jekyll. Выполните из командной строки

gem install jekyll bundler

Дополнительный пакет bundler нужен для управления версиями gem-пакетов. Чтобы сайт всегда собирался с одним и тем же проверенным набором gem-пакетов.

Перейдите в папку, где хотите держать сайт, и создайте болванку сайта:

cd <path>
jekyll new .

Теперь сайт можно редактировать. Чтобы сгенерировать html, нужно запустить команду:

bundle exec jekyll build

Полученные html-файлы будут лежать в папке _site. Содержимое папки можно брать и копировать на сервер по FTP.

Однако, более удобный способ разработки сайта такой. Перед началом редактирования нужно запустить Jekyll командой:

bundle exec jekyll serve

Jekyll поднимет локальный веб-сервер, доступный по адресу http://localhost:4000. Там можно смотреть текущую актуальную версию сайта. В процессе редактирования при сохрании файла Jekyll будет автоматически перегенерировать нужную страницу.

Оформление

Для генерации html и вставки контента используется специальный язык шаблонов Liquid. Для стилей - язык CSS.

Для Jekyll разработано уже огромное количество тем оформления (искать здесь и здесь). Поэтому разбираться в liquid и css нет необходимости - можно взять готовую тему.

Но при необходимости всегда можно донастроить оформление под себя. Есть хорошая серия видео с пошаговым объяснением, как это делать.

Расширения

Расширения бывают 2х видов:

  • можно написать на Ruby код, который будет исполняться во время генерации сайта;
  • можно написать на JavaScript код, который будет исполнятся в браузере пользователя.

Примеры расширений:

Комментарии на страничках сайта

Есть несколько сторонних сервисов для этого, например, Disqus. Он берёт на себя хранение комментариев и аутентификацию пользователей. Пример - внизу этой страницы.

Социальные кнопки

Позволяют быстро сделать репост в любимой социальной сети. Сгенерировать блок кнопок можно здесь. Пример - внизу этой страницы.

Аналитика

Подключаются как Google Analytics, так и Яндекс Метрика.

Подсветка синтаксиса

Полезно для технических блогов для вставки примеров кода. В Jekyll это реализуется с помощью библиотеки rouge на языке Ruby.

Latex-формулы

Для рендеринга формул есть онлайн-сервис MathJax. Формулы хранятся на страничке в Latex-формате. Когда пользователь заходит на страничку сайта, JavaScript делает запрос к MathJax для рендеринга формулы.

Например:

C = L_a \cdot K_a + \frac{L_d \cdot K_d \cdot dot(n, l) + L_s \cdot K_s \cdot dot(n, h)^s}{a_0 + a_1 \cdot d + a_2 \cdot d^2}

превращается в

Векторные изображения

Для Latex существует популярный пакет TikZ для создания векторных изображений. Такие изображения можно вставлять и на странички сайта.

  • Внутрь Markdown-файла вставляется блок с описанием изображения.
  • Расширение Jekyll на языке Ruby вызывает Latex для генерации PDF и потом утилиту pdf2svg для генерации SVG.

Например:

%\draw[help lines] (-5, -2) grid (5, 5);

\coordinate (P) at (0, 0);
\coordinate (L) at (60 : 5);
\coordinate (V) at (165 : 5);

%surface
\node [font = \large\sffamily] at (2, -1) {Поверхность};
\draw [gray, ultra thick] (P) arc [radius = 10, start angle = 90, end angle = 120];
\draw [gray, ultra thick] (P) arc [radius = 10, start angle= 90, end angle = 60];

%camera
\draw (V) ++ (0, 0.75) node [below, font = \large\sffamily] {Камера};

\begin{scope}[shift = (V), rotate = -15]
    \draw (0, 0) -- (0.6, 0.3);
    \draw (0, 0) -- (0.6, -0.3);
    \draw (0.5, 0) arc [radius = 0.5, start angle = 0, end angle = 30];
    \draw (0.5, 0) arc [radius = 0.5, start angle = 0, end angle = -30];
\end{scope}

%light
\draw (L) ++ (0, 0.5) node [above, font = \large\sffamily] {Источник света};

\foreach \x in {0,45,...,315}
    \draw [->] (L) -- +(\x : 0.5);

%ambient
\foreach \x in {0,30,...,180}
    \draw [->, thick, red] (\x : 2.0) -- (\x : 0.5);

%point
\node [below] at (P) {$P$};

превращается в

Без расширений

Можно вставлять html-код прямо в Markdown-страничку, чтобы подключить внешний контент.

Видео

Карты

3D-модели