Хостинг одностраничных сайтов

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

Сайты из одной страницы сейчас в моде. Посетитель видит всю важную информацию на одном экране. Маркетологи обожают делать промо-сайты и красивые лендинги. С одной стороны это спорт по повышению конверсии, с другой — конкурс дизайнерских идей. Что касается технической части, здесь нет ничего любопытного — одна страница статического контента. Ради такого сайта нет смысла настраивать CMS, но редактировать HTML и закачивать файлы на хостинг умеют не все.

Если одностраничные сайты так популярны, то давайте в очередной раз спасем мир и облегчим жизнь людям — разработаем сервис для создания и управления такими сайтами. Технически нужно решить две основные задачи: отдача html-статики и ее редактирование администратором сайта.

Back-end

Отдача статики = Nginx. Главные и единственные странички сайтов можно хранить в БД и потом кешировать выдачу. Но мы не будем усложнять — сгодится и файловая система. Как это на виртуальных хостингах устроено? Каждому сайту по папочке…

server {
  listen 80	default_server;
  server_name ~^(?<subdomain>.+)\.svsite\.com$;
  root /home/sites/$subdomain;  
  index index.html;

  # разрешим открывать корень сайта и /index.html
  # для остального - 404
  location = / {  }
  location = /index.html {  }
  location / {
    return 404;
  }
}

С редактированием наших index.html справится и шелл-скрипт, но давайте не будем такими аскетами. Конечно, велик соблазн реализовать и front-, и back-end на одном языке… Нет. Node.js — это для пижонов, не выходящих из беты, которым позарез нужен socket.io. Подытожим наш сложный выбор, перефразируя Сэра Пола Маккартни:

Let it be, let it be, let it be, let it be
Whisper words of wisdom, Pee H Pee

Для того, чтобы поменять содержимое файла, в PHP есть функция с незатейливым названием file_put_contents. Что же делать, когда нужно отредактировать только определенный кусок html, оставив остальной документ нетронутым? Не дадим пользователю испоганить аккуратную верстку вокруг текста, который он редактировал!
И пусть говорят, что парсить HTML регулярными выражениями — это моветон. Следующая уличная магия позволит нам заменить содержимое любого тега с известным id:

function updateElement($html, $id, $innerHtml) {
  $re = '/(<(\w+)[^>]+\b(?:id)=["\']?' . $id . '["\']?[^>]*>)(?:(<\\2[^>]*>(?:(?1)|.)*?<\/\\2>)|.)*?(<\/\\2>)/is';
  if (preg_match($re, $html, $m)) {
    $html = str_replace($m[0], $m[1].$innerHtml.$m[4], $html);
  }
  return $html;
}

Где поселить нашу связку Nginx + php-fpm? Давайте — в облаке, как все модные стартапы. У Amazon дорого, инвесторов у нас нет, поэтому создадим виртуальную машинку за кровные рубли — например, у Selectel.

Front-end

Простых хостингов и CMS — миллион. Мы попытаемся достичь новых высот UX старыми проверенными способами.

Во-первых, нужно облегчить редактирование исходников нашего единственного index.html. В этом нам поможет тег <textarea> и прекрасный редактор с подсветкой кода CodeMirror. Еще есть Ace, но он постарше и потяжелее.

Чтобы редактировать содержание страницы могли не только знатоки гипертекста, но и все пользователи Word, нужно прикрутить WYSIWYG-редактор. Дабы see всегда соответствовало get, при редактировании мы будем показывать живой сайт со всеми его стилями, скриптами и т.д. На помощь приходит волшебный html-атрибут contenteditable, за который, как и за XmlHttpRequest, нужно благодарить беднягу Internet Explorer. Относительно недавно визуальный редактор CKEditor научился работать с contenteditable — воспользуемся нововведением. Достойнее всех с подобной задачей справляется Redactor, но его ценник нам пока не по карману.

Внимательный читатель уже заметил, что в технической реализации мы обходим стороной такой важный компонент одностраничного сайта, как графика. Куда же редактор будет закачивать картинки?
Девиз велосипедостроителя гласит, что процесс важнее результата. Мы же по отработанной схеме воспользуемся услугами готового сервиса uploadcare.com, который снабдит нас не только красивым виджетом загрузки/ обрезки картинок, но и бодрой CDN для всего графического контента.

Гештальт

Итак, история подходит к концу. Нам осталось написать несколько десятков строк кода, который свяжет все описанные компоненты воедино. Да, кстати, мы обленились настолько, что отдадим на аутсорсинг даже авторизацию. Пускай этим займется Mozilla Persona — система авторизации на основе протокола BrowserID, который предложено интегрировать во все браузеры. Вы же доверяете Mozilla? Они все вроде такие открытые и некоммерческие.

Не знаю, как у вас, а у меня получилось то, что получилось. Ссылка — в профиле surething.