Jekyll для создания и управления статичными сайтами

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

Тем не менее, есть решение.
Jekyll — библиотека для генерации статичных сайтов по шаблонам.
https://github.com/mojombo/jekyll/wiki — вики проекта.

В общем, всё достаточно просто — достаточно создать файл-лэйаут и на его основе создавать страницы. Поддерживаются переменные, причём как переменные общие для всего сайта (site.<имя переменной>), так и переменные, специфичные для страницы (page.<имя переменной>), которые доступны и в родительском шаблоне.
Пример лэйаута

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Предоставляем услуги{% if page.title %} - {{ page.title }}{% endif %}</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
		<div id="slogan">
			<img src="images/logo.jpg" alt="" width="100" height="101" border="0"></a>
		</div>
		<img src="images/logo_bg.jpg" id="logo"></td>

<div id="counters">				
<nobr>
<!--begin of Rambler's Top100 code -->
<!--end of Top100 code-->
<!--begin of Top100 logo-->
<!--end of Top100 logo -->
<!--LiveInternet counter--><!--/LiveInternet-->

</nobr>
</div>

<div>
	{% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
</div>
<div>
	{{ content }}
</div>
</body>
</html>

<html>

<head>

<title>Предоставляем услуги{% if page.title %} - {{ page.title }}{% endif %}</title>

</head>

<body>

</div>

<nobr>

</nobr>

</div>

<div>

{% if page.title %}<h1>{{ page.title }}</h1>{% endif %}

</div>

<div>

</div>

</body>

</html>

Примеры страниц:
price.html

---
layout: default
title: '&#1062;&#1077;&#1085;&#1099;'
---
<p>Стоимость составляет ...<br />
Выполнение ... 
</p>

---

layout: default

title: 'Цены'

---

<p>Стоимость составляет ...<br />

Выполнение ...

</p>

contacts.html

---
layout: default
title: "&#1050;&#1086;&#1085;&#1090;&#1072;&#1082;&#1090;&#1099;"
---
<p>
	Мой телефон: 8-926...
	<br />
	Путь от метро занимает 5-6 минут.
</p>

---

layout: default

title: "Контакты"

---

<p>

Мой телефон: 8-926...

<br />

Путь от метро занимает 5-6 минут.

</p>

Далее запускаем генератор (или даже простенький сервер; по умолчанию — на 4000 порту).
В итоге всё, что написано между ——— (YAML Front Matter) становится переменными, доступными внутри шаблона и родительского шаблона. А всё после ——— становится доступно как значение переменной content.

Замеченные минусы:
Поддерживается только UTF-8 (хотя вряд ли это сейчас минус) и не поддерживается русский текст в переменных (обратите внимание на переменные title: entities — единственный способ, которым я заставил jekyll работать с русским языком в переменных)

В командной строке нужно сделать

cd <проект>
jekyll serve

1 2	cd <проект> jekyll serve

Сайт доступен по адресу http://localhost:4000/.

Далее я настроил file watcher в PhpStorm для перегенерации страниц при изменении файлов. Вот какая конфигурация получилась в итоге (волею судеб _эту_ работу я делаю в Windows 7):

Вот статья, подробно рассказывающая, как создать простой сайт на jekyll — http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll//

Jekyll для создания и управления статичными сайтами

Similar Posts

One Response so far.

LEAVE A COMMENT Отменить ответ