1. Джекил
2. установка
3. содержание
4. Темы и шаблоны
5. Рабочий процесс разработки
6. Управление активами
7. Полезные функции
8. Джекилл в итоге
9. Хьюго
10. установка
11. содержание
12. Темы и шаблоны
13. Рабочий процесс разработки
14. Управление активами
15. Полезные функции
16. Хьюго в двух словах
17. В итоге

Оригинальная статья: Хьюго Голд Джекилл? 6 факторов, которые вы должны знать от Криса Макрэ

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

Когда речь заходит о создании статических сайтов, в настоящее время на рынке доминируют два решения - Jekyll и Hugo. Вопрос в том, какой из них лучше для вас?

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

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

Джекил

Созданный Томом Престоном-Вернером, основателем GitHub, Jekyll находится у истоков мобильность статических сайтов что мы сейчас наблюдаем.

Созданный в 2008 году, Jekyll представлен как «простой готовый к блогу статический конструктор сайтов».

В настоящее время это самый популярный GSS (генератор статических сайтов) с более чем 33 000 звезд на GitHub, что в значительной степени связано с его интеграцией в GitHub Pages ,

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

установка

Установить Jekyll нелегко, особенно в Windows.

Jekyll разработан на Ruby и поэтому требует, чтобы на вашем компьютере была установлена ​​последняя версия Ruby.

Это не так плохо, но это не так просто, как загрузка приложения. К счастью, процесс установки Jekyll хорошо документировано ,

содержание

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

Простейшая форма контента в Jekyll хранится в корне вашего проекта в виде Markdown или HTML- файлов. Эти файлы содержимого обрабатываются на этапе создания, во время которого из шаблонов вашей темы создается соответствующий файл HTML.

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

--- title: Дата дома: 2017-01-30 теги: [hello, world] --- ## Hello world Это содержимое моей страницы!

Jekyll поддерживает хронологическое содержимое (например, сообщения в блогах), которые хранятся в папке _posts и соответствуют номенклатуре yyyy-mm-dd-title-of-the-article.md.

Jekyll также поддерживает загрузку смоделированных данных из файлов YAML, JSON или CSV, расположенных в каталоге _data. Эти данные доступны в ваших шаблонах с помощью {{site.data}}.

Темы и шаблоны

У Джекилла есть большое сообщество и выбор бесплатных или платных готовых тем.

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

Темы для Jekyll разработаны с использованием Shopify's Liquid Templating Engine . Liquid - это безопасный шаблонизатор, предназначенный для запуска стороннего кода на своих серверах. Liquid разработан, чтобы помочь вам делать то, что вы хотите, без необходимости добавлять нативный код Ruby.

<div class = "container"> {% для публикации в site.posts%} <div class = "article"> <h2> {{post.title}} </ h2> <p> {{post.content}} </ p> {% для тега в post.tags%} <span> {{tag}} </ span> {% endfor%} </ div> {% endfor%} </ div>

Это отлично подходит для начинающих и разработчиков, которые хотят создавать функциональные, чистые и простые модели.

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

Для разработчиков из мира традиционных CMS, таких как WordPress, Liquid должен быть прост в обращении.

Рабочий процесс разработки

Разработка с Jekyll действительно великолепна по сравнению с разработкой с использованием традиционных CMS, работающих на базе данных.

Jekyll интегрирует сервер разработки , который может быть запущен с помощью набора команд exec jekyll serve.

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

Управление активами

Jekyll также обеспечивает очень простое управление активами, компилирует файлы Sass и CoffeeScript.

Все файлы .scss, .sass или .coffee, имеющие разделители Front Matter, будут обработаны Jekyll и преобразованы в файлы .css и .js.

--- --- предупреждение "Привет, мир!"

Тот факт, что Front Matter добавляется к каждому файлу, делает так, что многие важные сайты, которые превращаются в рабочие при Jekyll, выбирают более современные инструменты генерации, такие как Gulp или Webpack ,

Эти инструменты дают вам больший контроль над вашими CSS, JS-файлами, вашими изображениями и вашим HTML-кодом и позволяют минимизировать и оптимизировать. Эти инструменты также предоставляют вам доступ к BrowerSync или LiveReload, что облегчает разработку.

