Генераторы статических сайтов что это

Что такое «генератор статических сайтов»?

Достаточно часто можно услышать про существование определенного «дуализма» при планировании будущего сайта – или делаем «руками» статический сайт, т.е. php/html, или берем динамическую CMS – WordPress, Joomla и т.д. и делаем в ней.

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

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

Это конечно очень упрощенно, чтобы была понятна суть. Таким образом CMS система при обращении к определенной странице сайта, сначала «дергает» из базы различные компоненты содержимого страницы – что там должно быть показано – какие тексты, ссылки, картинки и т.д., затем с использованием действующей темы оформления, которая содержит информацию о том, что каким стилем показывать, формирует уже собственно ту страничку в виде реального html, которую показывает веб-сервер пользователю.

В статическом же сайте все намного проще. На сервере лежат сами страницы html, которые веб-сервер и показывает пользователю. Проблема же здесь заключается в том, что при необходимости что-то поправить в html – нужно залезть «руками» в этот файл. И простейшая операция типа добавления новой записи блога (1 минута в динамической CMS при наличии готового контента) – в обычном html – это достаточно простая, но рутинная и раздражающая работа минут на 30. Надо сверстать новую страничку с этой записью. В списке статей блога надо вставить дополнительную строчку с заголовком и ссылкой, ведущей на новую запись, и возможно удалить что-то старое или перенести на другую страницу архива.

На помощь приходит эта технология – генераторы статических сайтов. Что это такое – это тоже в какой-то мере CMS, только работает она следующим образом:
На сервере лежат специально размеченные файлы с контентом, а также шаблон сайта и различные файлы с настройками или плагинами
Каждый раз при «генерации» сайта, эта CMS создает уже готовые, статические страницы html, которые показываются пользователю. То есть – она «ищет» файлы с контентом, «собирает» из них структуру сайта и сами страницы, применяя к ним шаблон дизайна.

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

Главным преимуществом здесь является низкая требовательность к ресурсам за счет того, что сайт лежит в статическом виде, готовый к тому, чтобы показываться веб-сервером. Очевидно, что заDDOSить статический сайт, это радикально более сложная задача, чем динамический – который при каждом обращении лезет к базе данных и собирает странички для показа пользователю «на лету».

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

Какие есть недостатки у генераторов статических сайтов? Возможно сюда следует отнести недостаточную (пока!) дружественность к пользователю. В какой-то мере у этой технологии сохраняется налет «гиковости», и научиться работать с такой системой «обычному человеку» все-таки сложнее, чем с WordPress.

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

Источник

10 лучших генераторов статичных сайтов (Часть 1)

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

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

1. Jekyll

В двух словах: Король генераторов статичных файлов. Jekyll – это самый широко используемый генератор, включающий превосходную документацию, огромное сообщество и отличную поддержку. Даже GitHub предлагает встроенную поддержку Jekyll в сервисе GitHub Pages. Jekyll может похвастаться поддержкой блогов. Создавать статичные блоги на Jekyll действительно просто. Для этого требуются только базовые знания веб-разработки. Он правда прекрасен, потому что его легко настраивать даже новичкам, при этом он обладает действительно мощными характеристиками для тех, кто знает, как их использовать.

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

Jekyll основан на движке Liquid Template от Shopify. Он работает полностью на Ruby, поэтому его легко устанавливать вместе с взаимозависимостями, используя rvm или с помощью упаковщика. Jekyll также включает опции миграции, если вы хотите перенести что-то с WordPress, Blogger или любого другого сайта блогов. Он без сомнений является первым из генераторов сайтов с точки зрения количества пользователей. И он находится на стадии активной разработки (последнее изменение для его репозитория GitHub вышло за день до публикации этой статьи).

Чтобы установить Jekyll, просто введите эту команду в Ruby:

2. Pelican

Pelican – это генератор статичных сайтов на Python. Он отличается размещением мультиязычного контента, выделением кода (синтаксиса), а также простым генерированием RSS и Atom Feeds. Pelican включает неплохой набор плагинов, которые находятся в центральном репозитории GitHub. Он поддерживает три формата документов по умолчанию: Markdown, reStructuredText и Ascii Doc.

Самый простой способ установить пеликан – с помощью pip:

3. Middleman

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

Middleman обеспечивает поддержку большинства современных инструментов веб-разработки, таких как HAML, Coffeescript, Sass и прочих. Стандартный движок для шаблонов – eRb, но он позволяет переключаться на стандартный движок шаблонов по вашему усмотрению. Все движки шаблонов на базе Tilt (полный список представлен здесь) работают на Middleman. Он изначально поддерживает 2 формата конфигураций – YAML и JSON. Титульная страница вашего контента также должна быть YAML или JSON, в зависимости от используемого формата конфигураций.

Установить Middleman с помощью Ruby можно следующим образом:

4. Metalsmith

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

