Статические сайты: что это и почему их стоит использовать

Автор фотографии – Danielle MacInnes

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

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

Если вы читаете этот текст, то вы, скорее всего, в интернете. А если вы в интернете, то вы, скорее всего, знаете что такое сайт. Ну или по крайней мере имеете представление. На всякий случай: сайт это логически связанный набор HTML-страниц, доступных по HTTP. В данный момент вы находитесь на сайте, доступном по адресу https://meownoid.pro и просматриваете страницу /post/2020/static-sites/.

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

У каждого ресурса в интернете (у каждой страницы) есть уникальный идентификатор – URI (Uniform Resource Identifier). Документ, определяемый этим адресом, единственен в данный момент времени. То есть, когда ваш браузер запрашивает страницу по адресу, например, https://spreadprivacy.com/privacy-resolutions-for-2020/, сервер отдаёт ему совершенно конкретный HTML-документ, зафиксированный во времени.

Вы этот документ (а точнее результат его рендеринга) просматриваете. Если вы обновите страницу через 10 минут или через день, вы можете получить уже другую версию документа. В случае с блогом в примере выше страницы практически не обновляются после создания. Но в Facebook, например, они могут меняться ежесекундно, т.к. постоянно появляются новые посты и комментарии.

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

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

Кому он нужен?

Статический сайт необходим всем, чей контент редко меняется во времени. Сюда совершенно точно можно отнести:

  • Персональные блоги;
  • Коллективные блоги с ограниченным числом авторов;
  • Приземляющие страницы (landing pages);
  • Сайты с документацией;
  • Галереи изображений, портфолио;
  • Информационные сайты (персональные страницы, сайты малого и среднего бизнеса);
  • Новостные сайты.

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

Преимущества и недостатки

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

Предположим, вы хотите завести личный блог с множеством фотографий на нём. Через год ваш сайт в лучшем случае будет занимать около 100 гигабайт на диске. Посчитаем стоимость владения в год в случае статического сайта и аналогичного решения на WordPress. В качестве платформы рассмотрим Яндекс.Облако.

Static Wordpress
Object Storage 2000₽ 1800₽
VM - 9700₽
Total 2000₽ 11500₽

В обоих случаях фотографии и другой тяжелый контент выгодно хранить в Object Storage. Страницы статического сайта могут храниться там же, занимая считанные мегабайты. Но в случае с WordPress вам так же понадобится хотя бы самая слабая VM чтобы держать там базу данных со статьями и комментариями и рендерить страницы перед тем как отдать их пользователям.

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

Третье преимущество – скорость. Даже на самом простом железе любой современный веб-сервер способен отдавать статические элементы тысячам пользователей в секунду. А если использовать CDN, то скорость взлетает до небес, а доступность из любой точки планеты становится практически стопроцентной.

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

Как создать статический сайт?

Самый простой способ – создать на диске файл index.html, открыть его в любом текстовом редакторе и начать наполнять его контентом.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My awesome blog</title>
</head>

<body>
  <h1>Hello world!</h1>
  <p>This is the first article in my brand new personal blog.</p>
</body>

</html>

Этот способ хорош лишь если вы планируете иметь только одну страницу. Если вдруг вам понадобится вторая, например about.html, вам придется скопировать разметку из index.html и заменить контент на новый. И так с каждой страницей. А если вы решите внести изменения в разметку, их придется вносить во всех файлах одновременно.

Для решения этой проблемы существуют движки шаблонов (template engines). Шаблон index.html может выглядеть примерно так:

{% extends "layout.html" %}
{% block body %}
<h1>This is the index page</h1>
<p>Here I will keep track of all my posts.</p>
{% endblock %}

А about.html так:

{% extends "layout.html" %}
{% block body %}
<h1>About me</h1>
<p>I'm funny.</p>
{% endblock %}

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

Конечно, файлы в таком виде нельзя отдавать пользователю: его браузер не будет знать что с ними делать. Поэтому перед публикацией из всех шаблонов необходимо будет собрать html странички, подготовить изображения, стили, скрипты и разложить всё это по файловой системе в нужном порядке. Инструменты, которые умеют делать всё вышеперечисленное называются генераторами статических сайтов (static site generators).

Как правило генераторы статических сайтов отличаются друг от друга по 3 критериям:

  1. Какой движок шаблонов они используют;
  2. На каком языке программирования они написаны;
  3. Требуется ли знание этого языка для создания сайта.

Ниже я перечислю основные существующие генераторы.

Jekyll

jekyllrb.com

Шаблоны: Liquid
Написан на: Ruby
Требует программирования: нет

Jekyll – самый популярный и широко используемый из генераторов. Для большинства задач он не требует навыков программирования, у него гигантское сообщество и огромная галерея плагинов и тем. Синтаксис liquid интуитивен и прост в освоении.

