Jekyll создание сайта: Практическое руководство по Jekyll / Хабр

Содержание

Практическое руководство по Jekyll / Хабр

Jekyll на Хабрахабре уже светился. Коротко говоря: это система генерации статических сайтов, ориентированная на блоги. Основная особенность: используется на Github Pages, что позволяет держать исходники сайта в репозитории на Github — а несколько кэширующих серверов его в пределах 10 минут после коммитов будут собирать и отображать посетителям. Если интересно больше и коротко: рекомендую к прочтению эту статью, часть материала которой я упомяну и здесь. А я расскажу о Jekyll поподробнее: как им можно пользоваться по назначению, для чего им пользоваться не по назначению, и на что он вообще способен. Статья ориентирована больше на тех, кто ни с чем подобным ранее не работал (как я, работавший ранее с WordPress), и в большей части статьи Jekyll будет рассматриваться именно как средство ведения блога, хотя ближе к концу будет нечто совсем другое.

Из всех существующих платформ для блогов (движков, сервисов, генераторов) Jekyll мне показался странно выделяющимся. Это скорее моя вина, потому что статическими сайтами я увлёкся не так давно и аналогов не знаю. Jekyll ориентирован на технически грамотных людей, которых больше интересует использование блога по его прямому назначению: публиковать посты в обратном хронологическом порядке, а также обеспечивать более-менее удобную навигацию. Если вам нужно больше, придётся либо попотеть, либо отказаться от большего (ну, или от Jekyll). И такой способ «общения» во многом определяет круг пользователей этой платформы: те, кому нужен сайт с предельно понятной им структурой и минимумом проблем в публикации новых постов.

Написание постов

Первое, чем Jekyll отталкивает большинство начинающих: полное отсутствие визуального (WYSIWYG) редактора. Это сознательный отказ, а не техническая недоработка. Для оформления своих постов предлагается использовать языки Markdown и Textile, которые являются хорошо читаемыми даже в исходниках языками разметки. И с помощью этого реализуется более важный для «сферических пользователей Jekyll в вакууме» принцип написания постов: WYSIWYM, what you see is what you mean (видите то, что имеете в виду), для чего подойдёт любой текстовый редактор, хоть в терминале.

Визуальный редактор в Jekyll отстутствует скорее потому, что не очень понятно, куда его девать. Сохранять введённый результат придётся самостоятельно, редактор не сможет его записать, сайт-то статический. Что навязывает два разумных выхода из ситуации:

Положить редактор на какую-нибудь веб-страницу, запускать его в браузере откуда-то и копировать код вручную из браузера в репозиторий

Воспользоваться веб-приложением «prose.io» (спасибо Elfet за наводку), намекающим на результат (не совсем WYSIWYG), но пишущим результат в репозиторий самостоятельно
Оставить работу редактору на компьютере пользователя

Я не знаю ни одного пользователя Jekyll, который пользовался бы первым способом, хотя не исключаю, что такие есть. Да, использовать браузерный визуальный редактор можно, но весь процесс написания поста сведётся к его набору в редакторе и копированию полученного кода в файл с постом Jekyll на Markdown (*.md, *.markdown), поскольку HTML в Markdown употреблять никто не запрещает.

Textile не пробовал, возможно, он тоже оценит такой юмор. Но если вы всерьёз думаете так делать, задумайтесь: зачем вам нужен именно Jekyll?

Статичность не во вред

Второе, чем Jekyll отталкивает: статичность собранного сайта, отсутствие обратной связи. Это в равной степени и недостаток, и преимущество. Используя сторонние службы, минусы этой особенности можно ослабить. Такой подход устроит не всех, но многих. WordPress я забросил именно потому, что я пользовался лишь очень малой долей его функционала, а прочее пришлось отключать или даже блокировать дополнительными плагинами. В конце концов, я задался вопросом: а зачем моему сайту обратная связь, если она ограничивается комментариями, размещёнными к тому же на стороннем сервисе? Большего многим блогам просто не нужно.

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

Комментарии предоставляют многие службы, в том числе Disqus, поиск тоже можно сделать несколькими способами:

Google Custom Search (очевидно)

форма, отправляющая запрос в Google с параметром site:
сформировать материал для поиска с помощью Liquid (об этом ниже) и заставить клиента делать поиск по нему
собрать RSS-ленту и воспользоваться сервисом Tapir (да пощадит его хабраэффект)

Этого уже достаточно, чтобы завести неплохой блог, по которому будет удобно перемещаться, когда он вырастет. И при этом со стороны хостинга всё ещё требуется лишь отдавать странички. Возможно, это несколько «неправильно» по отношению к клиенту, которому придётся делать лишние запросы к другим узлам, но насколько этот недостаток перевешивает всю пользу от статичности, решать вам. Обычно не перевешивает.

Особенности хостинга на Github

Github, в первую очередь, хранилище Git-репозиториев. А применительно к сайтам это означает, что он хранит всю историю изменений вашего сайта.

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

Если задуматься, Github — одна из самых весомых причин использовать Jekyll. Помимо продвинутого веб-интерфейса репозитория, фактически заменяющего админку (из него можно создавать и редактировать файлы, этого хватает для полного контроля), такой хостинг обеспечит сайту высокую скорость загрузки отовсюду, где хорошо работает Github — везде, где бываю я, как минимум.

Также есть ряд особенностей, не связанных с самим Jekyll. Положив в корень репозитория 404.html, вы получите собственную страницу ошибки на случай, если пользователь перейдёт по битой ссылке на ваш сайт. Положив в корень текстовый файл CNAME с единственной строчкой, вы прикрепите указанный на этой строчке домен к вашему сайту. Вам останется только направить этот домен на Github с помощью DNS.

Зачем тут YAML

Руководств по установке и базовому использованию Jekyll достаточно, я поговорю о чем-то более внутреннем. YAML front matter, который я называю «YAML-шапкой» — это некоторый набор структурированной информации о страничке или посте, написанный в самом начале файла. Ближайший знакомый мне аналог YAML, имеющий нешуточную популярность — JSON. Суть языка: представление некоторого структурированного набора данных в текстовом виде (сериализация). А чтобы было удобно структурировать, достаточно иметь в языке две структуры данных: список и ассоциативный массив (list и map). Более простым языком: просто список значений и список значений с определёнными названиями.

YAML здесь делает ровно то, что должен, и сохраняет при этом хорошую читаемость данных. В большинстве случаев от него интересует просто указание нескольких значений в ассоциативном массиве: название, дата, теги, категория. Причём YAML поддерживает ощущение WYSIWYM: вы понимаете, что означает шапка, едва глянув на неё.

Но YAML способен и на куда большее, чем такие примитивные указания.

Вы можете писать в YAML решительно любые данные: от типичных до сумасшедших (баг-репорт уже послан). Набор ваших постов в _posts с шапками на YAML составляет, фактически, базу данных вашего сайта, и её необязательно использовать именно в том виде, в котором это задумывалось при разработке Jekyll. Но прежде чем заполнять базу, стоит научиться использовать данные из неё. Об этом чуть дальше.

Шаблоны: самое главное!

Пожалуй, основная фича во всех генераторах статических сайтов — шаблоны. Потому что незачем копировать один и тот же код в несколько разных мест, если компьютер может сделать это за вас. Вся система шаблонов в Jekyll устроена просто, почти примитивно. Шаблон является просто HTML-страницей (в папке _layouts), в котором есть Liquid-тег (о них дальше) {{ content }}. А названием шаблона считается имя файла без расширения: к примеру, шаблон foo нужно описывать в файле foo. html.
Любая страница сайта может ссылаться на шаблон (в том числе другой шаблон):

---
layout: default
---

Когда Jekyll собирает страницу, проверяется, не указан ли в шапке параметр layout, как выше. Если указан, то сначала собирается страница из указанного в нём шаблона, а из полученной страницы тег {{ content }} заменяется на содержимое той страницы, над которой идёт работа. Приведу пример.

У себя на сайте я использую в основном два шаблона: list и post, но они не самодостаточны, а являются расширениями шаблона default. В последнем находится самая наружная оболочка, используемая почти на всех страницах.

post выводит пост, его теги и форму комментариев. list используется для всевозможных списков постов, и содержит JavaScript, выводящий количество комментариев для всех постов в списке. При сборке поста у меня в блоге Jekyll сначала видит в шапке layout: post, обращается в post. html и видит там layout: default. В default.html никаких шаблонов не указано, поэтому он загружает этот файл, на место {{ content }} записывает post.html (а это шаблон, в нём {{ content }} тоже есть) и в полученный гибрид вместо {{ content }} записывает мой пост.

