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

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

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

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

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

В этом посте мы подробно рассмотрим следующие фреймворки статических страниц: Jekyll , Middleman , Hugo и Hexo . Это ни в коем случае не единственные генераторы, но они наиболее часто используемые, поддерживаемые большими сообществами и множеством полезных ресурсов.

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

• Джекилл
  • написано на руби,
  • поддерживает шаблонизатор Liquid из коробки;
• Посредник
  • написано на руби,
  • поддерживает шаблонизаторы ERB и Haml из коробки;
• Хьюго
  • написано на Go,
  • поддерживает шаблонизатор Go из коробки;
• Гексо
  • написанный на JavaScript,
  • поддерживает EJS и Pug из коробки.

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

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

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

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

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

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

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

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

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

Джекилл

jekyll new my_website

Посредник

middleman init my_website

Хьюго

hugo new my_website

Гексо

hexo init my_website

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

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

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

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

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

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

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

Содержание

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

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

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

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

Посредник

middleman article my_article

Хьюго

hugo new posts/my_article.md

Гексо

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 }}

Шестнадцатеричный:

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

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

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

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

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

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

Дата файлы

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

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

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

Jekyll по умолчанию хранит файлы данных в _data . Middleman и Hugo используют каталог данных, а 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 }}

Гексо

 <% 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 компилирует файлы ресурсов, где бы они ни находились. Middleman обрабатывает только активы, хранящиеся в исходной папке. По умолчанию для ресурсов в Hugo используется каталог ресурсов. Hexo предлагает размещать активы в глобальном исходном каталоге.

SASS

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

ES6

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

Картинки

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

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

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

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

Шорткоды в Markdown

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

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

Шестнадцатеричный шорткод YouTube:

{% youtube video_id %}

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

CMS

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

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

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

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

Подведение итогов

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

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

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

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