Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиМой проект → Статические сайты - не такой уж прошлый век?
Rss

После некоторых исследований своего сайта я пришёл к выводу, что платформа, на которой он находится, слишком мощная. Да, Окс слишком крут для такого небольшого блога, на котором есть только записи и комментарии! Пожалуй, единственное, что действительно нуждалось в такой платформе – чат, который использовался крайне редко. В связи с этим, я принял решение о перестройке своего сайта в некотором другом виде. Я не сразу определился, в каком именно. Какой движок, на Оксе ли я буду хоститься.

В итоге мой новенький блог хостится не на просторах Oxnull и является статическим. То бишь, он является простым набором HTML-страниц. И конечно, я ни за что не воспользовался бы этим подходом, если бы мне пришлось их собирать вручную или самостоятельно писать систему их сборки. Потому что моё чутьё на велосипеды меня редко подводит. На просторах интернета я нашел вундервафлю под названием Jekyll. А если кому-то интересно взглянуть на исходники моего сайта – вот они.

Итак, что такое Jekyll? Это система, которая на основе вручную сделанного шаблона и файлов с материалами генерирует набор статичных страниц. Материал можно писать на языках Markdown и Textile. После внесения изменений, можно запустить сервер, поставляющийся с Jekyll, чтобы посмотреть на получившееся в собственном браузере.

Так я начал исследование мира статических сайтов. И знаете, что я об этом думаю? Не так уж там всё плохо.

Начнём с хостинга. Сейчас найти хостинг, который способен не более чем на статические страницы, почти невозможно. На них почти нет спроса. CMS рассчитаны на активную серверную часть, запускаемую в момент запроса страницы от пользователя. Но ищущий да отыщет. Оказывается, если у вас есть аккаунт на GitHub, вы можете создать репозиторий с названием вида пользователь.github.io, и загрузить туда свой набор HTML-страниц. Он будет доступен, как одноимённый сайт. Конечно, вам понадобится некое знакомство с системой контроля версий Git, но лично я ею уже какое-то время пользуюсь, и для меня загрузка сайта на GitHub оказалась несложной задачей. Если для кого-то это затруднительно, но интересно – могу рассказать и об этом. Системы контроля версий вообще очень полезны, когда дело касается управлением информацией.

Но если вы уже посмотрели исходники сайта (если нет – и не смотрите), то отметили, что HTML-страниц с постами там нет. В сочетании с тем фактом, что для обновления сайта мне нужно только обновить исходники – не уйти от вопроса, а где страницы-то? А занимательная деталь как раз в том, что они вовсе не нужны. GitHub при изменениях кода сайта производит его пересборку в течение 10 минут, и пока она не произойдёт, последние изменения на сайте не отразятся. Это не должно помешать разработке, поскольку Jekyll поставляется с локальным сервером.

Но на этом магия не кончается. Если у вас в репозитории есть текстовый файл CNAME, сервер использует введённое в нём доменное имя для вашего сайта. Вам необходимо только направить свой домен CNAME-записью на пользователь.github.io, или же А-записью на IP-адрес GitHub. Последний способ не рекомендован, поскольку если IP-адрес изменится (а это возможно, независимо от вас), ваш сайт внезапно пропадёт для пользователей.

Ещё один финт ушами: страница 404.html в корне сайта будет выдаваться оттуда на ошибки 404 вместо стандартной страницы 404 у GitHub. У меня на момент написания этой статьи тоже такой страницы нет. Но будет уже в следующем коммите.

Тем не менее, подумаем над тем, чем хорош такой сайт. Сразу отмечаем, что у него отсутствует форма входа и админка. Они просто не имеют смысла в таком техническом исполнении. У вас есть ваш аккаунт на GitHub, или просто аккаунт какого-нибудь хостинга – его и берегите.

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

Начнём с комментариев. Блог же. Использовать можно любые системы комментирования на третьей стороне. Я ушёл с HyperComments из-за багов и гробового молчания в техподдержке после двух обращений, поэтому теперь использую Disqus. На сайт он встраивается сравнительно просто. Опять же, что хорошо в GitHub – вы можете посмотреть, как изменялся сайт с самого начала и до текущего состояния. Поэтому легко можете увидеть, как встраиваются комментарии, глянув на историю изменений, пока она не раздулась до неприличных размеров.

После установки комментариев, неплохо бы добавить счётчик комментариев в списке постов. HyperComments у меня на сайте этого не осилил. Disqus – влёт, по официальной же инструкции. Шаблоны в Jekyll пишутся на языке Liquid, который вполне логичен применительно к шаблонам. Взгляните на шаблон главной страницы и отметьте, что он внедряется в шаблон по умолчанию. Надо отметить, что я там совершенно зря вставил в конце скрипт подсчёта комментариев, поскольку он нужен не на всех страницах. Баг. Поправлю.