Теоретически, вы можете делать посты разных видов и форматов: полновесная статья, заметка, цитата, картинка. Придётся напрячься, чтобы посты выводились в списках по-разному, в зависимости от формата, но это, наверное, единственный неочевидный момент.

Неожиданная мощь Liquid

Чтобы генерировать сайт, нужно описать правила, по которым генерация будет производиться. Часть вшита в сам Jekyll, вроде обработки всех файлов в _posts, имя которых соответствует определённому формату (дата-название), и составлению структуры site. Это есть всегда и существенно облегчает работу над блогом без изысков.

Ещё можно писать правила на Liquid или разрабатывать плагины на Ruby. Но с последним вас ждёт разочарование — Github запускает Jekyll в «безопасном режиме», и на пользовательские плагины генератор не обратит внимания. Если они вам ну очень нужны — вы всегда можете сгенерировать сайт у себя, а затем загрузить на Github не исходники сайта, а полученный из генератора результат. Это разумно делать в две разных ветки одного репозитория (как это делает Octopress). Всё, что вы при этом теряете — возможность подхватывать изменения в исходниках сразу после commit-push без лишних действий. Если вы работаете с сайтом в основном с одной и той же машины, это вообще не проблема: можно написать shell-скрипт, который соберёт сайт в папку с вашим репозиторием, сделает в него коммит с датой/временем (например) и отошлёт изменения на Github. Но вернёмся к тому, что можно делать без опасений.

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

{% for post in site. posts %}
  <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}

Вывести для каждого поста его дату публикации и ссылку на него, обозначенную его названием. Выглядит вполне логично и коротко. Но это самый простой формат. Вы наверняка захотите выводить с каждым постом ещё и небольшой его кусочек (механика «ката»). Разработчики Jekyll это предусмотрели, и для каждого поста такой кусочек записывается в переменную excerpt. В Liquid это может реализовываться, например, так:

{% for post in site.posts %}
  <li>
    <p><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></p>
    <p>{{ post.excerpt }}</p>
  </li>
{% endfor %}

Можно использовать Liquid для генерации карты сайта (спасибо вот этому человеку за мысль) и даже облака тегов (где употребляемые чаще теги имеют больший размер, спасибо ему же), что для сайта весьма полезно.

YAML + Liquid = ?

Со встроенными переменными всё более или менее понятно. Но ими дело не ограничивается. Продолжая двигаться по практическим примерам, посмотрим на заголовки страниц, используемые у меня на сайте, скажем, здесь и здесь. К каждому заголовку прилагается также и значок из FontAwesome. Вставка значка из этого шрифта (в старой версии, как у меня) осуществляется конструкцией:

<i> </i>

Но можно не писать её в заголовке каждый раз, сделав в шаблоне так:

<i> </i>

… и коротко задавая в YAML-шапке нужных страниц что-то вот такое:

icon: tags

И это сравнительно простой пример. В собственных переменных можно хранить целые структуры данных, и это позволяет делать вещи, которые некоторым могут показаться безумными. Когда я осознал, что так делать можно, я переделал текстовый квест, собранный за 10 часов «голыми руками» по написанному сценарию, на автоматическую сборку при помощи Jekyll.

Результат можно видеть здесь, в том числе изначальную версию. Каждая «сцена» текстового квеста — это «пост» в терминах Jekyll, в YAML-шапке которого содержится «кодовое имя», стиль сцены, «иллюстрация» к сцене (значок), список ссылок, каждая из которых состоит из значка, текста и пункта назначения, и кое-какой менее важный хлам. Jekyll на основе всех сцен-постов собирает одну большую страницу, где весь этот квест лежит в работоспособном состоянии. Неприятный побочный эффект — генерируются страницы и для каждой сцены, но ссылок на них нигде нет. Как с этим бороться, я не придумал.

Заключение

В очередной раз отмечу: Jekyll не для всех. Но если вы прочитали статью целиком и она вас не испугала — возможно, вам стоит попробовать Jekyll в деле, нужно только время, установленный Ruby (желательно) и базовые знания о составлении веб-страниц. Я описал реализации функционала, который даже не все пользователи WordPress используют.

Имеющийся в Jekyll функционал позволяет сделать далеко не только блог. Но это скорее использование Jekyll не по назначению, хотя может быть довольно интересной задачей с приятным бонусом в виде хостинга на Github. Тему плагинов на Ruby я не раскрыл по одной простой причине: я абсолютно не знаком с этим языком и невозможность его использовать на Github не заставляет меня его изучать. Единственные два языка, с которыми стоит научиться обращаться: YAML и Liquid, и даже это необязательно, если следовать руководствам и не замахиваться на большее. Впрочем, скудный и примитивный блог мало кому нужен, если там не размещено нечто совершенно уникальное и чрезвычайно полезное.

В общем, попробуйте, если чувствуете в себе силы и решимость. И если до сих пор не пробовали ничего подобного.

Jekyll: обзор, отзывы, аналоги, интеграция, сайт

Описание

Jekyll был специально разработан для создания минималистичных блогов, которые затем можно разместить на GitHub Pages.

Преимущества сервиса

Простота. Jekyll сводит все к абсолютному минимуму, избавляясь от сложных составляющих:
- Никаких баз данных. В отличие от WordPress и других систем управления контентом (CMS), Jekyll не использует базы данных (БД). Все страницы перед публикацией преобразуются в статический HTML. Это прекрасно с точки зрения скорости загрузки страницы, так как во время загрузки не происходит никаких запросов к БД.
- Никаких CMS. Просто пишите в Markdown — Jekyll сам применит шаблоны к контенту и сгенерирует статический сайт. GitHub может исполнять роль CMS, если нужно, потому что он позволяет редактировать контент.
- Быстрый. Jekyll быстрый, потому, что в нём нет ничего лишнего и он не использует базы данных — он просто собирает статические страницы. Мой основной шаблон Jekyll Now создает всего три HTTP-запроса, включая картинки и иконки социальных сетей!
- Минималистичный. Большинство сайтов на Jekyll не содержит никакой лишней функциональности или возможностей, которые вы не используете.
Контроль представления. Тратьте меньше времени на сложные шаблоны, написанные другими людьми, и больше — адаптируя простой базовый шаблон или создавая свой собственный.
Безопасность. Большинство уязвимостей, которые есть у платформ вроде WordPress, отсутствуют в Jekyll, потому что здесь нет CMS, нет баз данных или PHP. Так что вам не нужно тратить массу времени устанавливая обновления, закрывающие дыры в безопасности.
Удобный хостинг. Это просто удобно, если вы уже используете GitHub, вот и все. GitHub Pages бесплатно соберет и выложит сайт, использующий Jekyll, и одновременно реализует для него контроль версий.

Возможности сервиса

Одной из лучших идей в основе Jekyll является то, что на его основе можно реализовать любой нормальный статический сайт.
Также в Jekyll есть встроенный локальный сервер, отслеживающий изменения в файлах и генерирующий HTML, CSS и JavaScript из шаблонов, текстов в Markdown, файлов Sass или CoffeeScript.
Jekyll был первым генератором статических сайтов, представившим концепцию “вводной части” — способа добавления метаданных в шаблоны или файлы markdown.
Jekyll использует шаблонизатор Liquid, разработанный командой разработчиков движка магазинов Shopify.
В Jekyll добавлено несколько тегов для обработки фрагментов и ссылок, а также несколько хелперов, фильтров и экранизаторов содержимого.
В Jekyll реализована отдельная обработка каталога _posts, в котором располагаются файлы в формате Markdown, именованные по схеме yyyy-mm-dd-title-of-the-post.md. Посты обрабатываются как записи блога.
Простейшая форма отдельного документа это Markdown или HTML. Этот документ конвертируется в соответствующую страницу HTML при сборке. В документе задается макет, который будет использоваться для создания HTML-страницы, а также метаданные, к которым движок шаблонов имеет доступ через переменную page.
С версии 2.0 Jekyll поддерживает коллекции. Коллекция это каталог с документами Markdown. У вас есть доступ к коллекциям в шаблонах через переменную site.collections, вы можете задать сборку каждого документа в коллекции как отдельной страницы.
Обработка ресурсов в Jekyll реализована предельно просто. Также как и в случае с минималистичным шаблонизатором Liquid, здесь есть хорошее и плохое. В Jekyll нет встроенной поддержки LiveReload, минификации или связывания ресурсов, однако Sass и CoffeeScript работают без дополнительной настройки. Любой файл с расширением .sass, .scss или .coffee и вводной в формате YAML будет обработан и конвертирован в соответствующий файл .css или .js в итоговом статическом сайте.

Построить блог с Джекил и GitHub Страницы

Недавно я мигрировали мой блог WordPress от до Джекила, фантастический сайт генератор, который предназначен для строительства минимальные, статические блоги быть размещены на GitHub Pages. Простота тематизации слоя Джекила и писать процесса является фантастическим;Однако, создание мой сайт взял много больше, чем ожидалось .

