Все генераторы статических страниц имеют единственную и, казалось бы, простую задачу: создать статический HTML-файл и все его ресурсы.

Обслуживание статического HTML-файла дает много очевидных преимуществ, таких как более простое кэширование, более быстрое время загрузки и более безопасная среда в целом. Каждый генератор статической страницы создает HTML-вывод по-разному.

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

Обзор популярных фреймворков статических страниц

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

Давайте подробнее рассмотрим каждый из них и сравним их основные характеристики:

Джекил

  • написано на Ruby,
  • "из коробки" поддерживает шаблонизатор Liquid;

Посредник

  • написано на Ruby,
  • "из коробки" поддерживает шаблонизаторы ERB и Haml;

Хьюго

  • написано на Go,
  • "из коробки" поддерживает шаблонизатор Go;

Hexo

  • написано на JavaScript,
  • "из коробки" поддерживает EJS и Pug.

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

Настройка генераторов статических сайтов

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

Документация Джекила

Документация посредника

Документация Хьюго

Hexo-документация

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

Например, вот как вы начинаете новый проект в разных фреймворках:

Джекил

jekyll new my_website

Посредник

middleman init my_website

Хьюго

hugo new my_website

Hexo

hexo init my_website

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

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

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

Переход на статический генератор

Если у вас уже есть готовый проект Wordpress, вы можете относительно легко перенести его на генератор статических страниц.

Для Jekyll вы можете использовать плагин Jekyll Exporter. Для посредника вы можете использовать инструмент командной строки под названием wp2middleman. Вы можете использовать Wordpress в Hugo Exporter для миграции Hugo, а для Hexo вы можете прочитать мое руководство по миграции с Wordpress на Hexo, которое я написал в прошлом году.

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

Содержание

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

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

В Jekyll вы должны поместить статью в каталог _posts. Название статьи должно иметь следующий формат: ГОД-МЕСЯЦ-ДЕНЬ-заголовок.МАРКУП. Другие генераторы имеют аналогичные правила и предоставляют команду для создания новой статьи.

Вот команды для создания новой статьи в Middleman, Hugo и Hexo:

Посредник

middleman article my_article

Хьюго

hugo new posts/my_article.md

Hexo

hexo new post my_article

В Markdown вы ограничены определенным набором синтаксиса. К счастью для нас, все генераторы также могут обрабатывать необработанный HTML. Например, если вы хотите добавить привязку к определенному классу, вы можете добавить ее, как в обычный HTML-файл:

This is a text with <a class="my-class" href="#">a link</a>.

Передняя Материя

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

Например, вот как вы можете добавлять теги к своей статье.

tags:
  - web
  - dev
  - featured

Шаблоны в генераторах статических страниц

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

{{ page.title }}

Давайте попробуем отобразить список тегов из первой части нашего сообщения в Jekyll. Вам нужно проверить, доступна ли переменная. Затем вам нужно перебрать теги и отобразить их в неупорядоченном списке.

{%- if page.tags -%}
 <ul>
   {%- for tag in page.tags -%}
     <li>{{ tag }}</li>
   {%- endfor -%}
 </ul>
{%- endif -%}

Посредник:

<% if current_page.data.tags %>
 <ul>
   <% for tag in current_page.data.tags %>
     <li><%= tag %></li>
   <% end %>
 </ul>
<% end %>

Хьюго:

{{ if .Params.Tags }}
 <ul>
   {{ range .Params.Tags }}
     <li>{{ . }}</li>
   {{ end }}
 </ul>
{{ end }}

Hexo:

<% if (post.tags) { %>
 <ul>
   <% post.tags.forEach(function(tag) { %>
     <li><%= tag.name %></li>
   <% } ); %>
 </ul>
<% } %>

Примечание. Рекомендуется проверять, существует ли переменная, чтобы предотвратить сбой процесса сборки. Это сэкономит вам часы на отладку и тестирование.

Использование переменных

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

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

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

Дата файлы

Если вы хотите хранить данные, которые недоступны в файлах Markdown, вам следует использовать файлы данных. Например, если вам нужно сохранить список ваших социальных ссылок, которые вы хотите отображать в нижнем колонтитуле вашего сайта. Все генераторы статических страниц поддерживают файлы YAML и JSON. Кроме того, Jekyll поддерживает файлы CSV, а Hugo поддерживает файлы TOML.

Давайте сохраним эти социальные ссылки в нашем файле данных. Поскольку все генераторы поддерживают формат YAML, давайте сохраним данные в файле social.yml:

- name: Twitter
  href: https://twitter.com/malimirkeccita
- name: LinkedIn
  href: https://github.com/maliMirkec/
- name: GitHub
  href: https://www.linkedin.com/in/starbist/

По умолчанию Jekyll хранит файлы данных в каталоге _data. Посредник и Хьюго используют каталог данных, а Hexo использует source/_data directory.