Полезные функции

Сердце Jekyll предлагает минимальные возможности и не объединяет многое из того, что можно ожидать от современного веб-сайта, такого как:

• управление меню,
• Создание XML-карты сайта
• создание канала RSS / Atom,
• управление скриптами Google Analytics,
• управление комментариями,
• многоязычный / i18n менеджмент,
• и многое другое ...

Для этого нужно будет использовать сторонние плагины Jekyll, которые бывают пяти типов:

• генераторы , которые позволяют завершить и изменить процесс генерации Jekyll,

• конвертеры , которые добавляют поддержку новых форматов файлов,

• команды , которые расширяют параметры командной строки Jekyll,

• теги , которые добавляют новые теги Liquid,

• фильтры , которые изменяют отображение тегов Liquid и переменных.

Например, лесное хозяйство разработало плагин jekyll-menus что позволяет управлять меню в CMS Forestry.

Еще одна удобная особенность Jekyll импорт контента из WordPress , С 30% Интернета, заблокированного в WordPress, приятно знать, что переход на современный стек очень прост.

Лесное хозяйство уже опубликовало сравнительные показатели Джекила и Хьюго ,

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

Джекилл ставит в большинстве этих тестов от 1,4 до 6 секунд. Представьте, что у вас есть команда, которая делает сотни изменений в неделю на вашем сайте, в вашем блоге или вашей документации ...

Это потенциально представляет собой более 10 часов потерянного поколения каждый год!

Джекилл в итоге

Теперь, когда мы рассмотрели основные функции Jekyll, давайте сделаем шаг назад и взглянем на этот статический конструктор сайтов, взвесив все за и против.

чтобы:

• Простой шаблонный движок. Шаблоны страниц Jekyll очень похожи на синтаксис, найденный в WordPress или Craft.

• Широкий выбор тем. Есть много готовых тем для Джекилла.

• Большой выбор плагинов. Существуют десятки плагинов для добавления необходимых вам функций.

• Интеграция в GitHub Pages. Установка сайта с помощью Jekyll и GitHub Pages очень проста.

против:

• Медленное поколение. Если вы разрабатываете небольшой сайт, это не проблема. Но на крупных сайтах время генерации может увеличиться.

• Отсутствие нативных функций. Первоклассные функции лучше поддерживаются и интегрированы. Этого нет в Джекилле.

Хьюго

Hugo - это статический конструктор сайтов, созданный Стивом Францией, ведущим разработчиком языка программирования Google Go. Хьюго, конечно, разработан в Go!

Появившись в 2013 году, Хьюго быстро стал вторым по популярности GSS после Jekyll и в настоящее время имеет более 24 000 звезд на GitHub.

Хьюго имеет огромное преимущество перед всеми остальными GSS. Он быстр .

У этого также есть одно из самых (если не большинство) активных сообществ для GSS.

установка

Установка Hugo проще, чем установка Jekyll, используете ли вы Windows или систему на основе UNIX.

Поскольку Hugo - это Go - скомпилированный язык - установить или обновить Hugo - просто загрузить двоичный файл и указать вашей системе использовать его.

Гуго предлагает подробная документация сделать это.

содержание

Как и в случае с Jekyll, все содержимое вашего проекта хранится в текстовых файлах.

В Hugo содержимое, которое будет сгенерировано, хранится в папке содержимого вашего проекта. Вы можете использовать разные форматы: по умолчанию поддерживаются Markdown, Mark и HTML , и существуют сторонние расширения для поддержки Asciidoc и reStructuredText .

Hugo также поддерживает TOML, YAML и JSON для Front Matter, в то время как Jekyll поддерживает только YAML.

+++ title = "Home" date = "2017-01-30" tags = ["hello", "world"] +++ ## Hello World Это пример Front Matter в TOML

Hugo также поддерживает внешние данные, которые могут храниться в каталоге / data вашего проекта или извлекаться из сторонних источников, таких как REST API. Поддерживаемые форматы для источников: JSON и CSV.

Темы и шаблоны

Даже если Хьюго всего 4 года, многие темы уже доступны для этой СОБ в условиях активного роста.