В этой статье мы будем ходить через следующее:

Быстрый способ создать Джекил питание блог;
Как избежать распространенных проблем с использованием Джекил;
Как импортировать контент из WordPress, использовать собственное доменное имя, и блог в вашем любимом редакторе;
Как тема в Джекил, с примерами жидких шаблонных;
Пара новых функций Джекил 2,0, в том числе и Сасс CoffeeScript поддержки и коллекций .

Джекила Простой Purpose

Том Престон-Вернер создал Джекил, чтобы люди в блог с помощью простой статический HTML веб-сайт, с все содержимое размещается и версия под контролем на GitHub.Целью было устранить сложность других платформ блогов, создав рабочий процесс, который позволяет блог вроде hacker __21 | | 1__20 .

Octocat талисман Джекила.(Кредит изображения: GitHub ²)

Джекил занимает свое содержание, написанный на Markdown, пропускает его через шаблоны и выплевывает в полной статической сайте, можно подавать к столу. GitHub Страницы удобно служит веб-сайт непосредственно из хранилища GitHub, так что вам не придется иметь дело с любым хостинг .

Вот некоторые сайты, которые были созданы с Джекила:

Преимущества Going Static

SimplicityДжекил-полоски все до минимума, устраняя много сложностей:
- Нет databaseВ отличие от WordPress и других систем управления контентом (CMS), Джекил не имеют базы данных.Все сообщения и страницы преобразуются в статическом HTML до публикации.Это очень удобно для скорости загрузки, потому что звонки баз данных не производится, когда страница загружена .
- Нет CMSПросто напишите их содержанием в Markdown, и Джекил будет запустить его через шаблоны для создания статический сайт.GitHub может служить CMS при необходимости, потому что вы можете редактировать контент на нем .
- FastДжекил быстро, потому что, будучи урезанная и без базы данных, вы просто обслуживает до статические страницы. Мой базовой темы, Джекил Now ⁵⁰²⁵¹⁵⁹, составляет всего три HTTP запросов — в том числеПрофиль картина и социальные иконки
- MinimalВаш сайт будет включать в себя Джекил абсолютно не функциональные возможности или функции, которые вы не используете .
Дизайн controlТратьте меньше времени борьба со сложными шаблонами, написанных другими людьми, и больше времени создания свою собственную тему или настройки несложный базовой темы .
SecurityПодавляющее большинство уязвимостей, которые влияют на платформы, такие как WordPress не существует, потому что Джекил не имеет CMS, базы данных или PHP.Таким образом, вам не придется тратить столько времени на установку обновлений безопасности .
Удобный hostingУдобный, если вы уже используете GitHub, что есть.GitHub Страницы будут строить и разместить свой сайт Jekyll бесплатно, в то время как одновременно обращении контроль версий .

Давайте попробуем Out

Есть несколько способов, чтобы начать работу с Джекила, каждый со своими вариациями.Вот несколько вариантов:

Установка Джекил локально с помощью командной строки, создать новый шаблонный сайт, используя jekyll new, построить его на месте с jekyll build, а затем служить его.( Джекил website ¹⁰ Выставки этот процесс.)
Clone отправной точкой для вашей локальной машине, установите Джекил локально с помощью командной строки, чтобы обновления на ваш сайт, построить его локально, а затем служить его .
Вилка отправную точку, внести изменения, а затем служить ему .

Мы начнем с быстрый и простой вариант: порождая запускточка.Это позволит получить нам и работает в течение нескольких минут, и у нас не будет устанавливать какие-либо зависимостей.Вот то, что мы собираемся сделать прямо на GitHub.com в браузере:

Создать наша Джекил питание сайт .
Разместить его бесплатно на GitHub Pages .
Настроить его, чтобы включить наше имя, аватар и социальных связей .
Опубликовать наш первый пост блога

1. Вилка Начиная Point

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

Я подготовил хранилище для нас уже.Отправляйтесь в Джекил Now ¹¹, и нажмите кнопку “вилка” в верхнем правом углу хранилище раскошелиться копию теме блога на ваш счет GitHub .

¹²
Прохождение шагов 1 и 2. ( Просмотр большой version __34 | | 13__17 )

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

Общие проблемы # 1 Создание сайта Jekyll через местный командной строки может быть неприятно и требует много времени, потому что у вас есть, чтобы установки и настройки dependencies как Руби и RubyGems. Пусть GitHub Страницы построить сайт для вас, пока вы не будете иметь реальную необходимость создания локально .

2. размещаться на вашем GitHub Account

Как пользователь GitHub, вы имеете право на один бесплатный сайт “пользователя” (в отличие от веб-сайта «Проект»), который будет жить в http://yourusername.github.io.Это пространство идеально подходит для проведения блог Jekyll

Лучшее, что вы можете просто разместить незастроенных Jekyll блог на мастер филиала репозитория пользователя и GitHub Страницы будут строить статический сайт и служить его для вас.Вы не должны волноваться о процессе сборки на всех — это все заботятся .

Нажмите кнопку “Настройки” в вашем новом раздвоенной хранилище (в меню справа), и изменить имя репозитория до yourusername.github.io, заменяя yourusername с GitHub имя пользователя .

Ваш сайт будет, вероятно, в силу сразу же.Вы можете проверить, зайдя в http://yourusername.github. io.Не волнуйтесь, если он еще не живут: Шаг 3 заставит его быть построен .

¹⁴
База тема вашего блога будет выглядеть после раздвоенный.(Изображение: Джекил Now ⁵⁰²⁵¹⁵⁹) ( Просмотр большой version ¹⁶)

Вот так!Мы движемся быстро здесь.У нас уже есть веб-сайт Джекил и работает!Давайте сделаем шаг назад для второй и посмотреть на некоторые из наиболее распространенных проблем, чтобы быть в курсе, когда хостинг веб-сайт Jekyll на GitHub Страницы .

Общие проблемы # 2 Будьте в курсе разницы между веб-сайтов пользователей и проекта websites ¹⁷ на GitHub.С веб-сайта пользователя (который мы устанавливаем), вам не нужно делать каких-либо разветвление.master Филиал уже настроен для запуска ничего, возложенные на него через Джекила.Вам не нужно настроить gh-pages Филиал .

Общие проблемы # 3 Использование веб-сайта проекта для вашего сайта Джекил вносит некоторую complexity __51 | 18 потому, что ваш сайт будет опубликован в подкаталог. Ссылка будет выглядеть http://yourname.github.io/repository-name, что вызовет проблемы в шаблонах Джекила, такие как нарушение ссылки на изображения, а не позволяя просматривать сайт локально .

Общие проблемы # 4: Джекил имеет много plugins __61 | 19 , но GitHub Страницы поддерживает только несколько из them __67 | 20 .Если вы попытаетесь включить плагин, который не поддерживается, то Джекил удастся при строительстве вашего сайта.Так, придерживаться в список поддерживаемых.К счастью, мой любимый плагин в списке: Jemoji ²¹ позволяет включать в смайлики блоге, как вы бы на GitHub и Basecamp .

3. Настройте Ваше Website

Теперь вы можете изменить вашего сайта имя, описание, аватар и другие варианты, редактируя _config.yml файл.Эти пользовательские переменные были созданы для удобства и потянул в вашей теме, когда ваш сайт будет построен .

Внесения изменений в _config.yml (или любой файл в хранилище) заставит GitHub Страниц восстановить ваш сайт с Джекила. Сайт восстановлен будут видны через несколько секунд при температуре http://yourusername.github.io.Если ваш сайт не жить сразу после шага 2, это будет после этого шага .

Идите вперед и настроить свой сайт, обновляя переменные в _config.yml файл, а затем фиксации изменений .

Вы можете изменять файлы вашего блога здесь на в одном из трех способов.Выберите какой подходит вам лучше всего:

Редактировать файлы в ваш новый username.github.io хранилище непосредственно в браузере в GitHub.com (как показано ниже) .
Использование редактора контента GitHub сторонних, как Prose __20 | 22 | __2 семенами развития.Он оптимизирован для Джекила, который позволяет легко редактировать Markdown, написать проекты и загружать изображения .
Clone репозиторий и сделать обновления локально, а затем подтолкнуть их в репозиторий GitHub ( Atlassian имеет guide __28 | 23 на это) .

²⁴
Редактирование ваш сайт в _config. yml на GitHub.com.(Кредит изображения: Джекил Now ⁵⁰²⁵¹⁵⁹) ( Просмотр большой version ²⁶)

