7 причин использовать генератор статических сайтов

Генераторы статических сайтов (SSG) становятся всё более популярными за последнее десятилетие. В этой статье обсуждается, как сайт может извлечь выгоду из удобных для разработчиков процессов сборки, более простого развёртывания, повышения производительности и лучшей безопасности, предлагаемых статическим сайтом.

Для начала давайте разберёмся, что мы подразумеваем под термином Генератор статических сайтов...

Что такое статический сайт?

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

Трудности возникают по мере того, как ваш сайт становится больше и сложнее. Обратите внимание на навигацию: она может быть одинаковой в каждом файле, но добавление новой страницы требует обновления всех остальных. Даже ссылки на CSS и изображения могут стать неудобными по мере развития структуры каталогов. Возможно, вы рассматривали такие варианты, как использование SSI или PHP, но более простым вариантом может быть система управления контентом (CMS)…

Что такое Система управления контентом (CMS)

CMS обычно предоставляет административные панели управления. Это позволяет авторам писать контент хранящийся во внутренней бузе данных. Когда посетитель запрашивает URL-адрес, CMS:

1. определяет, какая страница требуется
2. запрашивает соответствующий контент из базы данных
3. загружает HTML-шаблон (обычно из файловой системы)
4. отображает содержимое в шаблоне
5. возвращает отформатированную HTML-страницу в браузер посетителя.

Это происходит почти мгновенно. Шаблон может включать код для создания меню в соответствии с иерархией навигации. Жизнь прекрасна, и более четырёх из десяти человек выбирают CMS WordPress с открытым исходным кодом на основе PHP/MySQL для управления своим веб-сайтом.

К сожалению, CMS поднимает на другой набор проблем:

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

Что такое генератор статических сайтов (SSG)

SSG — это компромисс между использованием статического сайта с ручным кодированием и полноценной CMS, сохраняя при этом преимущества обоих. По сути, вы создаёте статический веб-сайт на основе HTML-страницы, используя концепции, подобные CMS, такие как шаблоны. Контент можно извлечь из базы данных, файлов Markdown, API или любого практичного места хранения.

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

Термин статический не означает неизменный. SSG создаёт страницу один раз, а CMS — при каждом запросе. Конечный результат идентичен, и пользователи никогда не заметят разницы.

Родственной концепцией является headless или decoupled CMS. Они используют такой интерфейс, как WordPress, для управления контентом, но позволяют другим системам получать доступ к данным через REST API или GraphQL API. Таким образом, SSG, такая, как Eleventy, может создать статический веб-сайт, используя содержимое страницы WordPress, извлечённое с внутреннего сервера. Полученный HTML-файлы можно загрузить на веб-сервер, но установка WordPress никогда не должна быть публичной за пределами организации.

Термин JAMStack (JavaScript, API и Markup) также используется в отношении статических сайтов. Это относится к развитию фреймворков, бессерверных функций и связанных с ними инструментов, которые генерируют статические файлы, но позволяют создавать более сложные интерактивные элементы.

Популярные генераторы статических сайтов включают Jekyll, Eleventy, Gatsby, Hugo и Metalsmith. Генераторы статических сайтов доступны для большинства языков (более подробно на StaticGen). Фреймворки, такие как Next.js, по возможности статически отображают страницы, но также позволяют разработчику запускать код на стороне сервера, когда это необходимо.

Давайте рассмотрим преимущества использования генераторов статических сайтов…

1. Гибкость

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

На статическом сайте виджет можно просто вставить в файл напрямую или с помощь фрагмента/сниппета. Ограничений не много, потому что вы не ограничены ограничениями, накладываемыми CMS

2. Лучшая производительность

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

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

3. Меньше зависимостей на стороне сервера

Типичная установка WordPress требует:

• подходящая операционная система, такая как Ubuntu или CentOS
• веб-сервер, такой, как Apache или nginx
• PHP с соответствующими расширениями и конфигурациями веб-сервера
• MySQL
• приложение WordPress
• необходимые плагины
• код темы/шаблона.

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

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

4. Повышенная надёжность

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

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

5. Превосходная безопасность

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

CMS открывает несколько векторов атак. Наиболее очевидным является станица логина: она настолько же безопасна, как самый слабый пароль пользователя. Имейте в виду, что любая страница, на который выполняется код на стороне сервера, также предлагает потенциальные возможности использования — например, запуск спам-сообщений через вашу контактную форму. Может быть неочевидно, что кто-то хочет получить доступ; худшие преступники хотят оставаться скрытыми.

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

• Кто-то может получить доступ к серверу через SSH или FTP и испортить страницы или загрузить файлы. Однако обычно достаточно просто проверить наличие изменений (возможно использовать git status), стереть весь сайт и создать его снова.
• API-интерфейсы, вызываемые статическим сайтом, отображаются в браузере и могут использоваться так же, как и любой код на стороне сервера, например, программа для отправки электронных писем. Надлежащие методы безопасности, такие как CORS и CSP помогут.

6. Вопросы клиентского контроля

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

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

1. использовать существующую CMS и очищать данные перед созданием, или
2. обеспечить более просты рабочие процессы, такие как редактирование файлов на основе Git в StackEdit или Hackmd.io.

7. Контроль версий и тестирование

Данные базы данных нестабильны. CMS позволяет пользователям добавлять, удалять или изменять контент по своему усмотрению. Очистка всего сайта осуществляется всего в несколько кликов. Вы можете создавать резервные копии баз данных, но даже если это делается регулярно, вы всё равно можете потерять некоторые данные.

Статический сайт, как правило, безопаснее. Контент может храниться в:

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

Тестирование также становиться проще, потому что сайт можно создать и посмотреть в любом месте — даже на ПК клиента.

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

Так что всё хорошо в мире статических сайтов. Или нет? Прочтите об этом в следующей статье 7 причин не использовать генератор статических сайтов.