Более того, вооружившись не совсем документированной вундервафлей вы можете отображать последние комментарии по всему сайту. Занятно. И всё ещё никакой динамики на собственном сайте вам не требуется. Но это только начало.

Дальше – сложнее. Теперь полезем в область, которую я ещё не трогал, но из-за которой я, по-видимому, сделаю pull request в ядро Jekyll. Это поиск по сайту. Разумеется, раз у нас сервер не может выполнять поиск сам, этим должен заняться клиент или другой сервер. Последний случай проще: это может быть Google Custom Search, но вот незадача, он очень хочет рекламу. Альтернативы? Есть достаточно, кхм, радикальное решение – нагрузить поиском сам браузер. Почему радикальное? Из-за этого браузер может скачать весь сайт. В большинстве случаев – приемлемо. Но если речь идёт о пользователях с ограниченным трафиком, это проблема. А можно схитрить и сгенерировать поисковый индекс сайта самостоятельно. Но это всё больше теория. На практике – сначала мне нужно придумать, как предупредить пользователей о “толстом” по трафику поиске, при этом не сделав его сложнодоступным. Впоследствии лично я планирую добавить поиск по карте сайта с помощью jQuery. Интересно то, что карту сайта можно составить при помощи языка шаблонов Liquid.

На этом всё. Как только количество неизложенных развлечений со статическим сайтом превысит некоторый порог, я о них напишу. А пока, если интересно, можете поизучать, какие сайты делают на Jekyll, а также историю разработки именно моего сайта.

Кстати, мне всё же удалось собрать Twitter Bootstrap самостоятельно, как видно на сайте :)


Автор: Павел | Дата создания: 09 сентября 2013, 23:45 UTC | 0.553


Комментарии(8)
Денис  11 сентября 2013, 15:50 UTC  #
0.0
Index

Это весьма интересно. Изначально я всегда полагал, что статический сайт – это хорошо, мой дипломный руководитель как раз развивал свой птичий язык и программу к нему, которая как раз на выходе генерировала статику. Кстати у Rails есть фича, можно сделать “слепок”, все отправить в статику. Что тоже можно поизучать, возможностей все же больше, можно реализовывать более сложную логику.

Не очень ясно про вес сайта при поиске, на мой взгляд для поиска нужно качать только текст, без графики и прочего css, но это всем ясно, Америки я не открыл, поэтому вес будет уже маленьким. Сюда еще добавить, что можно зазиповать весь этот текст и размер на выходе получится уже приемлемо малый. Я бы сформировал большой зазипованный xml\json документ. Перенести поиск на клиент – вполне хорошая идея. Можно даже усложнить и качать контент страничек по одной, вероятность скачивания упадет, дать пользователю кнопку отмены. Заодно при заходе на “обычную” страницу – получать контент для нее так же, чтоб не дублировать информацию. Тогда вкупе с отличным кешированием на стороне клиента, а статику все браузеры кешируют при любых условиях, нагрузка на канал сократится дополнительно. Да и сайт станет еще отзывчивее после поиска :)

cyber01  11 сентября 2013, 18:06 UTC  #
0.0
Avatar

Эммм могу ошибаться,но вроде этот Jekyll написан на Ruby или RoR, тогда вполне вероятно,что рельсы и клепают странички :)

Денис  12 сентября 2013, 17:00 UTC  #
0.0
Index

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

Павел  12 сентября 2013, 22:18 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Jekyll лежит “под капотом” Github Pages, и поэтому в ядре не имеет ничего для рантайма – только минимум для генерации необходимых страниц с функционалом блога. Там есть система плагинов, но если грузить на гитхаб сами исходники, то это бесполезно – плагины не будут использованы при сборке.

GitHub всё же в первую очередь хостинг для программных проектов, нежели сайтов. Для веб-приложений на Rails есть Heroku. Поэтому они держат нагрузку от этого функционала не выше, чем необходимо. Один из авторов проекта – сотрудник GitHub, если что.

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

Павел  12 сентября 2013, 23:46 UTC  #
0.099
2bfe965ab5ef94a0568bc61c36b46d4c

Кстати, вот весьма элегантное решение проблемы поиска по сайту. Ставим форму, которая отправляет на запрос в Google с указанным конкретным сайтом.

Павел  15 сентября 2013, 12:39 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

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

alex.pylov  24 сентября 2013, 17:03 UTC  #
0.0
Oxnull-userpic

кстати, клевый дизайн блога. Все просто, лаконично, немного по-хипстерски.

Павел  24 сентября 2013, 17:27 UTC  #
0.101
2bfe965ab5ef94a0568bc61c36b46d4c

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

  1. Вот эта цветовая схема, на которой удобно читать из-за не слишком сильного контраста.
  2. Нейтралитет по языку – значки где только можно, где нельзя (даты), используется английский.
  3. Twitter Bootstrap, про который я уже рассказывал.
  4. Bootswatch Cosmo, взял как неплохой образец “flat UI” и покрасил под пункт 1.

Такие дела.


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.