что такое статичная страница
Почему статические сайты удобнее динамических?
Рассказываем о том, что такое статические сайты, чем они лучше динамических, как их делать и где хостить за 4 рубля в месяц.
Какие бывают сайты
Веб-сайт может быть динамическим или статическим. В первом случае при запросе пользователя страница собирается в момент запроса, а затем отображаются в браузере. Во втором — на сервере хранятся уже готовые страницы.
Работу динамических сайтов обеспечивают CMS или движки — WordPress, Joomla, ModX, Битрикс и т. д. Их интерфейс обычно не сложнее, чем у текстового редактора — для публикации контента достаточно самых общих знаний html. Главный минус динамических сайтов — большие затраты системных ресурсов: при каждом обращении пользователя взаимодействуют веб-сервер, приложения для генерации страниц и база данных. Резкий рост количества посетителей или запросов означает, что скорость загрузки сайта падает. Кэширование частично снимает это неудобство, но его можно использовать не всегда и не везде. Потребление системных ресурсов открывает уязвимость для DDoS-атак — большое количество запросов выбивает их из эфира. В большинстве случаев движки — системы c открытым кодом, поэтому найти и использовать уязвимости может любой желающий. Наверняка вы уже слышали о том, как можно сломать комментарием WordPress, а через HTTP-заголовки на Joomla! можно получить доступ к базе данных сайта.
Как продвинуть банк в регионах?
Основная проблема — перегретый аукцион. Но если грамотно выбрать соцсеть, формат и настройки таргетинга, всё получится.
Статические сайты состоят из готовых страниц (HTML, JS, графика, шрифты), загруженных на сервер. Важные достоинства статических сайтов: скоростная загрузка страниц и повышенная устойчивость ко взлому. Кроме того, сайты из статических страниц без проблем выдерживают гораздо большую посещаемость, чем их динамические «коллеги».
Неудобством статики считается необходимость генерировать сайт заново даже для внесения самых незначительных изменений в содержание сайта. Ускорить и облегчить этот процесс призваны разнообразные генераторы статических сайтов.
Сайты-визитки, блоги, каталоги товаров, документацию к программным продуктам и техническим устройствам удобнее делать статическими. Для таких сайтов может потребоваться динамическая часть — комментарии, поиск, личный кабинет пользователя, создание страниц. Динамическую часть помогут реализовать сторонние инструменты или расширения к генераторам.
Обзор генераторов статических сайтов
Генератор — это программный инструмент, превращающий текстовые записи в статичные HTML-страницы. Вы создаёте контент в любом текстовом редакторе, генератор склеивает его с заранее подготовленным шаблоном, а затем отправляет на хостинг. Выбор генераторов исчисляется сотнями, если не тысячами, мы рассмотрим самые популярные.
Хостинг статических сайтов
После создания сайта встает вопрос его размещения. Динамические сайты из-за требований к ресурсам размещаются на виртуальных или выделенных серверах. Для работы статического сайта нужно гораздо меньше системных ресурсов, поэтому в качестве площадки можно использовать любое виртуальное хранилище, которое позволяет раздавать контент пользователям. Возможности специализированных платформ для хранения статики примерно одинаковы, основное отличие — в стоимости хранения и раздаче контента. Облачное хранилище Selectel стоит от 4 рублей в месяц и, кстати, промосайт хранилища — чистая статика, размещенная в самом хранилище.
Имели дело со статическими сайтами? Расскажите в комментариях, какими вы пользовались генераторами и где размещали сайт.
Разработка статического блога на Gatsby и Strapi
Статические веб-сайты содержат страницы с неизменным содержимым. Технически — это набор HTML-файлов, которые, для каждого посетителя сайта, выглядят одинаково. В отличие от динамических веб-сайтов, для разработки таких сайтов не нужно серверное программирование или базы данных. Публикация статического веб-сайта проста: файлы выгружают на обыкновенный веб-сервер или в некое хранилище. Два основных преимущества статических веб-сайтов — это безопасность и скорость. Тут нет базы данных, поэтому отсюда нечего красть, и тут нет нужды программно генерировать страницу для каждого запроса, что ускоряет работу.
Для того чтобы упростить создание статических веб-сайтов, создано множество опенсорсных инструментов. Например, это Jekyll, Hugo, Hexo, и другие. Работа по подготовке содержимого сайта ведётся путём редактирования чего-то вроде файлов с разметкой, или через некое API для управления контентом. После того, как данные готовы к публикации, генератор берёт эти данные, внедряет их в шаблоны и создаёт множество HTML-файлов, готовых для публикации. 
Сегодня мы расскажем о быстрой разработке проектов с помощью Gatsby — генератора статических прогрессивных веб-приложений, и Strapi — системы управления контентом. В результате после того, как вы освоите это руководство, у вас будет работающий статический блог и масса идей, касающихся его развития.
Статические веб-сайты и прогрессивные веб-приложения
Полагаем, прежде чем продолжать, стоит сказать пару слов о прогрессивных веб-приложениях (Progressive Web Apps, PWA). Это — веб-приложения, интенсивно использующие JavaScript, которые отличаются надёжностью, быстротой и привлекательным внешним видом. PWA, благодаря обеспечиваемой ими скорости работы со страницами, и тому, что пользователям удобно с ними взаимодействовать, стали стандартным способом построения веб-интерфейсов. В результате появилось множество фронтенд-фреймворков, таких, как Angular, Vue, и React.
Мы, зная о плюсах статических веб-сайтов и PWA, задались идеей найти способ использовать одновременно и то и другое. Инструмент, который это позволяет, называется Gatsby.
Что такое Gatsby?
Так как проекты, созданные с помощью Gatsby, основаны на React, их страницы, при взаимодействии с ними пользователя, не перезагружаются, что делает такие проекты очень быстрыми. Gatsby поддерживает большой набор плагинов, которые позволяют, в частности, использовать данные из различных источников (это, например, markdown-файлы, различные системы управления контентом, и так далее). Центром системы данных Gatsby является интерфейс «узлов», которые используются для моделирования данных, поступающих в Gatsby.
Этот проект создал Кайл Мэтьюз, он официально выпущен в июле 2017-го и уже используется десятками компаний.
Как уже стало понятно, Gatsby, для того, чтобы он мог генерировать HTML-файлы, нужно откуда-то брать данные для них. В нашем случае источником данных будет Strapi.
Что такое Strapi?
Strapi — это фреймворк для управления контентом, основанный на Node.js. Он позволяет быстро разрабатывать API для работы с данными и занимает промежуточное положение между фреймворком для Node.js и CMS без пользовательского интерфейса. Strapi позволяет разрабатывать API очень быстро, что экономит время.
Strapi имеет расширяемую систему плагинов, он отличается большим набором встроенных возможностей. Среди них — панель администратора, система управления аутентификацией и разрешениями, средства управления контентом, генератор API и так далее.
Strapi — это опенсорсный проект, что выгодно отличает его от других CMS. В частности, это означает, что, во-первых, он полностью бесплатен, а во-вторых — то, что компания, выбравшая Strapi, разворачивает CMS на собственных серверах, то есть данные компании остаются под её полным контролем. Кроме того, Strapi можно настраивать и расширять благодаря системе плагинов.
Описав наши инструменты, приступим к разработке статического блога.
Настройка API с помощью Strapi
Воспользуемся возможностями Strapi для разработки API и добавим в систему данные, которые позже превратятся в страницы блога.
▍Установка Strapi
Для работы Strapi нужны Node 8 (или выше) и MongoDB. Если в вашей системе всё это имеется, можно приступать к установке Strapi с использованием npm:
Обратите внимание на то, что Strapi v3 всё ещё находится на стадии альфа-версии, но нам это подойдёт.
▍Создание проекта Strapi
Создадим директорию gatsby-strapi-tutorial :
Создадим каркас API внутри этой директории, для чего сначала перейдём в эту директорию, а потом выполним там соответствующую команду Strapi:
▍Запуск сервера
Для запуска сервера Strapi сначала перейдём в соответствующую подпапку директории проекта:
Затем запустим сервер, основанный на Node.js:
Теперь, если всё сделано правильно, можно будет посетить панель администрирования проекта, которая расположена по адресу http://localhost:1337/admin.
▍Создание первого пользователя
Добавим первого пользователя со страницы регистрации.
▍Создание типа контента
API Strapi основано на структурах данных, которые называются типами контента (Content Type). Это — эквивалент моделей во фреймворках и типов контента в WordPress.
▍Добавление материалов статей
Добавим в базу данных несколько статей. Для того чтобы создать статью, выполните следующую последовательность действий:
▍Настройка доступа
Доступ к API автора так же ограничен. Разрешите анонимный доступ, выбрав действие find (в разделе Users & Permissions ) и сохранив изменения.
Разработка статического веб-сайта
Теперь, когда API готово, можно приступать к разработке статического веб-сайта.
▍Установка Gatsby и создание проекта
Установим Gatsby CLI следующей командой:
В ранее созданной папке gatsby-strapi-tutorial создадим новый блог:
▍Запуск сервера Gatsby в режиме разработки
Перейдём в папку проекта:
После этого посмотреть веб-сайт, созданный Gatsby, можно будет, перейдя по адресу http://localhost:8000/.
▍Установка плагина для работы с источником данных Strapi
Данные, которые являются основой статического сайта, могут поступать из разных источников. Например, это markdown-файлы, CSV-файлы, материалы из WordPress (работа с которыми возможна благодаря плагину JSON REST API), и так далее.
Для того чтобы Gatsby успешно делал свою работу, ему нужно уметь общаться с различными источниками данных. Поэтому у Gatsby существует особый слой — слой данных, основанный на GraphQL.
Для того, чтобы подключить Gatsby к источнику данных, требуется плагин, предназначенный для работы с этим источником данных. Такой плагин можно разработать самостоятельно, либо подобрать из уже существующих. В этом примере мы, в качестве источника данных, будем использовать Strapi, а значит, нам понадобится плагин источника данных для API, построенных с помощью Strapi. Мы уже разработали такой плагин.
Этот плагин нуждается в некоторой настройке. Замените содержимое файла gatsby-config.js на следующее:
Теперь перезапустите сервер для того, чтобы позволить Gatsby воспринять изменения.
▍Список статей
Для начала нам хочется вывести список статей. Для того чтобы это сделать, добавьте следующее содержимое в существующий файл домашней страницы src/pages/index.js :
Для того, чтобы упростить разработку запросов GraphQL, можно воспользоваться соответствующим интерфейсом Gatsby. Взгляните на него и попробуйте создать несколько запросов.
▍Страница просмотра статьи
Теперь то, что мы делаем, уже похоже на блог, и это хорошо. Однако одной важной вещи всё ещё не хватает: страницы просмотра статьи.
Создадим шаблон, содержащий запрос GraphQL и зададим отображаемое содержимое. Делать это будем в файле src/templates/article.js :
Смотрится хорошо, но в данный момент Gatsby не знает, когда нужно выводить этот шаблон. Для каждой статьи нужен собственный URL. Сообщим Gatsby о новых URL с помощью функции createPage.
Перезапустите сервер Gatsby. Теперь ссылки на статьи должны оказаться рабочими, щелчки по ним будут открывать страницы статей.
▍Страница автора
Статьи пишут авторы. Они заслуживают отдельной страницы. Процесс по созданию страницы автора очень похож на процесс создания страницы статьи. Для начала создадим шаблон в файле src/templates/user.js :
Теперь обновим файл gatsby-node.js для создания соответствующих ссылок:
И наконец, перезагрузим сервер и посетим страницу автора, перейдя на неё со страницы просмотра статьи по соответствующей ссылке.
Итоги
Примите поздравления! Только что вы успешно создали невероятно быстрый и простой в управлении блог! Так как управлением содержимым занимается Strapi, авторы могут писать статьи с помощью приятного интерфейса, а разработчику остаётся лишь периодически перестраивать блог для обновления его содержимого.
Вы вполне можете продолжить работу над этим проектом для того, чтобы изучить полезные возможности Gatsby и Strapi. Сюда можно добавить список авторов, категории статей, систему комментирования на базе Strapi API или Disqus. Кроме того, вы можете, пользуясь предложенной здесь методикой, создавать и другие веб-сайты (интернет-магазины, корпоративные сайты, и так далее).
Когда ваш проект будет готов к работе, вы, возможно, захотите выложить его в интернет. Веб-проекты, сгенерированные Gatsby, можно публиковать, пользуясь средствами сервисов для размещения статических сайтов, таких, как Netlify, S3/Cloudfront, страницы GitHub, страницы GitLab, Heroku, и так далее. API Strapi — это система, основанная на Node.js, поэтому оно может быть развёрнуто на базе Heroku или с используемой любой виртуальной машины Linux с установленным на ней Node.js.
Уважаемые читатели! Как вы создаёте статические веб-сайты? Планируете ли вы использовать связку Gatsby-Strapi в своих проектах?
Статические и динамические сайты — в чем разница и что выбрать.
Любые сайты в интернете, можно разделить на два типа: статические и динамические.
Вроде всё просто, пока не начнешь глубже копать эту тему. Например, сайт может быть динамичным, но при этом содержать статические элементы, а может быть наоборот, статичный сайт с динамическими элементами.
По сути, по мере развития интернет технологий, различия между этими типами постепенно размываются. Но если вы собираетесь создать свой сайт, или у вас уже есть свой сайт, то вы должны разбираться в этом вопросе, ведь тогда, вы сможете лучше и эффективнее применять методы технической оптимизации.
Что может быть статическим или динамическим?
При обсуждении, является ли сайт статичным или динамичным, вначале нужно определить, какой аспект сайта вы обсуждаете. Эти аспекты можно разделить на три вида:
Код веб-страницы может быть статическим или динамическим. Это довольно просто: статический контент — это контент, который жестко запрограммирован на странице. Динамические страницы получаются на ходу, после запроса пользователя путем обращения к CMS или какой-либо внешней базе данных.
Доставка
Доставка веб-страницы также может быть статической или динамической. Статическая доставка — это предварительно обработанные страницы, которые обычно кэшируются и доставляются через сеть доставки контента (CDN). Динамические страницы генерируются в реальном времени после запроса к серверу.
Браузер клиента
Браузер также может повлиять на то, является ли сайт статическим или динамическим. Статические сайты остаются неизменными для всех, кто обращается к ним, независимо от браузера. Даже если сайт не использует запросы к базе данных на сервере, но он может изменять страницу на стороне клиента с помощью Javascript.
Основные различия между динамическими (серверный рендеринг) и статическими (рендеринг на стороне клиента) сайтами
Вначале использования Интернета, все веб-страницы отображали одинаковый контент для каждого пользователя. Со временем многие веб-сайты стали использовать базы данных и такие серверные языки программирования, как Python, PHP, ASP, Ruby, Java и другие. Это позволило сайтам стать динамическими и отображать контент для пользователя в зависимости от настроек или ввода определенной информации.
Прежде чем продолжить, поясню, что далее в этой статье пойдет речь в первую очередь о том, как страница доставляется пользователю. Вы можете развернуть целую игрушку на JavaScript, но до тех пор, пока эта страница не обращается к серверу, чтобы что-то подгрузить, то с точки зрения доставки, эта страница всё равно будет статичной, ведь она всего один раз загрузилась с сервера.
Что такое динамический веб-сайт?
Динамические сайты используют серверные языки для обработки запросов во время их создания страницы в режиме реального времени. Это означает, что динамические веб-сайты взаимодействуют с пользователем на сайте, и отображают контент в зависимости от действий или настроек пользователя.
Одним из примеров динамического веб-сайта являются веб-приложения. Например, социальная сеть Вконтакте, которая создает и отображает страницу, специально под вас.
Хотя динамические сайты чрезвычайно эффективны, они также более сложные. Наряду с этой сложностью у динамичных сайтов есть много своих преимуществ и недостатков.
Преимущества динамических сайтов
Работа с базой данных
Подключив динамический сайт к базе данных, вы можете легко запрашивать информацию в организованном и структурированном виде для создания и отображения контента в зависимости от потребностей пользователя.
Использование CMS
Использование базы данных означает, что вы также можете использовать CMS. Контент, хранящийся в CMS, может быть разнообразным. То есть, сюда относится основное содержимое сайта: текст, картинки, видео и аудио контент. И вспомогательное содержимое: макет и настройки сайта, возможность размещения дополнительного программного кода, например, JavaScript кода для размещения рекламы и так далее.
Всё это обеспечивает гибкость при создании сайтов, а также CMS часто позволяют работать с сайтом сразу нескольким пользователям, (SEOшники, авторы, редакторы и прочие). И что самое интересное, пользователи могут управлять сайтом, не вдаваясь в программирование.
Низкая стоимость текущего обслуживания
Это дальнейшее следствие использования CMS. На рынке представлено множество различных CMS, и многие из них имеют хороший функционал, и при этом, бесплатны. Тем самым, для создания хорошо выглядящего сайта, не понадобится много расходов денег и времени.
Недостатки динамических сайтов.
Ограничения на дизайн
Когда создается страница по запросу пользователя, то в этот момент из базы данных на сервере извлекается некоторый контент, такой как текст и изображения. И весь этот текст, должен хорошо сочетаться с другим контентом на сайте. И чтобы самый разнообразный контент хорошо сочетался на сайте, для этого вначале придется очень постараться над дизайном самого сайта.
Если взять популярную CMS WordPress, то хотя здесь представлено большое количество самых разных шаблонов оформления, но фактически, веб-мастер всё равно не получает идеальный дизайн, который он хотел-бы использовать. Выбор дизайна, даже в WordPress, это всегда компромиссы. Как самому установить шаблон читайте в этой статье.
Кроме того, этот дизайн будет применен сразу ко всем страницам сайта. Если для информационных сайтов шаблонность оформления, это скорее плюс, то вот для продающих сайтов, это уже явный минус.
В зависимости от CMS может быть сложно применить сразу несколько дизайнов на одном сайте, чтобы отобразить разный тип контента на одном сайте. К примеру, вы не сможете сделать сильно отличную страницу с информацией о заказе, со страницей оплаты товара.
Динамичный сайт, может потребовать больших затрат.
Выше я уже говорил про уменьшение затрат, но здесь скажу, что динамичный сайт, может потребовать больших затрат. Действительно, пока вы используете шаблонные решения, то готовая CMS даст их дешевле. Ведь эти решения разрабатываются сразу для большого количества сайтов.
Но как только нужно что-то уникальное, то это уже обойдется дороже. Например, вы решили внедрить какой-то уникальный виджет на сайте. Если программисты и дизайнеры будут разрабатывать его специально под вашу распространенную CMS, то им придется еще думать и о том, как внедрить его на сайте, и чтобы это не сломалось при следующем обновлении CMS.
Что такое статический сайт.
Статические веб-сайты, это предварительно собранные сайты. Страница не формируется после запроса пользователя, а хранится уже готовой к показу пользователя. Причем, зачастую такие страницы хранятся либо в кэше хостинг провайдера, либо даже поближе к пользователю на CDN сервисе.
У выбора статичного сайта также есть свои преимущества и недостатки.
Преимущества.
Гибкость
Главное преимущество статического сайта — это гибкость, которую он предлагает. Каждая страница может быть разной. Дизайн буквально каждой страницы может меняться до неузнаваемости. На одной странице, контент может отображаться по всей ширине экрана, на другой странице, может быть левая или правая дополнительная колонка. На одной странице большой логотип в шапке, на другой мелкий логотип. В общем, на таких сайтах дизайнеры могут вдоволь проявить свою фантазию. И во многих случаях, это имеет большое значение.
Стоимость
Первоначальные затраты на создание статического сайта могут быть ниже, чем при создании динамического сайта. В первую очередь, дело касается технической составляющей. Разместить статический сайт на хостинге, в большинстве случаев, намного проще, чем настраивать полноценную CMS с подключенной базой данных.
Обслуживание такого сайта, также намного проще, а значит и дешевле. Причем, если например, WordPress тоже легко разместить на хостинге, то вот в случае возникновения различных проблем, таких как резко возросшая нагрузка на хостинг, справится будет сложно, а значит, скорее всего придется нанимать специалистов, что будет стоить дорого.
Время загрузки
Это второе важнейшее преимущество статического сайта. Поскольку статические сайты предварительно отрисовываются, то время загрузки у них очень быстрое. Они работают без выполнения сложных программ, без использования баз данных и тому подобного. Благодаря всему этому, такие сайты загружаются намного быстрее.
Недостатки.
Более сложное обновление.
Создать статический сайт можно с помощью различных инструментов, наподобие Adobe XD, но вот редактировать такой сайт, будет уже намного сложнее. И если вы не знакомы с HTML, CSS и с веб программированием, то весьма вероятно, вам придется просить других специалистов, чтобы они внесли даже простые изменения.
Более сложное масштабирование.
Изменение контента, это еще не самая большая проблема. Проблема будет тогда, когда вам нужно добавить новую страницу, будь это новая статья на блоге, или страница с описанием товара. В этом случае, придется менять не одну страницу, а сразу все прямо или даже косвенно связанных страниц. Поэтому обычно, статическими делаются сайты с небольшим количеством страниц.
Стоимость.
Когда нужны изменения на сайте, то в этом случае, либо сам вебмастер должен хорошо разбираться в коде, либо придется нанимать программистов. И в этом случае, затраты на обновление сайта, будут значительно выше.
Так что выбрать?
Если говорить про весь интернет в целом, то уже давно динамические сайты в большинстве. Сейчас уже почти не осталось статических сайтов.
Особенно это актуально для технически сложных сайтов, таких блоги или интернет магазины.
Но и статические сайты по прежнему востребованы. Но востребованы они в основном для создания небольших сайтов лендингов, где желателен продвинутый дизайн каждой из страниц и быстрая скорость загрузки.
В общем, выбирайте динамический или статический сайт, исходя из слабых и сильных сторон каждого из этих типов сайтов, а также исходя из ваших потребностей.