Прошло три недели, как мы запустили на сайте Я люблю ИП новый сервис, который помогает сравнить тарифы банков для бизнеса. Сегодня мы хотим рассказать, как он появился, от идеи до разработки, и поделиться выводами о запуске продукта и первыми результатами.
Функционал сервиса простой: он рассчитывает стоимость обслуживания в разных банках исходя из заданных параметров, сравнивает тарифы между собой и сортирует банки по стоимости в год. Но всё осложняется тем, что у нас статичный сайт на Jekyll.
В этой записи я собрал несколько разных тем касающихся первоначальной настройки блога на Jekyll. Этот пост будет интересен тем людям, которые как и я, впервые только недавно познакомились с Jekyll. В этом посте мы займёмся локализацей дат, выведем похожие записи для постов и рассмотрим основные плагины поддерживаемые на Github Pages.
Локализация дат
Одной из необходимых первоначальных настроек является перевод дат для их отображения в привычном нам формате, а так же месяцев на русском языке.
В папке _includes/ создадим отдельный шаблон для форматирования даты в нужном нам формате, я назову файл date.html:
{% assign m = include.date | date: "%-m" %}
{{ include.date | date: "%-d" }}
{% case m %}
{% when '1' %}января
{% when '2' %}февраля
{% when '3' %}марта
{% when '4' %}апреля
{% when '5' %}мая
{% when '6' %}июня
{% when '7' %}июля
{% when '8' %}августа
{% when '9' %}сентября
{% when '10' %}октября
{% when '11' %}ноября
{% when '12' %}декабря
{% endcase %}
{{ include.date | date: "%Y" }}
Вставляем наш шаблон с помощью тега include в нужное место и передаем ему переменную с датой, которая будет отформатирована, так как указано в нашем шаблоне:
Вывод похожих записей
Вывести список похожих/интересных записей (Similar Posts) монжо с помощью данного сниппета:
{% assign hasSimilar = '' %}
{% for post in site.related_posts %}
{% assign postHasSimilar = false %}
{% for tag in post.tags %}
{% for thisTag in page.tags %}
{% if postHasSimilar == false and hasSimilar.size < 6andpost!=pageandtag ==thisTag%}{%ifhasSimilar.size ==0%}<h4>Похожие записи</h4><ul>
{% endif %}
<liclass="relatedPost"><ahref="{{ site.url }}{{ post.url }}">{{ post.title }}
{% if post.series %}
(Series: {{ post.series }})
{% endif %}
</a></li>
{% capture hasSimilar %}{{ hasSimilar }}*{% endcapture %}
{% assign postHasSimilar = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
{% if hasSimilar.size > 0 %}
</ul>
{% endif %}
via gist
SEO-плагин
Github Pages имеет поддержку плагина Jekyll-SEO-Tag. Для того чтобы использовать его на сайте, в первую очередь необходимо прописать его в Gemfile, а так же вставить Liquid-тег плагина в head:
1
2
3
<head>
{% seo %}
</head>
Плагин поддерживает несколько переменных - title, description, image, author, которые можно объявить в Front Matter для каждого отдельного поста. Более подробно о возможностях Jekyll-SEO-Tag можно почитать на страничке плагина.
Поддерживаемые плагины
В сети можно встретить большое количество различных плагинов для Jekyll, но к сожалению Github Pages поддерживает только ряд “стандартных” плагинов. Например, таких как: jekyll-sitemap, jekyll-feed, jekyll-paginate, jekyll-seo-tag, jekyll-gist и другие (полный список поддерживаемых плагинов). В случае, если вы хотите использовать дополнительные плагины, то необходимо будет сгенерировать сайт локально и затем загрузить его в репозиторий вместе с папкой _site, которая и содержит сгенерированный контент.
Ускорение генераций сайта локально
При большом количестве записей генерация сайта занимает приличное время и минутные ожидания после каждого изменения в коде являются очень утомительным. Например, для тестирования дизайна и функционала сайта не нужно загружать все записи блога. Для того чтобы ускорить процесс и ограничить количество генерированного контента можно воспользоваться дополнительной опцией –limit-posts NUMBER. Полноценная команда для запуска Jekyll с ограничением в две записи выглядит так:
2016-08-09 03:00:00
... выбор пал на Jekyll. Jekyll - это генератор ... ="генератор статических сайтов jekyll" />
+ развернуть текстсохранённая копия
Медлительность и громоздкость Wordpress в последнее время стала разочаровывать меня все больше и больше. От части это было связанно с большим количеством активированных плагинов и непотимизированной темой. Но при всем этом, сама CMS с новыми версиями становится только объемнее, а большинство из новшест не являются необходимыми для обычного блога. Окончание баланса на хостинге дало еще один дополрнительный толчок для переезда. После Wordpress’а хотелось чего-то простенького и быстрого, выбор пал на Jekyll. Jekyll - это генератор статических сайтов, который отлично дружит с Github Pages. А это значит, что используя Github Pages мы получаем халявный хостинг к которому можем прикрутить наш домен.
Процесс написания поста теперь является таковым:
Создаем новый *.md файл и открываем его в любимом редакторе
Пишем пост используя разметку markdown
Делаем push файла с постом в наш репозиторий на github
Ждем пару минуток пока генерируется новый пост
Теперь коротко о главном при переезде:
Экпорт контента: Экспортировать записи и посты из Wordpress помог плагин Jekyll Exporter. Плагин так же экспортирует изображения из папки wp-content. Но так как в моем случае они хранились на отдельном поддомене img.artslab.info, то пришлось скачать их вручную.
Хостинг контента: Как я уже упомянул выше, Jekyll отлично работает на Github Pages, поэтому теперь весь контент лежит в отдельном репозиторий и хостинг обходится бесплатно.
Хостинг для изображений: В качестве хранилища для изображений я выбрал Google Drive, так как сервис выдает статическую ссылку на файл + много дискового пространства. Поэтому единственное что нужно было сделать для быстрого фикса всех ссылок на изображения - это взять редактор и выполнить Find & Replace All.
Напоследок еще несколько полезных ссылок по Jekyll:
Знакомство, установка и настройка Jekyll (rus.)
Как добавить поиск Google Custom Search на блог Jekyll (engl.)
Создание своей страницы с ошибкой 404 (engl.)
Создание категорий и страниц с тегами без плагина (engl.)
2016-08-09 03:00:00
... выбор пал на Jekyll. Jekyll - это генератор ... ="генератор статических сайтов jekyll" />
+ развернуть текстсохранённая копия
Медлительность и громоздкость Wordpress в последнее время стала разочаровывать меня все больше и больше. От части это было связанно с большим количеством активированных плагинов и непотимизированной темой. Но при всем этом, сама CMS с новыми версиями становится только объемнее, а большинство из новшест не являются необходимыми для обычного блога. Окончание баланса на хостинге дало еще один дополрнительный толчок для переезда. После Wordpress’а хотелось чего-то простенького и быстрого, выбор пал на Jekyll. Jekyll - это генератор статических сайтов, который отлично дружит с Github Pages. А это значит, что используя Github Pages мы получаем халявный хостинг к которому можем прикрутить наш домен.
Процесс написания поста теперь является таковым:
Создаем новый *.md файл и открываем его в любимом редакторе
Пишем пост используя разметку markdown
Делаем push файла с постом в наш репозиторий на github
Ждем пару минуток пока генерируется новый пост
Теперь коротко о главном при переезде:
Экпорт контента: Экспортировать записи и посты из Wordpress помог плагин Jekyll Exporter. Плагин так же экспортирует изображения из папки wp-content. Но так как в моем случае они хранились на отдельном поддомене img.artslab.info, то пришлось скачать их вручную.
Хостинг контента: Как я уже упомянул выше, Jekyll отлично работает на Github Pages, поэтому теперь весь контент лежит в отдельном репозиторий и хостинг обходится бесплатно.
Хостинг для изображений: В качестве хранилища для изображений я выбрал Google Drive, так как сервис выдает статическую ссылку на файл + много дискового пространства. Поэтому единственное что нужно было сделать для быстрого фикса всех ссылок на изображения - это взять редактор и выполнить Find & Replace All.
Напоследок еще несколько полезных ссылок по Jekyll:
Знакомство, установка и настройка Jekyll (rus.)
Как добавить поиск Google Custom Search на блог Jekyll (engl.)
Создание своей страницы с ошибкой 404 (engl.)
Создание категорий и страниц с тегами без плагина (engl.)