Общие проблемы # 5: Не думайте, что вам нужно jekyll build сайт локально, чтобы настроить и тематический веб-сайт Джекил.GitHub Страницы сделает это за вас.Вам просто нужно поместить файлы, которые вы хотите быть построен в мастер-филиала репозитория пользователя или в gh-pages филиала любой другойхранилище, а затем GitHub Страницы будут обрабатывать его с Джекила .

4. Опубликовать свой первый блог Post

Ваш сайт в настоящее время настроены, живая и хорошо выглядеть.Вы просто должны опубликовать свой первый пост в блоге:

Редактировать /_posts/2014-3-3-Hello-World.md, удаляя при этом содержимое заполнителя и введя свой собственный.Если вам нужно быстро праймер на написание в Markdown, проверить чит sheet__8 Адама Притчарда | ²⁷ .
Изменить имя файла, чтобы включить текущую дату и название вашей должности.Джекил требуется сообщения будут названы year-month-day-title.md .
Обновление титул в верхней части файла Markdown.Эти переменные в верхней части блоге называются передней вопрос, который мы будем копаться в немного позже.В этом случае, они указывают, макет в использовании и название блоге. Дополнительная передние того, variables ²⁸ существуют, например, permalink, tags и category .

Если вы хотели бы создать новые сообщения в блоге в браузере на GitHub.com, просто нажмите на значок “” в /_posts/.Только не забудьте отформатировать имя файла неправильно и включить блок переднего вещества, так что файл будет обработан Джекила .

²⁹
Создание нового поста на GitHub.com.( Просмотр большой version __38 | | 30__8 )

Общие проблемы # 6: Одна из проблем, я имел об использовании Джекил для моего блога, что он не имеет CMS, так что я бы не удобство в состоянии сделать быстрые изменения, войдя в интерфейс CMS, когда янахожусь вдали от моего ноутбука. Оказывается, что ваш блог Джекил будет иметь CMS, если вы используете GitHub Pages, потому что сама GitHub служит CMS.Вы можете редактировать сообщения в браузере, даже на телефоне, если вы хотите.Это может быть не так удобно, как другие CMS “, но вы не будете застрял, когда вы находитесь далеко от компьютера и нужно внести изменения .

Дополнительно Steps

Use Your Own Domain

Настройка доменное имя, чтобы указать на GitHub Pages является простой двухступенчатый процесс:

Перейти в корень хранилища блога, и отредактировать файл CNAME включить свое доменное имя (например, www.yourdomainname.com) .
Перейти к вашим регистратором доменных имен, и добавьте DNS CNAMEзапись указывая свой домен к GitHub Страницы:
- Тип: CNAME
- Хост: www.yourdomainname.com
- Ответ: yourusername.github.io
- TTL: 300

Тогда, обновления Что Мой DNS ³¹ как сумасшедший, пока вы не распространяются. Если вы столкнулись с проблемами, обратитесь к “ Настройка пользовательского домена с GitHub Pages ³².”

Импорт вашем блоге сообщения от WordPress

Перед импортом, вам нужно экспортировать данные из WordPress, возможно, массируя данные немного (например, при обновлении ссылки изображения), а затем импортировать его в свой новый веб-сайт Джекил.К счастью, несколько большие средства могут помочь .

Для экспорт от WordPress, я настоятельно рекомендую Бена Балтер один клик WordPress для Джекил Exporter ³³ плагина.Она экспортирует все ваши WordPress содержание в ZIP файле, в том числе сообщений, изображений и мета-данных, преобразование его в формат Джекила, где это необходимо.Хорошо на вас, Бен .

Другой вариант, чтобы экспортировать все сообщения в меню “Инструменты” на приборной панели WordPress, а затем импортировать его с importer ³⁴ .

Далее, нам необходимо, чтобы обновить нашу изображения references. Плагин Бена Балтер будет экспортировать все ваши изображения в папке.Затем, вам нужно скопировать их туда, где вы размещаете ваши изображения на вашем блоге Джекил.Это может быть в /images папки или доставки контента сети .

Тогда, у вас есть забавная задача обновления все ссылки на эти изображения по содержания WordPress.Потому что я был только обновление пяти или шести сообщения, быстро найти и заменить работал хорошо, но если у вас есть много контента, то это может быть стоит писать сценарий или проверить сценарии, другие письменные, такие как Пол Stamatiou’s ³⁵ .

Наконец, мы должны импорт comments.Будучи платформой для статических сайтов, Джекил браузер не поддерживает комментарии.Тем не менее, состоялся решение, как Disqus работает очень хорошо!Я рекомендую импортировать WordPress комментарии Disqus __65 | | 36__14 .Тогда, если вы используете Джекил Теперь вы можете вв …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Как установить Jekyll локально. | Метод научного тыка

Это хорошая идея установить Jekyll локально на своей машине/сервере и проверять правильность оформления статей/постов (да и всего сайта целиком) перед публикацией их на всеобщее обозрение.

Согласно документации Jekyll для установки нам понадобятся:

GNU/Linux, Unix, или macOS
Ruby версии 2.1 или выше, включая заголовочные файлы
RubyGems
GCC и Make

С первым пунктом всё понятно. У меня в наличие Ubuntu Server 16.04.3 LTS i386. Да, всё это крутится в виртуалке. Но не суть. Первый пункт выполнен. Переходим ко второму.

Ruby

Установить Ruby вместе с заголовочными файлами можно так:

sudo apt install ruby ruby-dev

После установки уточняем версию:

user@localhost:~$ ruby --version
ruby 2.3.1p112 (2016-04-26) [i386-linux-gnu]

RubyGems

Здесь всё опять просто: RubyGems устанавливаются вместе с ruby. Проверить, что всё установилось можно так:

user@localhost:~$ gem -v
2.5.1

Если же что-то пошло не так, то установить RubyGems можно обычным способом:

sudo apt install rubygems

GCC и Make

И пять всё просто:

sudo apt install gcc make

Проверяем версии:

user@localhost:~$ gcc --version
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
Copyright (C) 2015 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

user@localhost:~$ make -v
GNU Make 4.1
Built for i686-pc-linux-gnu
Copyright (C) 1988-2014 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Jekyll

Переходим к основной части — установке Jekyll. Мы будем следовать рекомендациям документации и установим Jekyll с помощью RubyGems

sudo gem install jekyll

Проверяем, что всё установилось

user@localhost:~$ jekyll --version
jekyll 3.5.1

Всё установлено. Что дальше?

А дальше остаётся отдать на растерзание Jekyll’у наш сайт и посмотреть как же он выглядит.

Переходим в папку с сайтом и запускаем Jekyll

user@localhost:~$ jekyll serve --host 0.0.0.0
Configuration file: /home/user/cool-site/_config.yml
            Source: /home/user/cool-site
       Destination: /home/user/cool-site/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 1.311 seconds.
 Auto-regeneration: enabled for '/home/user/cool-site'
    Server address: http://0.0.0.0:4000
  Server running... press ctrl-c to stop.

Опция --host 0.0.0.0 позволяет тестировать сайт не только локально, но и по сети. Это необходимо когда Jekyll хостится на виртуальной машине (как у меня), или когда надо потестрировать сайт с мобильных устройств (телефона, планшета). Короче полезная опция. Так же разработчики Jekyll’a позаботились о том, что не надо перезапускать сервер в случае изменения или добавления файла. Новый/измененный файл будет перекомпилирован автоматически. Остальные полезные опции стоит смотреть в документации

Итак, открываем браузер. Вводим адрес нашего сервера http://<адрес-сервера>:4000 и получаем свой сайт.

Как создать статический веб-сайт с помощью Jekyll

Jekyll — это бесплатный генератор статических сайтов с открытым исходным кодом . Подобно системе управления контентом (например, Drupal и WordPress), Jekyll можно использовать для создания веб-сайтов с богатой и простой в использовании навигацией. Однако, в отличие от Drupal и WordPress, Jekyll генерирует весь контент сразу, вместо того, чтобы ждать, пока люди посетят страницы вашего сайта.

Эта модель хорошо подходит для веб-сайта проекта с открытым исходным кодом, поскольку она повторно использует концепции, которые уже используются для исходного кода, такие как контроль версий.Главный недостаток, конечно же, в том, что на вашем сайте полностью отсутствуют динамические функции. Сюда входят «рекомендации» для каждого посетителя, комментарии пользователей или необычный интерфейс администрирования; содержание сайта будет одинаковым для всех пользователей. С другой стороны, статический сайт по своей сути более безопасен, потому что Jekyll работает на вашем компьютере и не подвергается атакам злоумышленников из Интернета. Настройка на сервере тоже будет простой.

Джекилл был представлен на Opensource.com в феврале 2016 г. («6 причин вести блог в Markdown с Jekyll»). Недавно я использовал его для создания веб-сайта QEMU, одного из проектов с открытым исходным кодом, над которым я работаю в Red Hat. В этой статье я дам советы для начинающих пользователей Jekyll, проведу читателей по созданию нового веб-сайта Jekyll и рассмотрю возможности создания тем и настройки Jekyll.

