Новые приключения в Джекилле

1. Бинарное Солнце
2. Установка Джекила
3. Использование Jekyll
4. Хостинг Джекилл
5. Плагины Джекила
6. Джекилл Советы
7. Так?

я использую WordPress много, но пару недель назад я решил перестроить один из моих старых сайтов с помощью Jekyll (редактор статических сайтов), чтобы я мог разместить его на страницах Github. Как Я объяснил раньше - Мне нравится пробовать разные вещи, чтобы я мог продолжать учиться и развиваться.

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

Бинарное Солнце

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

Чтобы снизить расходы на хостинг, я решил использовать Github Pages, которые, в свою очередь, предложили использовать Jekyll для управления контентом.

Установка Джекила

Я не использовал Джекилла раньше, поэтому я направился к Джекил Веб-сайт. Jekyll - это генератор статических сайтов, который использует Рубин которым я пользуюсь не очень часто. Поскольку Ruby казался устаревшим, я подумал, что сначала обновлю его. Однако для этого мне пришлось установить Ruby Version Manager (RVM) ,

Я установил RVM, который также обновлял Git, а затем попытался обновить сам Ruby. Только он сказал мне, что была проблема с Homebrew поэтому мне пришлось переустанавливать это также.

В конце концов, я заработал, но для тех, кто любит избегать командной строки, было довольно больно.

Использование Jekyll

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

Я начал с пустого сайта и создал базовый шаблон. Я новичок в том, что я хотел показывать игры HTML5, поэтому я настроил коллекцию игр (Jekylls-эквивалент WordPress Custom Post Types). Чтобы настроить коллекцию, вы просто создаете новый склад файлов и определяете папку (коллекцию) и ее свойства в файле config.yml.

Хостинг Джекилл

Для хостинга я использую страницы Github. Чтобы настроить это, вы можете создать новый проект Github, а затем настроить параметры проекта для добавления статического сайта. Как только у вас появится новый проект, развертывание сайта репозитория так же просто, как зафиксировать изменение и отправить его в Github. Как только это будет сделано, Github перестраивает содержимое сайта.

Однако Github имеет ограничение пропускной способности для бесплатных аккаунтов. Самый простой способ решить эту проблему (о которой я знаю) - использовать Cloudflare для кэширования данных. У Cloudflare есть отличный учебник по настройка Cloudflare со страницами Github ,

Плагины Джекила

Поскольку я использую страницы Github, сайт может использовать только несколько тщательно подобранных плагинов. Для этого сайта я использую Jekyll SEO Tag и Jekyll Redirect From.

SEO-тег позволяет мне настроить основные свойства SEO и заботится об оптимизации различных элементов в заголовке каждой страницы. Redirect from позволяет вам настроить перенаправления javascript, которые могут позаботиться о перемещении или удалении страниц. Имейте в виду, что это не замена правильного перенаправления 301 - но это лучшее, что мы можем сделать. Вы можете просмотреть все поддерживаемые плагины Github на сайте поддержки Github.

Джекилл Советы

Jekyll (на страницах Github) по умолчанию использует SASS, но он не поддерживает плагины CSS с автопрефиксом. Так что я воспользовался Префикс бесплатной библиотеки JS от Lea Verou ,

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

Сайт Binary Sun имеет много javascript (по крайней мере, это произойдет, как только я закончу), и поэтому я хотел объединить все файлы в один. Чтобы это произошло, я создал файл app.js (вы можете назвать файл как угодно), а затем использовал язык шаблонов для включения других js-файлов с относительным путем. Чтобы файл js был проанализирован как файл шаблона - вам просто нужно добавить Jekyll 'Front Matter' в начало файла. Вы можете увидеть это в действии в мой app.js файл.

Чтобы создать страницу 404, вам просто нужно создать файл 404.md в корне вашего сайта Jekyll - и тогда Github Pages позаботится о загрузке нужного вам файла 404.

Используйте флаг –incremental при создании сайта - это сильно ускоряет процесс. По-видимому, он не работает со всеми плагинами Jekyll, но, похоже, он отлично работает с теми, которые я использую из плагинов Github Pages. Команда будет выглядеть так:

подача джекила

Decaching CSS и JS всегда весело. Поскольку Jekyll обновляет весь сайт каждый раз, когда вы его создаете, вы можете дешифровать ваши стили и сценарии, добавив время сборки к строке запроса, как показано ниже:

Так?

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

Похожие

Комментарии