Для вывода данных вы можете использовать следующий код:

Джекил

{%- if site.data.social -%}
 <ul>
   {% for social in site.data.social %}
     <li><a href="{{ social.href }}">{{ social.name }}</li>
   {%- endfor -%}
 </ul>
{%- endif -%}

Посредник

<% if data.social %>
 <ul>
   <% data.social.each do |s| %>
     <li><a href="<%= s.href %>"><%= s.name %></li>
   <% end %>
 </ul>
<% end %>

Хьюго

{{ if $.Site.Data.social }}
 <ul>
   {{ range $.Site.Data.social }}
     <li><a href="{{ .href }}">{{ .name }}</a></li>
   {{ end }}
 </ul>
{{ end }}

Hexo

<% if (site.data.social) { %>
 <ul>
   <% site.data.social.forEach(function(social){ %>
     <li><a href="<%= social.href %>"><%= social.name %></a></li>
   <% }); %>
 </ul>
<% } %>

Помощники

Шаблоны часто поддерживают фильтрацию данных. Например, если вы хотите сделать заголовок в верхнем регистре, вы можете сделать это так:

{{ page.title | upcase }}

У посредника похожий синтаксис:

<%= current_page.data.title.upcase %>

Хьюго использует следующую команду:

{{ .Title | upper }}

У Hexo другой синтаксис, но результат тот же.

<%= page.title.toUpperCase() %>

Как генераторы статических страниц обрабатывают активы

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

SASS

Jekyll поддерживает Sass из коробки, но вы должны соблюдать некоторые правила. Посредник также поддерживает Sass из коробки. Хьюго компилирует Sass с помощью Hugo Pipes for Sass. Hexo делает это через плагин.

ES6

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

Картинки

Оптимизация изображения также не поддерживается по умолчанию. Также, как и плагины es6, существует более одного плагина для оптимизации изображений. Сделайте свою домашнюю работу и попробуйте найти лучший плагин для работы. В качестве альтернативы вы можете использовать стороннее решение. В моем блоге, построенном с помощью Hexo, я использую бесплатный план Cloudinary. Я разработал облачный тег и предоставляю адаптивные и оптимизированные изображения с помощью облачных преобразований.

Плагины, Расширения

Генераторы статических страниц имеют мощные библиотеки, которые позволяют настраивать ваш веб-сайт. Каждый плагин служит своей цели. Вы можете найти широкий спектр плагинов, от LiveReload для улучшения среды разработки до создания Sitemap или RSS-канала.

Вы можете написать новый плагин или расширение. Перед тем как это сделать, проверьте, существует ли аналогичный плагин. См. Список плагинов Jekyll, Расширения посредников и Плагины Hexo. У Hugo нет плагинов или расширений. Однако он поддерживает пользовательские шорткоды.

Шорткоды в Markdown

Шорткоды - это фрагменты кода, которые вы можете разместить в документах Markdown. Эти фрагменты выводят HTML-код. Hugo и Hexo поддерживают шорткоды. Есть встроенные шорткоды, как на рисунке в Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Шорткод Hexo youtube:

{% youtube video_id %}

Если вы не можете найти подходящий шорткод, вы можете создать новый. Например, Hexo не поддерживает встраивание CanIUse, и я разработал новый тег, который поддерживает встраивание CanIUse. Не забудьте опубликовать свой плагин на npm или официальном сайте генератора. Сообщество будет признательно, если вы это сделаете.

CMS

Генераторы статических страниц могут быть накладными расходами для нетехнического специалиста. Не всем легко научиться использовать команды или Markdown. В этом случае пользователь может воспользоваться Системой управления контентом для сайтов JAMstack. В этом списке вы можете найти систему, которая наилучшим образом соответствует вашим потребностям. Знайте, что настройка CMS занимает некоторое время, но в долгосрочной перспективе вы и другие пользователи могли бы получить выгоду от более эффективной публикации контента.

Бонус: шаблоны JAMstack

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

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

Заключение

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

Например, Smashing Magazine в прошлом году перешел на JAMstack, и им удалось значительно ускорить работу своего сайта. Есть и другие успешные примеры статических веб-сайтов, и все они разделяют один и тот же принцип - создавать статические ресурсы и доставлять их по сетям доставки контента для более быстрой загрузки и повышения удобства работы пользователей.

Со своим статическим веб-сайтом вы можете сделать гораздо больше: от использования Wordpress REST API в качестве бэкэнда до использования функций Lambda. Существуют отличные решения даже для простых веб-сайтов, например, использование HTTPS из коробки или обработка отправки форм.

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

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

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

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

Генератор статических сайтов (иногда сокращенно SSG) создает статическую HTML-страницу с использованием исходных файлов, что позволяет использовать гибридный подход. Теоретически это означает, что вы можете воспользоваться некоторыми преимуществами статических страниц, не отказываясь от практичности CMS.

Первоначально опубликовано на www.toptal.com.