Начало работы

Самый простой способ установить Jekyll — через RubyGems. RubyGems доступен для большинства дистрибутивов GNU / Linux; в Fedora, например, вы можете установить его с помощью dnf install rubygems .

После установки RubyGems следующие шаги установят Jekyll и создадут основу для нового сайта Jekyll в каталоге test / :

драгоценный камень установить Джекил
Джекилл новый тест

Содержимое каталога будет выглядеть так:

-rw-r - r--. 1 pbonzini pbonzini 525 15 мар 11.50 about.md
-rw-r - r--. 1 pbonzini pbonzini 1402 15 мар 11.50 _config.yml
-rw-rw-r--. 1 pbonzini pbonzini 953 15 мар 11.50 Gemfile
-rw-rw-r--. 1 pbonzini pbonzini 1180 15 мар 11.51 Gemfile.lock
-rw-r - r--. 1 pbonzini pbonzini 213 15 мар 11.50 index.md
drwxrwxr-x. 2 pbonzini pbonzini 50 15 мар 11.50  _posts /

Два файла .md являются исходным кодом для страниц веб-сайта. Вы можете создать столько каталогов, сколько захотите, и Jekyll просканирует их на наличие файлов . md и .html . Остальные файлы Markdown находятся в каталоге _posts ; они обрабатываются для обеспечения функций, характерных для блогов, таких как даты и категории публикаций.

Каждый исходный файл состоит из обложки , описывающей характеристики страницы, за которой следует содержимое страницы в формате Markdown или HTML. Вот начало about.md :

---
макет: страница
title: О нас
постоянная ссылка: / about /
---

Это основная тема Jekyll. [...]

Все между — — это передняя часть. Он написан в YAML, удобном для чтения формате, который Jekyll использует для структурированных данных. Передняя часть редко, если вообще использует причудливые функции YAML.

Чтобы сгенерировать страницу, Jekyll берет макет из шаблона темы (в данном случае макет «страницы») и объединяет его с данными из главного материала и содержимого страницы. Начальная страница также сообщает Jekyll, куда поместить результат (в данном случае в /about/index. html ).

Теперь войдите в каталог, введите bundle exec jekyll serve (если вы работаете на нескольких веб-сайтах, bundle exec гарантирует, что вы используете правильную версию Jekyll) и укажите в браузере http: // 127.0.0.1: 4000 /. Вы увидите это:

^{Пример сайта, созданный с помощью «jekyll new», как показано в Mozilla Firefox.}

Ваш веб-сайт уже преобразован в HTML, и результат помещен в каталог _site / :

drwxrwxr-x. 2 pbonzini pbonzini 23 15 мар 11.54  около / 
drwxrwxr-x. 2 pbonzini pbonzini 21 15 мар 11.54  активы / 
-rw-rw-r--. 1 pbonzini pbonzini 3836 15 мар 11.54 feed.xml
-rw-rw-r--.1 pbonzini pbonzini 5301 15 марта 11.54 index.html
drwxrwxr-x. 3 pbonzini pbonzini 19 15 мар 11.54  jekyll /

В этой статье не рассматривается развертывание Jekyll через веб-сервер. Тем не менее, стоит упомянуть, что Jekyll является движком, стоящим за функцией «страницы» GitHub; Названия проекта GitHub « example . github.io» достаточно, чтобы ваш статический сайт был сгенерирован и опубликован по адресу http: // example .github.io / . Однако в этом случае вы потеряете возможность настраивать свой сайт с помощью нестандартных плагинов.

Конфигурация

Среди файлов, созданных jekyll init , есть _config.yml , который обеспечивает глобальную конфигурацию Jekyll. Как и в начале статьи, этот файл имеет формат YAML.

В документации Jekyll подробно описаны различные настройки. Значения по умолчанию обычно хороши; По моему опыту, я в основном использовал _config.yml для настройки работы плагинов, о которых я расскажу позже в этой статье. Одно исключение — значение по умолчанию для параметра постоянной ссылки:

постоянная ссылка: /: категории /: год /: месяц /: день /: заголовок.html

Если вы заметили каталог jekyll / на сгенерированном веб-сайте, то это именно то, откуда он! Пример веб-сайта включает в себя пример сообщения в блоге, а jekyll — это просто одна из категорий.

Я думаю, что это довольно странный формат постоянной ссылки; к счастью, изменить его так же просто, как добавить одну строку в файл _config.yml :

постоянная ссылка: / блог /: год /: месяц /: день /: заголовок /

Темы

К сожалению, у многих проектов с открытым исходным кодом есть веб-сайты, которые выглядят так, как будто они последний раз обновлялись в 1990-х годах, только без «незавершенных» GIF-файлов.Часто проблема заключается просто в отсутствии у автора опыта работы в качестве дизайнера. Если это так, вам, вероятно, следует поискать хороший бесплатный шаблон и адаптировать его к своим потребностям. jekyllthemes.org предлагает множество примеров тем для начала. Многие из них размещены на GitHub и уже имеют Gemfile ; в этом случае вы можете клонировать репозиторий и сразу же начать их использовать:

git clone https://github.com/daviddarnes/alembic jekylltest2
cd jekylltest2
установка пакета
пакет exec jekyll serve

Если вы выбрали тему, в которой нет Gemfile , вы можете использовать jekyll serve напрямую, без использования пакета , но в будущем вы можете столкнуться с проблемами обратной совместимости. Создать свой собственный Gemfile лучше, и это может быть так просто:

источник "https://rubygems.org"
рубин RUBY_VERSION
драгоценный камень "Джекилл"
группа: jekyll_plugins do
   драгоценный камень "jekyll-feed", "~> 0.6"
конец

Ваша собственная тема

Многие веб-сайты предлагают шаблоны CSS и HTML5, которые выпускаются под бесплатными лицензиями Creative Commons и могут использоваться бесплатно. Двумя примерами являются TEMPLATED и HTML5 UP !, которые предоставляют сотни адаптивных тем, и каждый из них включает как минимум домашнюю страницу и страницу второго уровня.Для веб-сайта QEMU я начал с их линейного шаблона, хотя результат совсем не похож на него.

Не все темы, которые вы найдете, подходят для блога — с другой стороны, вы можете не использовать функции ведения блога Jekyll — поэтому убедитесь, что ваш шаблон хорошо соответствует функциям, которые вам понадобятся на вашем веб-сайте. Например, если вы собираетесь использовать Jekyll для блога, вам, вероятно, следует ограничиться шаблонами, у которых есть дополнительная боковая панель. Боковую панель можно использовать для ссылки на архивы по месяцам или по категориям.

Убедитесь, что вы заранее ознакомились с требованиями шаблона. Например, один спорный аспект тем из TEMPLATED и HTML5 UP! заключается в том, что они используют JavaScript для обеспечения адаптивного поведения и даже стиля страницы. Некоторые из ваших посетителей могут отключить JavaScript, и даже если они этого не сделают, посетители могут увидеть в браузере «мигающий» нестилизованный контент во время загрузки JavaScript. В моем случае я удалил эту библиотеку и заменил ее простыми файлами CSS, не жертвуя отзывчивостью страницы.CSS упрощает создание отдельных таблиц стилей для «мобильных» и «настольных» программ просмотра, а для добавления кнопки меню для мобильных пользователей требуется всего лишь дюжина строк кода JavaScript. Если вы не хотите заниматься такой работой, заранее ознакомьтесь с требованиями шаблона.

Поскольку вы будете редактировать страницы и макеты Jekyll с помощью текстового редактора, вы также должны убедиться, что ваш шаблон имеет читаемый HTML и CSS; некоторые дизайнеры используют «миниатюрный» код HTML и CSS в своих демонстрациях и предлагают только фактический источник за определенную плату.

Начиная с шаблона, созданного jekyll new , вы можете добавить исходный код своей темы прямо в каталог исходного кода Jekyll. Как упоминалось ранее, система шаблонов Jekyll работает, определяя несколько макетов , которые хранятся в каталоге _layouts / . На сайте QEMU есть три основных макета, что вполне типично:

home для домашней страницы,
стр. для страниц сайта (без боковой панели),
и blog для страниц блога (с боковой панелью).

Макет блога дополнительно специализируется на один для сообщений блога и один для страниц архива.

Большие части исходного кода HTML могут использоваться разными макетами. Используйте систему шаблонов Jekyll, чтобы избежать дублирования, и поместите эти общие элементы в отдельный файл в каталоге _includes / . Таким образом можно извлечь весь заголовок HTML со ссылками на библиотеки CSS и JavaScript, меню навигации и карту сайта, кредиты и боковую панель блога.