Другими словами «Так как все состоит из плагинов, библиотека на самом деле представляет собой просто абстракцию для управления директорией файлов». В результате это дает то, что вы легко используете Metalsmith как инструмент для работы с проектом, генератор электронных книг, инструмент для построения технической документации и др. (это всего несколько примеров, продемонстрированных на сайте Metalsmith).

Metalsmith основан на Node.js, и его можно установить с помощью менеджера пакета узлов, используя следующую команду:

5. Harp

Harp включает встроенную предварительную обработку для Jade, Markdown, LESS, Sass, Coffeescript, EjS и Stylus без каких-либо дополнительных настроек. Он также позволяет использовать макеты / частичные таблицы форм с Jade и EjS, для чего в других генераторах статичных сайтов требуется специальный плагин.

Источник

Cogear.JS – современный генератор статических сайтов

Хочу представить вниманию хабровчан генератор статических сайтов с открытым исходным кодом, написанный на Node.JS, в основе которого лежит Webpack.

Проект вдохновлён тем же Jekyll, но в основе своей использует современный технологический стек. Например, предоставляет возможность «горячей подгрузки» (без перезагрузки страницы) изменённых скриптов и стилей.

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

Особенности

Для каких целей подойдёт:

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

Можно сделать даже коллективный блог, при помощи Pull Requests на Github.

При помощи Firebase или любого другого API, написанного на любом языке (PHP, Ruby, Python, Node.JS) или даже с помощью WordPress (JSON-API), и современного фронтэнд фреймворка типа Vue.JS или React, можно сделать динамический сайт под более сложные задачи: интернет-магазин, каталог продукции и так далее.

Для чего не подойдёт:

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

Требования

Надобно иметь установленные Node.JS (9.x или выше) и NPM (обычно идут вместе).

Скачать и установить (если ещё этого не сделали).

Рекомендуется последняя (v10.12.0) верися Node.JS.

Теперь можно сгенерировать первый сайт.

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

Перейдите в директорию, где хранятся Ваши веб-сайты.

Вызовите комнаду на генерацию нового сайта:

После чего проследуйте в данную директорию:

Запустите Cogear.JS в режиме development (разработка) или production (подготовка к продакшену) (больше о режимах работы).

Опции

Полезные ссылки

Если тема вызовет интерес хабровчан, могу сделать серию туториалов, что да как.

Источник

Выбираем генератор статических сайтов

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

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

Критерии сравнения

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

Обзор генераторов

MiddleMan, Jekyll, Octopress

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

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

MiddleMan мы активно используем в собственной практике: именно на нем работает промо-сайт облачного хранилища, а также сайт selectel.io. Несомненным его преимуществом является хорошая и подробная документация, написанная простым и понятным языком. Для Middleman написано немало расширений и плагинов, список которых постоянно обновляется.

Поддерживается деплой с помощью FTP, SFTP, rsync, git (на официальном сайте выложены скрипты для автоматизации процедуры деплоя; еще одно расширение опубликовано на GitHub). Возможен также деплой на AWS и BitBalloon (имеются соответствующие плагины).

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

Расширений и плагинов для Jekyll существует довольно много (см. информацию на официальном сайте, а также здесь и здесь). Официальные плагины «заточены» в основном на работу с GitHub Pages. Плагины, опубликованные на GitHub, в большинстве своем предназначены для расширения возможностей блоггинга (добавление облака тэгов, полнотекстовый поиск по блогу и даже специализированный плагин для научных и образовательных блогов).

Поддерживается деплой по FTP, а также с помощью rsync и git.

В отличие от двух предыдущих продуктов, Octopress является специализированным генератором: он по сути представляет собой надстройку над Jekyll c дополнительными плагинами и responsive-шаблоном, обеспечивающими более удобное ведение блогов.

В качестве формата разметки постов по умолчанию используется Markdown, но можно использовать и обычный HTML. Несомненным плюсом Octopress является поддержка переезда с других площадок: например, все записи из блога на WordPress можно перенести в новый статический блог при помощи специального скрипта (правда, велика вероятность того, что после переноса оформление некоторых текстов может «поломаться», и их потребуется править вручную). «Из коробки» поддерживается и работа с сервисом Disqus, что упрощает перенос комментариев. Блог на основе Octopress можно интегрировать с социальными сетями (Facebook, Twitter, Google Plus и другими).

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

По умолчанию поддерживается деплой с помощью git (на GitHub Pages или Heroku) или rsync (на любой хостинг, где можно настроить SFTP или можно запустить rsync). Можно настроить и деплой по FTP (о том, как это сделать, можно прочитать, например, здесь).

Этот генератор статических сайтов изначально замышлялся как полный аналог Jekyll, только написанный на Python — отсюда и название, отсылающее к знаменитой повести Р.Л. Стивенсона «Странная история доктора Джекилла и мистера Хайда».

Следует различать старую и новую версию Hyde. Старая версия основана на Django templates; в настоящее время ее разработка приостановлена (последние коммиты в репозитории на GitHub датируются 2009 — 2010 годом). Новый Hyde (см. также репозиторий на GitHub) в настоящее время находится в активной разработке.