Если вы используете командную строку, установить темы, начиная с темы Хьюго это довольно просто.

Хьюго использует пакет шаблонов Перейти по умолчанию. Как и в случае с Liquid, в ваши шаблоны можно добавить немного логики.

<div class = "container"> {{range.Site.Pages} <div class = "article"> <h2> {{.Title}} </ h2> <p> {{.Content}} </ p> {{range .Tags}} <span> {{. }} </ span> {{end}} </ div> {{end}} </ div>

Еще раз, это отлично подходит для начинающих, но вам нужно будет расширить возможности движка шаблонов, используя шорткоды, чтобы добавить дополнительные функции.

К сожалению, синтаксис пакета шаблонов Go не так очевиден для начинающих, как у Liquid, и на первый взгляд не будет таким знакомым.

Тем не менее, Хьюго также предлагает поддержку обоих шаблонизаторов янтарный и туз , Эти два языка могут показаться более знакомыми разработчикам из традиционных CMS, таких как WordPress.

Рабочий процесс разработки

С Hugo работать приятнее, чем с Jekyll, потому что генерация почти мгновенная, а сервер LiveReload активен по умолчанию.

В папке вашего проекта запустите команду hugo serve, чтобы запустить сервер разработки.

Это позволяет вам получить доступ к вашему сайту по локальному IP-адресу. Каждое изменение, внесенное в ваш проект, запускает сборку и автоматически перезагружает сайт в вашем браузере.

Управление активами

До версии 0.43 Хьюго не преобразовывал ваши активы (CSS, JS, SVG и т. Д.), Он просто копировал все файлы, которые находятся в каталоге / static вашего проекта. Теперь вам больше не нужно передавать процесс сборки в Webpack или Gulp скомпилируйте ваши файлы Sass или сократите ваш CSS и JS ,

Полезные функции

Хьюго сияет множеством мощных функций, которые он интегрирует по умолчанию по сравнению с Jekyll и другими GSS.

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

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

Например, с помощью функции пользовательского экспорта вы можете сгенерировать: ваш статический сайт, его альтернативную версию для Google AMP, а также файлы JSON, готовые для использования мобильным приложением.

Среди очень практичных особенностей Хьюго можно отметить:

• Управление меню,
• Создание XML Sitemap
• Генерация каналов RSS / Atom,
• Интеграция с аналитикой (через Google Analytics)
• Интеграция комментариев (через Disqus)
• Многоязычность / управление i18n
• Пользовательские форматы экспорта

Хьюго очень быстр. Forestry опубликовал статью о выступление Хьюго и Джекилла и сравнил оба. Хьюго вышел победно.

Помните, что во время этих тестов Хьюго генерировал сайты в среднем в 35 раз быстрее, чем Jekyll, генерация большинства из этих сайтов заняла менее секунды.

Во время теста @darinpope пользователю Hugo удалось создать 600 000 страниц менее чем за 5 минут !.

Хьюго в двух словах

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

чтобы:

• Очень быстро Время генерации порядка одной секунды.

• Очень универсальный. Полный набор функций по умолчанию для корпоративных сайтов.

• Готовы к бизнесу Благодаря поддержке нескольких экспортных и многоязычных сайтов, вы готовы к работе!

• Процветающее сообщество. Легко получить помощь. Задайте вопрос на форуме, и у вас будет ответ.

против:

• Нет расширений. Hugo не поддерживает плагины, поэтому добавить пользовательские функции невозможно.

• Сложный шаблонный синтаксис. Хотя движок шаблонов Хьюго универсален, он довольно неинтуитивен и сложен для начинающих.

В итоге

Мы рассмотрели основные функции Jekyll и Hugo, подчеркнув простоту установки, управление контентом, языки шаблонов страниц, рабочие процессы разработки, предлагаемые функции и производительность.

Эти два генератора являются лидерами в своей области, и существует множество примеров крупных проектов, которые используют их как healthcare.gov , разработанный с помощью Jekyll, и новый сайт Smashing Magazine разработан с Хьюго.

Теперь пришло время сделать свой выбор! Вот краткое резюме, чтобы помочь вам:

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

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

Похожие

Комментарии