Если вы щелкнули по ссылкам, вы заметили в файлах более сложное содержимое, например директивы шаблона. Не волнуйтесь; вы можете легко начать с содержимого заполнителя из шаблона CSS / HTML. Большинство шаблонов Jekyll организовывают свой каталог _includes аналогичным образом, и включение этих дополнительных элементов из стандартного шаблона Jekyll, из других руководств или с веб-сайта QEMU будет довольно простым.

Расширенные функции

То, что я представил до сих пор, должно быть достаточно для создания функционального веб-сайта, уникального для вашего проекта.Однако Jekyll предоставляет гораздо больше функций, которые могут сделать ваш сайт лучше и упростить вашу работу. Для сайта QEMU я использовал два: плагины и коллекции.

Плагины

Система плагинов

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

Многие плагины существуют в виде гемов Ruby; документация Jekyll снова объясняет, как добавить драгоценные камни в ваш Gemfile и установить их с помощью пакета . jekyll new уже настраивает gem jekyll-feed ; jekyll-feed — это плагин-генератор, который создает ленту сообщений блога в формате Atom.

Иногда, однако, существующие драгоценные камни не обеспечивают именно то, что вам нужно. В этом случае ваш веб-сайт может использовать настраиваемый плагин.

Пример плагина: архивы блога

Плагины

Generator позволяют добавлять каталоги и файлы в вывод Jekyll. Их код Ruby определяет подкласс Jekyll Generator класса, а генерирует , который может создавать произвольное количество выходных файлов.Например, подкласс генератора может просматривать все сообщения на веб-сайте, группировать их по месяцам и создавать страницу архива для каждого месяца.

Фактически, это именно то, что делает плагин ежемесячного архивирования. QEMU использует этот плагин и ссылается на ежемесячные архивы с боковой панели блога. Другой аналогичный плагин генерирует страницы архива на основе категорий, ссылки на которые находятся внизу каждого сообщения в блоге.

Эти плагины легко настраиваются. Ранее я упоминал, что макет архивов находится в отдельном файле в каталоге _layouts / . _config.yml сообщает плагину, какой макет использовать и как форматировать URL-адреса:

month_archive: {
  путь: 'блог', макет: 'архив'
}
category_archive: {
  путь: 'блог / категория', макет: 'архив', slugify: true
}

Пример плагина: MarkDown включает

Помимо создания страниц, плагины также могут использоваться для добавления новых команд в систему шаблонов Jekyll. Веб-сайт QEMU использует один такой плагин для упрощения своей страницы, возможно, самой сложной на сайте.

На этой странице есть горизонтальное меню, в котором можно выбрать, какую из четырех панелей отображать. Меню реализовано с использованием HTML и JavaScript, и код для него довольно длинный. Раздельное содержание панелей желательно, и, пока я занимался этим, я подумал, что написать его с использованием Markdown вместо HTML было бы неплохо. Как ни странно, Jekyll’s включает и , директивы include_relative позволяют включать только HTML. В моем случае мне нужно что-то вроде include_relative (который включает файл из текущего каталога, а не _includes / ), за исключением поддержки Markdown.

Решение — всего 20 строк кода; весь плагин помещается в один файл, который вы можете поместить в каталог _plugins / . Он предоставляет две новые шаблонные директивы — markdown и markdown_relative — последняя из которых была именно тем, что мне было нужно.

Коллекции

Еще одна интересная особенность Jekyll — это коллекции. Коллекции помогают включать структурированные данные на ваш веб-сайт — отделяя данные от представления, они упрощают задачу и делают ее менее подверженной ошибкам.

Данные коллекции хранятся в подкаталоге _data и отформатированы в YAML, например:

- имя: Паоло
  день рождения: 17 марта
- имя: Луиза
  день рождения: 28 ноября

Если указанные выше четыре строки сохранены в _data / Birthdays.yml , шаблоны смогут получить к нему доступ как site.data.birthdays . Следующий код Liquid:

{% для человека в site.data.birthdays%}
 День рождения {{person.name}} приходится на {{person.name}}.день рождения}}. 
{% endfor%}

будет преобразовано в:

День рождения Паоло 17 марта.

День рождения Луизы 28 ноября.

Я использовал коллекции на веб-сайте QEMU для представления наших релизов и снимков экрана для галереи домашней страницы. В обоих случаях представление дополнительно абстрагируется во включаемом файле, таком как этот для выпусков. Коллекция релизов особенно полезна; процесс выпуска QEMU длится долго, а красивый формат YAML сводит к минимуму бремя обновления веб-сайта.

Заключение

Использование Jekyll для создания нового веб-сайта QEMU было действительно забавным. Мне удалось создать первую версию веб-сайта примерно за день, и процесс обучения оставался мягким, поскольку я полировал его в соответствии с отзывами пользователей из Reddit и IRC-канала QEMU. Надеюсь, советы, которыми я поделился в этой статье, тоже могут вам помочь.

Как создать сайт за 15 минут с помощью Jekyll? — Гогул Иланго

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

Статические сайты имеют массу преимуществ по сравнению с динамическими. Генераторы статических сайтов, такие как Jekyll, предлагают гораздо больше возможностей, чем WordPress. Некоторые из интересных преимуществ:

Простой : Нет необходимости в программировании на стороне сервера. Нет бэкенда. Нет сервера. Базовых знаний о интерфейсных компонентах, таких как HTML, CSS и JavaScript, достаточно для создания веб-сайта.
Безопасность : Поскольку нет взаимодействия с сервером или базой данных, нет возможности атак.Фактически, вы можете увидеть весь код вашего веб-сайта, отображаемый через Jekyll.
Гибкость : Создавая собственный веб-сайт, вы получите полный контроль над ним. В отличие от WordPress, который имеет ограниченные возможности настройки, Jekyll предлагает полную настройку. Вы можете добавлять неограниченное количество классов CSS или файлов JavaScript и даже использовать препроцессор CSS, такой как Sass, что очень полезно!
Мощный : Ваш веб-сайт будет работать намного быстрее, поскольку при этом не требуется взаимодействие с сервером.
Хостинг : После создания вашего веб-сайта Jekyll, страницы GitHub предлагают бесплатный хостинг сайтов Jekyll с помощью GitHub. Вам просто нужна учетная запись GitHub и репозиторий, чтобы ваш сайт заработал!

В этом руководстве мы создадим наш первый потрясающий веб-сайт с использованием Jekyll, разместим его на GitHub бесплатно и получим бесплатное доменное имя, подобное https://gogul09.github.io , за 15 минут.

Установить Ruby в Windows

Во-первых, вам нужно установить Ruby, доступный здесь для Windows.Просто скачайте установщик и завершите установку. После этого откройте командную строку и введите gem -v. У вас должно получиться что-то вроде этого.

cmd gem -v

Также вы можете ввести ruby -v и для продолжения должно получиться что-то вроде этого.

cmd рубин -v

       1
  ruby 2.3.3p222 (21.11.2016, редакция 56859) [i386-mingw32]

Теперь установите пакет, который обеспечивает согласованную среду для проектов Ruby, отслеживая и устанавливая точные гемы и версии, которые необходимы.

cmd

Установить gem-страницу Github

После установки ruby вам необходимо установить гем под названием github-pages, который включает все зависимости, а также jekyll.

cmd

       1
  gem install github-pages

Убедитесь, что вы установили Jekyll, набрав jekyll -v в командной строке.

cmd jekyll -v

Вот и все! Вы установили все зависимости, чтобы создать свой первый отличный веб-сайт.

Создание нового сайта jekyll

Перед тем, как создать свой первый веб-сайт, вам нужно следовать структуре папок, чтобы все было организовано. В случае, если вы хотите создать несколько сайтов, правильная структура папок снижает нагрузку в будущем при ее сохранении. Я следую приведенному ниже, внутри которого все мои веб-сайты хранятся в отдельной папке.

путь к структуре папок

       1
2
3
4
5
6
  г: \ workspace \ web

g: \ workspace \ web (корневая папка)
  - first_awesome_website (подпапка)
  - second_cool_website (подпапка)
  - third_amazing_website (подпапка)

Чтобы создать свой первый веб-сайт, откройте командную строку, войдите в указанную выше структуру папок и введите первую команду Jekyll jekyll new site_name.В этом руководстве я сохраню имя веб-сайта first_awesome_website . Вы можете оставить любое имя, какое захотите.

cmd jekyll новый first_awesome_website

       1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26
27
28
29
30
31 год
32
33
34
  Выполняется установка пакета в g: / workspace / web / first_awesome_website ...