Gatsby

gatsbyjs.org

Шаблоны: React
Написан на: JavaScript
Требует программирования: да

Gatsby требует знания JavaScript и фреймворка React даже для написания простейшего одностраничного сайта. Если вы уже умеете писать приложения на React, Gatsby вам подойдёт, в противном случае он будет совершенно непродуктивным выбором.

Hugo

gohugo.io

Шаблоны: Go Templates
Написан на: Go
Требует программирования: нет

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

Nuxt

nuxtjs.org

Шаблоны: vue.js
Написан на: JavaScript
Требует программирования: да

Как и Gatsby, Nuxt требует знания JavaScript. Главное отличие – он построен вокруг фреймфорка vue.js. Если вы используете этот фреймворк, Nuxt вам подойдёт.

Hexo

hexo.io

Шаблоны: EJS
Написан на: JavaScript
Требует программирования: нет

Hexo – единственный среди перечисленных генераторов статических сайтов на JavaScript, который не требует знания этого языка программирования. Хотя EJS и содержит в себе JS, можно использовать лишь малое его подмножество, поддерживаемое и более простыми шаблонизаторами.

У Hexo не очень большое сообщество, он медленно развивается, для него создано мало тем и плагинов. А если пытаться использовать его на полную, то программирования на JS точно не избежать. Я не рекомендую использовать Hexo в 2020 году. Если вы хотите программировать, возьмите Gatsby, иначе используйте Jekyll или Hugo.

Scully

github.com/scullyio/scully

Шаблоны: Angular
Написан на: TypeScript
Требует программирования: да

Scully это Gatsby для Angular вместо React. Или наоборот. Больше здесь нечего добавить.

Pelican

getpelican.com

Шаблоны: Jinja
Написан на: Python
Требует программирования: нет

Pelican написан на Python и не требует навыков программирования для стандартного использования. Jinja – мощный, но при этом простой в освоении шаблонизатор. Pelican подойдёт вам если вы планируете расширять функциональность сайта собственными плагинами и Python – ваш основной язык программирования. В противном случае Jekyll и Hugo предоставляют гораздо больше возможностей за те же деньги.

Middleman

middlemanapp.com

Шаблоны: ERB
Написан на: Ruby
Требует программирования: да

Middleman, как и Jekyll, написан на Ruby, но при этом требует навыков программирования. Обратная сторона медали – он легче расширяется.

Jigsaw

jigsaw.tighten.co

Шаблоны: Blade
Написан на: PHP
Требует программирования: да

Jigsaw – самый популярный из генераторов, написанных на PHP. Если вы используете PHP, и особенно Larvel, можете смело его выбирать.

Hakyll

jaspervdj.be/hakyll/

Шаблоны: Hakyll
Написан на: Haskell
Требует программирования: да

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

Eleventy

11ty.dev

Шаблоны: Liquid, Nunjucks, Handlebars, Mustache, EJS, haml, pug
Написан на: JavaScript
Требует программирования: да

Генератор с интересным названием 11ty выгодно отличается от конкурентов поддержкой не одного, не двух, а целых семи шаблонизаторов. И он не завязан ни на один из фреймворков, поэтому подойдёт вам, если знаете JS, но не готовы учить ни React, ни Angular, ни vue.js ради генерации статических сайтов.

Что выбрать?

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

Если вы не хотите программировать и если для вас важна поддержка сообщества, готовые темы и плагины, выбирайте Jekyll. Если для вас важна скорость разработки, выбирайте Hugo.

Как хостить статический сайт?

Хостить статический сайт в 2020 году не проблема благодаря следующим сервисам:

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

Гораздо большая проблема – хостить контент. Изображения, в отличие от html страниц занимают десятки гигайбайт и бесплатно их хостить никто не станет. Конечно, ещё остались сервисы вроде Imgur или postimage, но они не несут никакой ответственности за ваши файлы, могут в любой момент их удалить или начать добавлять на них рекламу. Как по мне, самый удобный и выгодный способ хранить изображения и другой контент в интернете – облачные объектные хранилища.

Сервис Amazon S3 позволяет вам хранить в облаке неограниченное количество объектов (файлов). Объекты могут быть как приватными, так и публичными. Публичные объекты доступны по адресу следующего вида.

http://bucket-name.s3-website.region.amazonaws.com/path/to/image.jpg

Тарификация при этом зависит от объёма хранимых данных и от количества входящего и исходящего трафика.

Amazon – крупнейший, но не единственный игрок на рынке облачных технологий. У него есть конкуренты, предоставляющие совместимые с S3 сервисы:

Все они, кроме Яндекса, стоят примерно одинаково. Хранение 100 GiB с учётом того, что исходящий трафик составит 1000 GiB будет стоить примерно $80 в месяц. В случае с Яндексом это будет стоить $5 в месяц.