Jekyll представляет собой прекрасный инструмент для генерации статического сайта (такого, что может быть размещен на свободном хостинге GitHub Pages).
Использование Jekyll для разработки сайта - может также служить примером портфолио (потому что включает в себя элементы программирования).
Использовать Jekyll – очень просто. Нужно придерживаться несложных соглашений и применять несколько команд для генерации результата.
Эта команда используется для генерации сайта:
jekyll build
А эта команда используется запуска локльной копии сайта (отображается в браузере через //localhost:4000) :
jekyll serve
Мой сайт разработан с применением Jekyll, а ниже приведены интересные фрагменты, которые иллюстрируют применение возможностей, предоставляемых Jekyll.
Так выглядит главная страница сайта, файл index.html (по существу, это простое включение секций, из которых состоит страница):
---
layout: default
title: Home
---
{ % include logo.html %}
{ % include about.html %}
{ % include education.html %}
{ % include work.html %}
{ % include skills.html %}
{ % include portfolio.html %}
{ % include hobby.html %}
{ % include contacts.html %}
А так выглядит файл work.html, содержащий секцию, посвященную “работе”:
<section id="work" class="pfblock"><div class="container"> <!-- work -->
<DIV class="container section-wrapper">
<DIV class="section-content">
<DIV class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header">
<h2 class="pfblock-title">{ { site.topic_work }}</h2>
<div class="pfblock-line"></div>
</div>
</div>
</div>
<DIV class="row work-experience">
<div class="col-xs-5 col-sm-5 col-md-4 col-lg-3 resume-years-1">{ { site.msg_resumePeriods }}</div>
<div class="col-xs-7 col-sm-7 col-md-8 col-lg-9 resume-details-1">{ { site.msg_resumeTitle }}</div>
{ % assign resume_style = '1' %}
{ % for item in site.data.resume %}
{ % if resume_style == '1' %}
{ % assign resume_style = '0' %}
{ % else %}
{ % assign resume_style = '1' %}
{ % endif %}
<div class="col-xs-5 col-sm-5 col-md-4 col-lg-3 resume-years-{ { resume_style}}">
<P><a href="">{ { item.years }}</a></P>
</div>
<div class="col-xs-7 col-sm-7 col-md-8 col-lg-9 resume-details-{ {resume_style}}">
{ % assign delim = '' %}
{ % for name in item.name %}
{ { delim }}
<a href="" target="_blank">{ { name.job }}</a>
{ % assign delim = ', ' %}
{ % if name.tip contains '(' %}
{ { name.tip }}
{ % endif %}
{ % endfor %}
<P>{ { item.position }}</P>
<ul>
{ % for details in item.details %}
<li>{ { details.detail }}</li>
{ % endfor %}
</ul>
</div>
{ % endfor %}
</div>
</DIV><!-- //.section-content -->
</DIV><!-- //.container -->
</div></section>
Секция содержит конструкцию, обрабатывающую цикл, в котором перебираются элементы коллекции (site.datа.resume), из которых собирается контент.
Коллекция site.data.resume выглядит следующим образом (приведен фрагмент первого элемента коллекции):
- item: BellIntegrator
years: "04.2007 - 08.2018"
page: "/pages/work/vimpelcom.html"
name:
- job: "Совинтел"
site: "http://www.veon.com"
- job: "Вымпелком"
site: "http://www.beeline.ru"
- job: "Бэлл Интегратор"
site: "http://www.bellintegrator.ru/"
position: "Старший инженер-программист"
details:
- detail: "Разработка систем business critical (полный цикл разработки)."
- detail: "Тестирование, внедрение в эксплуатацию."
- detail: "Поддержка III-го уровня."
- detail: "Консультирование администраторов систем."
- detail: "Составление технической документации и инструкций."