Bundler: получение метаданных гема с https: //rubygems.org / ...........
Bundler: получение метаданных версии с https: // rubygems.org / ..
Bundler: получение метаданных зависимостей с https://rubygems.org/.
Bundler: устранение зависимостей ...
Bundler: установка public_suffix 3.0.2
Bundler: Использование колоратора 1.1.0
Bundler: установка ffi 1.9.25 (x86-mingw32)
Bundler: использование расширенного пересылки 2.6.0
Bundler: Установка rb-fsevent 0.10.3
Bundler: Установка ruby_dep 1.5.0
Bundler: Установка kramdown 1.17.0
Bundler: Использование жидкости 3.0.6
Bundler: Использование наемника 0.3.6
Упаковщик: Использование румян 1.11.1
Bundler: использование safe_yaml 1.0.4
Bundler: установка thread_safe 0.3,6
Bundler: использование Bundler 1.14.0
Bundler: Установка адресного 2.5.2
Bundler: Установка rb-inotify 0.9.10
Bundler: установка pathutil 0.16.1
Bundler: Установка tzinfo 1.2.5
Bundler: установка sass-listen 4.0.0
Bundler: установка listen 3.1.5
Bundler: Установка tzinfo-data 1.2018.5
Bundler: установка sass 3.5.6
B

Начало работы с Jekyll Collections

Недавно я начал процесс обновления своего веб-сайта с портфолио, чтобы лучше понять, кто я и чем занимаюсь.Всегда приятно поиграть с личным проектом и продемонстрировать свои возможности как разработчика. Моей первой задачей при переделке сайта-портфолио было решить, как я собираюсь его создать. Я решил использовать Джекилла. Недавно был выпущен Jekyll 2.0, и вместе с ним появилась интересная новая функция — Коллекции. В этой статье я сделаю обзор того, что делает Jekyll великим, как быстро начать работу, и объясню все тонкости Jekyll Collections. Для праймера по Jekyll ознакомьтесь с документацией.Это очень хорошо сделано и весьма полезно, особенно если вы хотите глубже погрузиться в функциональность и возможности Jekyll.

Что делает Джекила великим

Решив переделать сайт своего портфолио, я знал, что мне нужно что-то простое и легко настраиваемое. Мне не обязательно нужна была база данных или какой-либо бэкэнд в этом отношении. Решение CMS, такое как WordPress или Craft, было бы излишним — я просто хотел чего-то простого. В своих поисках я наткнулся на Джекила. Он простой, легкий и готовый к работе с блогами.Он анализирует Markdown, имеет встроенное форматирование кода, создает статические файлы и даже поддерживает хостинг через GitHub. Все эти (и многие другие!) Аспекты Jekyll позволяют легко работать с ним и делают правильный выбор для меня. В версии 2.0 Jekyll были внесены некоторые значительные улучшения, и больше всего мне понравились коллекции Jekyll. Но сначала давайте рассмотрим, как начать работу с Jekyll.

Быстрая настройка Jekyll

Для установки Jekyll есть несколько требований.Вам потребуется установить Ruby и RubyGems, и вам будет удобно работать с терминалом. Кроме того, распространенной проблемой, с которой вы можете столкнуться в Mac OSX, является отсутствие самых последних инструментов командной строки X-Code. Самые последние инструменты командной строки можно найти здесь, в разделе загрузок на портале разработчиков Apple. Для доступа к загрузкам вам понадобится Apple ID.

С учетом требований, вы всего в 4 строках в терминале от запуска проекта Jekyll. Откройте свой терминал и выполните эти 4 команды:

  ~ $ gem install jekyll
~ $ Джекилл новый jekyllTest
~ $ cd jekyllTest
~ / jekyllTest $ jekyll serve

По порядку, вот что здесь происходит:

Устанавливает Jekyll в вашу систему.
Создает новый каталог, полный файлов шаблонов Jekyll.
Изменяет рабочий каталог на вновь созданный «jekyllTest».
Запускает сервер для обслуживания этих файлов на localhost: 4000.

Из всех шаблонных файлов, помещенных в рабочий каталог, главный файл, который нас больше всего интересует при настройке, — это config.yml . config.yml — это глобальный файл конфигурации для Jekyll. В этом файле вы можете указать параметры сборки, параметры сервера, объявить коллекции и установить метаданные для всего сайта, используя YAML.Возможность использовать внешний вид YAML — особенно приятная особенность Jekyll. Термин «обложка» на самом деле пришел из мира книжного дизайна. В книгах титульный лист находится в начале книги и содержит все метаданные, связанные с книгой: название, автор, издатель, оглавление и т. Д. Точно так же мы можем использовать предварительную информацию в формате YAML для объявления метаданных всего сайта в файле _config.yml и метаданных страницы в файлах .markdown . Затем на эти метаданные можно ссылаться как на переменные, используя движок жидких шаблонов, используемый Jekyll.

Что такое коллекции?

Коллекции — это наборы документов, которые имеют те же функции, что и сообщения. Коллекции обладают силой сообщений, но все в ваших руках. Следует отметить, что на данный момент коллекции не поддерживают разбиение на страницы, как сообщения, хотя коллекции документов могут отображаться отдельно как страницы. Их также можно отобразить в виде списка с помощью движка шаблонов Liquid, встроенного в Jekyll. Коллекции имеют собственное пространство имен по всему сайту с настраиваемыми метаданными и свойствами.

Коллекции

работают благодаря чтению Jekyll в вашей определенной коллекции в файле _config.yml при сборке сайта. Jekyll добавляет начальную часть YAML документа коллекции к глобальным шаблонным переменным Liquid сайта и, при необходимости, отображает каждый документ на отдельной странице. Коллекции отлично подходят для любого произвольного набора контента, который вы хотите организовать на своем сайте. Хорошими примерами для коллекции являются проекты, над которыми вы работали, организаторы мероприятия, коллекция музыки, документация по API и т. Д.В качестве примера возьмем сборник музыки.

Настройка коллекций

Первый шаг к настройке коллекций — сообщить Jekyll, что у вас есть коллекция в файле _config.yml .

  коллекций:
  - музыка

Теперь добавьте в корень каталога проекта папку с тем же именем, что и коллекция. Обязательно поставьте перед папкой знак подчеркивания. Добавьте в папку коллекции несколько документов в формате markdown.

По вашему выбору, вы можете указать отображение страницы для каждого документа, изменив файл _config.yml как так.

  коллекций:
  Музыка:
    вывод: true

Коллекции в действии

Теперь, когда коллекция определена и контент добавлен в коллекцию, теперь к нему можно получить доступ на любой странице сайта Jekyll. Например, самые последние дополнения к вашей коллекции могут быть показаны на вашей домашней странице с использованием синтаксиса шаблонов Liquid. Также можно получить доступ к любой настраиваемой обложке YAML, объявленной в каждом документе.

  {% для альбома на сайте.ограничение на музыку: 3%}
      
        
         {{album.title}} 
         {{album.short-description}} 
      
{% endfor%}

Это отличный способ показать связанные изображения, заголовки и т. Д. В списке документов. Вы можете использовать встроенный атрибут url для ссылки на отображаемую страницу документа.

Заключение

Jekyll — отличное решение для создания небольших статичных сайтов.Стоит упомянуть, что ему будет сложно конкурировать с сайтами, которым требуется надежная серверная часть, включая обработку данных и поиск. Об этом следует помнить при обсуждении выбора Jekyll для вашего следующего проекта. При этом установка Jekyll выполняется быстро, и в нем есть несколько настраиваемых параметров, которые позволяют указать, как вы хотите, чтобы сайт работал. Требования минимальны, а функция быстрой настройки дает вам полностью функционирующий сайт.

Недавно добавленная функциональность коллекции имеет простую конфигурацию объявления, а также некоторые настраиваемые атрибуты, позволяющие отображать ваши документы на их собственных страницах.Использование параметров конфигурации, а также внешнего вида YAML дает вам возможность отображать документы в различных областях сайта. Jekyll действительно выделяется в той области, для которой он был разработан, а функциональность коллекций открыла двери для использования сайтов с большим количеством контента.

Создайте сайт для участников Jekyll