По функциональности новый Hyde не отличается от MiddleMan и Jekyll. Мы немного потестировали его, и он произвел на нас вполне приятное впечатление. Из обнаруженных недостатков выделим только один: проект, как уже сказано выше, находится в стадии активной разработки. Именно поэтому документация к нему представлена пока что в очень сжатом и лаконичном виде, а плагинов и расширений существуют очень мало (вот их небольшой список на официальном сайте).
Поддерживается деплой на GitHub Pages и Amazon S3.

Будем надеяться, что в будущем этот инструмент получит дальнейшее развитие и станет более удобным в работе.

Pelican

Pelican также написан на Python. По сравнению со многими генераторами статических сайтов он обладает исключительно широким набором функций: работа с черновиками, интеграция с социальными сетями, добавление изображений, конвертация HTML-страниц в PDF, поддержка многоязычности и многое другое. Он очень хорошо подходит для ведения блогов (существует плагин для переноса блогов на WordPress).

Посты можно писать в Markdown, а также в форматах reStructuredText и Asciidoc.

Устанавливается Pelican через pip. При установке пользователю будут заданы несколько вопросов: где хранить файлы сайта, как будет называться сайт, куда и каким способом его нужно деплоить. Поддерживается множество способов деплоя: по FTP, по SSH, на Amazon S3, GitHub Pages, Dropbox и RackSpace Cloud Files.

Grow (см. также официальный репозиторий на GitHub) — очень интересный и перспективный инструмент, обнаруженный нами совсем недавно. Он написан на Python. Чтобы установить Grow, достаточно скачать скрипт с официального сайта — все необходимые пакеты будут установлены в автоматическом режиме.

В основе Grow лежит подход «конфигурация, а не код». Что это значит? Чтобы создать новый проект (в терминологии Grow проекты называются подами — pods), нужно клонировать на локальную машину тему, которая представляет собой репозиторий на GitHub. Тема включает набор конфигурационных файлов, с помощью которых описывается вся архитектура веб-сайта. Никакого программного кода при этом писать не нужно.

Все настройки проекта хранятся в конфигурационном файле podspec.yaml. В нем указываются следующие параметры:

Grow может автоматически переводить текстовые фрагменты — для этого используется библиотека Goslate library, работающая с Google Translate. Чтобы перевести сайт, достаточно просто выполнить команду translate.

В качестве площадки для деплоя можно указать любой веб-сервер. Поддерживается деплой на Dropbox, Google Cloud Storage, Amazon S3, Dropbox, Google AppEngine.

Конечно, в рамках беглого обзора рассказать обо всех особенностях работы с Grow вряд ли возможно. Рекомендуем попробовать — инструмент очень перспективный.

Nanoblogger

Этот генератор статических сайтов, ориентированный на создание блогов, примечателен тем, что написан на bash. В качестве основных инструментов для создания статичных HTML-страниц он использует утилиты командной строки cat, grep и sed.

При всей своей простоте Nanoblogger по возможностям не уступаем многим генераторам, написанным на Python или Ruby. Из его полезных функций можно выделить поддержку Atom/RSS, возможность создания на сайте календаря, сортировку постов по категориям, создание архива постов и другие.

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

С Nanoblogger удобно работать из командной строки. Все команды подробно описаны в документации, их синтаксис прост и понятен.

Исходный код также написан предельно просто, в случае необходимости его всегда можно модифицировать и «подогнать» под нужды конкретного проекта (см., например, публикацию, в которой автор делится собственным опытом конфигурирования блога на основе Nanoblogger).

Для nanoblogger существуют плагины и расширения. Официальный набор плагинов (nanoblogger extras) также включен в официальные репозитории и устаналивается стандартным способом.

К сожалению, в 2013 году работа по развитию и усовершенствованию Nanoblogger была приостановлена на неопределенный срок (см. информацию на официальном сайте).

DocPad

DocPad написан на CoffeeScript. Для работы с ним на клиентской машине должен быть установлен NodeJS.

Многими он используется для блогов, но реальные возможности его применения гораздо шире. Этот продукт не представляет собой генератор статических сайтов в чистом виде: его можно использовать и как генератор, и как движок, и как шаблонизатор. DocPad оснащен достаточно удобным API, который позволяет использовать только те функции, которые нужны в данный момент; остальные всегда можно реализовать самостоятельно.

Несомненным преимуществом DocPad является, конечно же, очень подробная документация. Кроме того, на официальном сайте опубликованы так называемые «скелеты» — заготовки, на основе которых пользователи могут создавать собственные сайты.

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

На официальном сайте опубликованы скрипты, автоматизирующие деплой на различные площадки: Heroku, Appfog, Windows Azure, Docker, GitHub Pages и другие. Имеется и специализированный скрипт для деплоя в облачные хранилища — Amazon S3 и GoogleStorage.

Заключение

Результаты проделанного обзора можно резюмировать в виде следующей таблицы:

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

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

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

Если вы не можете оставлять комментарии здесь — добро пожаловать в наш блог.

Источник