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

Статический сайт это сайт, который состоит из текстовых страниц на языке HTML, заполненных путем подстановки в шаблоны сведений из базы данных пользователя при предварительной генерации сайта. В отличие от динамических сайтов генерация страницы выполняется не каждый раз при обращении к серверу, а в момент сборки ресурса целиком. Чтобы обновить сайт достаточно отправить html файлы, полученные при сборке при помощи встроенного ftp клиента или иного приложения вроде filezilla

схема

Отличия HtmlBuilder

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

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

Поскольку вы можете настроить выдачу рубрики, можно иллюстрировать публикации

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

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

Ваши данные программа хранит в базе SQLite (в файле sqlite.db). Чтобы сделать резервную копию сайта просто скопируйте этот файл

SQLite может работать в минимальном объёме выделяемой для неё оперативной памяти, гораздо меньшем, чем в любых других системах баз данных. Это сделало SQLite популярным решением с доступностью для использования привычных для разработчиков и пользователей возможностей языка запросов SQL. Обращения к базе оптимизированы как за счет особенностей обработки запросов, так и за счет настроек сервера (прагмы, индексы)

Сегодня SQLite практически везде - на любом смартфоне, во многих браузерах есть встроенная база sqlite

Хранить данные в SQLite надежно, поскольку база проходит через ряд автоматических тестов (проводится более 2 млн тестов), а покрытие движка базы тестами 100%

Преимущества SQLite для генератора сайтов

  • Минимальное потребление ресурсов системы
  • База данных состоит из одного файла, её очень легко переносить на разные компьютеры
  • База занимает небольшой объем
  • Cервер базы данных имеет хороший оптимизатор запросов
  • Полностью свободная лицензия
  • Кроссплатформенность - можно использовать под Windows/Linux
  • Крайне высокая скорость простых операций выборки данных, особенно если база хранится на SSD или вынесена на RAM диск
  • Целостность данных гарантируется транзакциями, триггерами и возможностью использовать ограничения и внешние ключи (REFERENCIES)
  • Права доступа к файлу базу можно настроить встроенными возможностями операционки

Преимущества статических сайтов

База данных хранится на стороне клиента, а не на сервере. Поскольку серверные языки программирования не используются, статические сайты в целом более устойчивы ко взлому в отличие от сайтов на PHP или другом языке серверного программирования: нет языковых эксплойтов на стороне сервера, нет уязвимостей базы данных и следовательно меньше векторов атак. По сути, пока файлы на вашем хостинге защищены хостером, ваш статический сайт защищен, поскольку не имеет никаких уязвимостей в плане того, что не требует интерпретатор языка программирования на стороне сервера, который обращался бы к серверной базе данных. А если нет серверной базы - то вам не нужно ее арендовать, если вы пользуетесь облачным (cloud) хостингом. Идентичность - контент доставляется 1 в 1 так, как был собран при сборке ресурса, никаких побочных эффектов в интерфейсе при эксплуатации сайта. Таким образом, статичность не означает не обновляемости или неуправляемости контентом. Отметим, что CDN сети доставки контента отлично себя зарекомендовали по ретрансляции статики и вы сможете воспользоваться и этим преимуществом, если решите подключить CDN. Устойчивость — повышается устойчивость к внезапным скачкам трафика. Для веб-сайтов с высокой доступностью количество единичных точек отказа уменьшается. Также за счет того, что нет бутылочного горла при обращении к базам данных и обработке данных интерпретатором языка программирования, удается повысить скорость отдачи контента. Чтобы опубликовать статический сайт в сети, достаточно получить FTP доступ к серверу и перенести сборку с помощью встроенного публикатора на вкладке FTP, либо с помощью любой удобной для вас программы, например, FileZilla. По сути логин и пароль от FTP и IP адрес в сети вашего сервера, это единственная основная настройка, которая нужна для публикации статики. Настройка и обслуживание хостинг—сервера проще и дешевле, поскольку требования к памяти и процессору невелики по сравнению с динамическими сайтами. Переносимость — поскольку сайт не связан со сложной инфраструктурой хостинга, его можно перемещать из одного места в другое и перераспределять более простым способом. Статические сайты не требуют постоянного мониторинга, исправления отсутствующих зависимостей или инфраструктуры. Контроль версий — поскольку собранный сайт основан на файлах, система контроля версий, такая как git, может отслеживать все изменения содержимого. Соответствие требованиям — простая архитектура способствует упрощению соответствия требованиям, особенно при создании чего-либо для крупной компании и размещении в их среде. Обновления и новые версии серверного языка или базы данных не влияют на создаваемые статические страницы. Также нужно отметить, что формат HTML является основным для веба - для вас не составит труда найти готовые шаблоны или начинать верстку, отталкиваясь от популярных фреймворков вроде Bootstrap. Если вы верстаете в Figma, можно экспортировать прототип в HTML, читайте тут, также есть бета Locofy. Если верстаете в Sketch, можно экспортировать прототип в HTML по инструкции

Расширяемость статических сайтов

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

Где посмотреть HTML макеты

  • https://nicepage.com/html-templates
  • https://www.free-css.com/free-css-templates
  • https://templatemo.com/
  • https://colorlib.com/wp/templates/
  • https://html.design/
  • https://html5up.net/
  • https://bootstrapmade.com/free-website-templates/
  • https://webflow.com/free-website-templates
  • https://onepagelove.com/templates/free-templates
  • https://htmltemplates.co/
  • https://beefree.io/templates/
  • https://themewagon.com/theme-price/free/
  • https://www.graphberry.com/category/free-html-web-templates
  • https://startbootstrap.com/templates/general
  • https://elements.envato.com/ru/web-templates
  • https://www.templateshub.net/
  • https://www.template.net/editable/html

Примеры внедрений статики различными компаниями

Healthcare.gov после перехода на статическую генерацию перешел с 32 серверов на 1 и сократил в разы расходы. Платформа для сбора средств Б. Обамы, который делала та же команда, что и сайт Хиллари Клинтон, была построена с использованием статического генератора сайтов. Nest и MailChimp используют генераторы статических сайтов для своих основных веб-сайтов. Корпорация Vox Media построила целую издательскую систему вокруг генератора статических сайтов. Крупное нью-йоркское агентство Carrot и Vice, создают веб-сайты для некоторых крупнейших мировых брендов с помощью собственного генератора с открытым исходным кодом. Некоторые сайты такого гиганта как Google на самом деле являются статическими. Статический сайт портала Smashing Magazine был протестирован на производительность - он в 10 раз быстрее, чем развертывание на WordPress.

Как работать с HTML заготовкой

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

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

Стилизация элементов. Для изменения оформления элементов следует назначить другие значения для таблиц стилей CSS, идущих с шаблоном, либо переопределять эти значения с помощью тега style.

Как настроить хостинг для статического сайта

Если вы используете Apache - достаточно базовой настройки 


ServerName somesite.ru
ServerAlias www.somesite.ru
DocumentRoot /path/to/site/public
DirectoryIndex index.htm index.html 
  <Directory "/path/to/site/public">
      AllowOverride All
  </Directory>

Если вы используете ngnix - настройка минимум 


 server {
  listen 80 default_server;
  listen [::]:80 default_server;  
   root /var/www/site.ru;  
   index index.html;  
   server_name site.ru www.site.ru;  
location / {
    try_files $uri $uri/ =404;
  }
}