📈 Оптимизируйте и увеличивайте свой доход Неограниченное количество участников
Нет ограничений на количество платных или бесплатных членов, которые вы можете иметь.Они могут быть включены в любое количество предлагаемых вами тарифных планов.
Многоуровневый доступ
Создавайте бесплатные или платные уровни плана для участников, выбирая, какие планы предоставляют доступ к определенному контенту и страницам участников.
Обновления и понижения
Ваши участники могут повышать или понижать тарифные планы в любое время. Мы взимаем с них правильную пропорциональную сумму.
Прерванные подписки
Мы автоматически восстановим для вас все оставленные регистрации участников с помощью передовых шаблонов электронной почты и всплывающих окон на веб-сайтах.
Ошибка восстановления заряда
Мы автоматически возместим за вас все неудавшиеся повторяющиеся платежи участника с помощью передовых шаблонов электронной почты и всплывающих окон веб-сайтов.
Альтернативы отмены
Если участники хотят отменить подписку, вы можете предложить им альтернативы (продлить пробную версию, получить скидку, обратиться в службу поддержки).
Автоматические дополнительные продажи
Когда существующие участники пытаются просмотреть контент, к которому у них нет доступа, мы покажем им, к каким вашим планам они должны присоединиться.
Мгновенные выплаты
После того, как участники оплатят ваши планы для участников, их платеж будет зачислен на ваш банковский счет всего через 2 рабочих дня!
⚡️ Предлагайте гибкие тарифные планы и биллинг Варианты оплаты
Взимайте с участников регулярную (например, 99 долларов США в месяц), многократную (например, 3 платежа по 100 долларов США), разовую или бесплатную оплату.
Бесплатные пробные периоды
Предложите участникам бесплатный пробный доступ, прежде чем они будут автоматически списаны.Испытание может быть сколь угодно длинным или коротким.
Вытекание содержимого
Выберите, когда ваши новые участники получат доступ к определенным страницам и контенту. Вы также можете выбрать, когда они потеряют доступ.
Даты выставления счетов
Выберите любой день месяца для выставления счетов участникам, и мы автоматически обработаем любую пропорциональную долю для их первоначальной регистрации.
Сертификат участника
Вы можете вручную одобрить каждого зарегистрировавшегося члена, прежде чем он получит доступ к любому контенту или страницам участников.
Истечение срока доступа
Вы можете выбрать, когда (или если) истечет срок действия ваших членских планов, чтобы закрыть доступ участников к вашему контенту и страницам участников.
Коды купонов
Создайте любые коды купонов, которые захотите, а затем попросите участников применить их при подписке на платные планы для участников.
Пользовательские поля регистрации
Соберите любую информацию профиля, которую хотите от ваших пользователей во время регистрации. Вы сами решаете, что требуется, а что нет.
Множественные валюты
Платите своим клиентам в более чем 100 основных валютах, которые Stripe поддерживает, включая доллары США, австралийские доллары, канадские доллары, евро, фунты стерлингов, CNY, BRL и JPY.
🤝 Полная интеграция Интеграция полосы
Интегрируйте Stripe (лучший современный платежный шлюз) для безопасной обработки всех платежных данных ваших участников.
Интеграция Zapier
Интегрируйте Zapier для подключения MemberSpace к популярным сторонним сервисам, таким как MailChimp, ConvertKit, Trello, Google Docs и другим!
Интеграция с форумом
Добавьте форум сообщества (через Circle или Muut) на любую страницу своего веб-сайта, чтобы участники могли легко взаимодействовать друг с другом.
Партнерская интеграция
Интегрируйте партнерскую программу (через Rewardful), чтобы отслеживать и платить аффилированным лицам за любых новых участников, которых они направляют к вам.
Интеграция каталогов
Добавьте каталог участников (через Community Box) на любую страницу вашего сайта, чтобы автоматически выводить профили ваших участников.
Интеграция подкастов
Интегрируйте частный подкаст только для участников (через Castos), чтобы только активные участники получали доступ к ленте подкастов.
🤗 Простой в использовании и настраиваемый VIP-поддержка
Если у вас возникнут вопросы — просто напишите нам по электронной почте или посетите наш офис в режиме реального времени. Да реально с вами поговорит настоящий человек 🙂
Адаптивный мобильный
Ваши участники могут войти в систему или создать учетную запись с любого устройства по своему желанию (телефон, планшет, ноутбук или настольный компьютер).
Индивидуальный стиль
Легко меняйте стиль (шрифты, цвета, кнопки) форм входа, регистрации и учетной записи, которые видят ваши участники.
Аккаунты участников
Участники
могут редактировать свой профиль, обновлять свою кредитную карту, просматривать историю счетов, отменять свое членство и многое другое.
Пользовательская формулировка
Вы можете изменить формулировку по умолчанию практически для любого текста, ссылки, формы, предупреждения и кнопки, которые видят ваши участники.
Добавить куда угодно
Добавьте свой логин, регистрацию и форму учетной записи в любую часть вашего веб-сайта, рассылки по электронной почте или в социальных сетях.
участников экспорта
Ищите, фильтруйте и экспортируйте свой список участников (в файл CSV) в любое время, а затем просматривайте его в Excel или Google Таблицах.
Добавить участников вручную
Вы можете вручную добавлять и приглашать своих участников, чтобы им не приходилось регистрироваться на вашем сайте.
Доступ к API
Получите доступ к нашему интерфейсному API через хуки Javascript, чтобы получить различные данные о членах, такие как имя, уникальный идентификатор и изображение профиля.
🔐 Обеспечьте безопасность и соответствие содержания требованиям Настоящая безопасность
В отличие от других программ для членства, мы позволяем вам полностью защитить любой контент (PDF, видео, mp3 и т. Д.), Который вы хотите.
Статистика участников
Просматривайте графики активности для каждого входа в систему, просмотра содержимого и загрузки, а также тенденций регистрации за периоды времени.
Счета участников
Ваши участники могут получить доступ к своей истории выставления счетов за членство и загрузить счета в формате PDF, когда захотят.
Безопасность шифрования
Мы используем SSL-шифрование банковского уровня, чтобы обеспечить безопасность всех ваших учетных записей и платежной информации.
GDPR, CCPA и SCA
Мы соблюдаем правила GDPR, CCPA и SCA, а также обеспечиваем соблюдение требований всех ваших участников.
Сбор налогов
Выберите размер налога (если таковой имеется) для сбора для каждого создаваемого вами плана. Налог будет отображаться как отдельная позиция в каждом счете-фактуре.
Неограниченная защита
Защитите неограниченное количество страниц своего веб-сайта и создайте неограниченное количество членских планов, к которым можно присоединиться.
Несколько администраторов
Добавьте участников-администраторов и выберите, к каким сайтам в вашей учетной записи они могут получить доступ (отлично подходит для команд и агентств).
Электронные письма участников
Настройте формулировку и формат любых электронных писем, которые ваши участники будут получать от вас через MemberSpace (e.г. Сброс пароля).
.

Jekyll создание сайта: Практическое руководство по Jekyll / Хабр

Практическое руководство по Jekyll / Хабр

Написание постов

Статичность не во вред

Особенности хостинга на Github

Зачем тут YAML

Шаблоны: самое главное!

Неожиданная мощь Liquid

YAML + Liquid = ?

Заключение

Jekyll: обзор, отзывы, аналоги, интеграция, сайт

Описание

Преимущества сервиса

Возможности сервиса

Построить блог с Джекил и GitHub Страницы

Джекила Простой Purpose

Преимущества Going Static

Давайте попробуем Out

1. Вилка Начиная Point

2. размещаться на вашем GitHub Account

3. Настройте Ваше Website

4. Опубликовать свой первый блог Post

Дополнительно Steps

Use Your Own Domain

Импорт вашем блоге сообщения от WordPress

Как установить Jekyll локально.<img src='/800/600/https/cdn.dribbble.com/users/7971/screenshots/1277091/incorporated_1x.jpg' /> | Метод научного тыка

Ruby

RubyGems

GCC и Make

Jekyll

Всё установлено. Что дальше?

Как создать статический веб-сайт с помощью Jekyll

Начало работы

Конфигурация

Темы

Ваша собственная тема

Расширенные функции

Плагины

Пример плагина: архивы блога

Пример плагина: MarkDown включает

Коллекции

Заключение

Как создать сайт за 15 минут с помощью Jekyll? — Гогул Иланго

Установить Ruby в Windows

Установить gem-страницу Github

Создание нового сайта jekyll

Начало работы с Jekyll Collections

Что делает Джекила великим

Быстрая настройка Jekyll

Что такое коллекции?

Настройка коллекций

Коллекции в действии

Заключение

Создайте сайт для участников Jekyll

Неограниченное количество участников

Многоуровневый доступ

Обновления и понижения

Прерванные подписки

Ошибка восстановления заряда

Альтернативы отмены

Автоматические дополнительные продажи

Мгновенные выплаты

Варианты оплаты

Бесплатные пробные периоды

Вытекание содержимого

Даты выставления счетов

Сертификат участника

Истечение срока доступа

Коды купонов

Пользовательские поля регистрации

Множественные валюты

Интеграция полосы

Интеграция Zapier

Интеграция с форумом

Партнерская интеграция

Интеграция каталогов

Интеграция подкастов

VIP-поддержка

Адаптивный мобильный

Индивидуальный стиль

Как установить Jekyll локально. | Метод научного тыка