В StaticGen

²⁷¹Наша открытым исходным кодом каталог статический сайт generators, Мы следили более ста генераторов для более, чем год, и мы видели как объем и популярность этих проектов снять невероятно на GitHub в течение этого времени, переходя от всего в 50 до более чем 100 генераторови в общей сложности более чем 100.000 звездами статического сайта репозитории генератор .

Влиятельные дизайн-ориентированных компаний, таких как гнездо и MailChimp теперь используют статические генераторы веб-сайт для своих первичных сайтов.Vox Media²построил Вся издательская system³вокруг посредников.Carrot⁴, Большая часть агентство и Вице-империи Нью-Йорк, строит сайты для крупнейших мировых брендов с собственным генератором с открытым исходным кодом, Roots⁵,И несколько свойств Google, таких как “Год в Search⁶“И Веб Fundamentals⁷, Статические .

⁸

Статические веб-сайты являются не нова, пройдя весь путь назад к началу Интернете.Так, почему вдруг взрыв интереса?Как дела?Почему сейчас

При статических Был Это Link

Первый в истории веб-сайт, __76 Тим Бернерс-Ли |Оригинальный страница для World Wide Web¹⁰, Был статическим.Сайт тогда был папку HTML документов, которая состояла из всего 18 tags¹¹,Браузеры были простые навигаторы документов, которые принесла бы HTML с сервера и позволяют конечному пользователю управлять ими, следуя гиперссылки.Веб принципиально статической .

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

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

Он также быстро стало очевидно, что резервирование HTML для структуры и CSS для стиля не было достаточно абстракции, чтобы содержание веб-сайта (рассказы, продукты, предметы галерея, и т.д.) отдельно от дизайна .

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

Настольные приложения, такие как Dreamweaver и FrontPage предложил решения для построения содержательных сайтов через редакторов WYSIWYG, где страницы могут быть разделены на многоразовых частей, таких как навигация, верхние и нижние колонтитулы, и где содержание до некоторой степени может быть помещен в базу данных.В некоторых отношениях, смертельно недостатки, как они были, это были Оригинальный статический сайт generators: Строительные сайты с шаблонов, частичных, библиотек и средств массовой информации иногда даже SQL базы данных, и публиковать их с помощью FTP как статические файлы.Еще в 2004 году я имел уникальный опыт работы на крупном сайте содержимому приводом, с десятками тысяч страниц распространяться через различные редакционные группы, все удалось с помощью Dreamweaver

Даже если Dreamweaver может, в какой-то степени, интегрировать с базой данных, он не имел Содержание model, Не предлагая никакого смысла содержание отдельно от дизайна, каждая половина будучи редактирования независимо соответствующих инструментов .

Наиболее основной ответ на эти проблемы был стек ЛАМПЫ и CMS “, таких как WordPress, Drupal и Joomla.Все это играет невероятно важную роль в продвижении вперед в Интернете, что позволяет явление Web 2.0, в которой пользовательский контент стал движущим фактором для многих веб-сайтов.Люди пошли от следующих гиперссылки на заказ продукции, участие в сообществах и созданию контента .

Динамические задачи Link

Когда я построил мой первый динамический сайтболее 15 лет назад, я был после первоначальных учебники LAMP-стека из документации MySQL.Когда я понял, что все эти вещи происходит каждый раз, когда кто-то посетил сайт, который был построен как это, взорвал мой взгляд

Веб-сервер будет загружать свой код в интерпретатор PHP, на лету, а затем открытые соединения с базой данных, отправки запросов и обратно, используя данные в шаблоны и сшивая строк текста в HTML документе, специально дляпосетитель в данный момент.Удивительный

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

Эта динамика архитектура сайт переехал в Интернете вперед, но он также открыл банку с червями.По самым скромным подсчетам, более 70% сегодняшних WordPress установок являются уязвимым к известным exploits(и WordPress полномочия более 23% от сети).Всего несколько месяцев назад, 1,2 миллиона Drupal установки был заражен вредоносными программами в протяжении нескольких дней.Не проходит и недели, когда я не по ссылке с социальных медиа на сайт, который показывает “ошибка подключения к базе данных.” Масштабирование динамического веб-сайта может быть очень дорогим, и органы, которые запускают сайт кампании и т.п. часто приходитсяс избытком, резко, чтобы защититься от сайта взорвать, если ему удается перейти вирусной —либо они должны отчаянно масштабировать его, пытаясь получить его обратно онлайн (то, что кажется, никогда не произойдет в течение рабочего дня) .

Мы платим огромную цену за основной сложностью динамического кода, работающего на сервере для каждого запроса —цена, которую мы могли бы избежать уплаты полностью, когда этот вид сложности не требуется .

Динамические сайты и кэширование Link

В какой-то степени, мы, как правило, чтобы обойти это путем кэширования.Нет громких WordPress сайт не будет способен работать без плагина, таких как WP Super Cache.Большие сайты, несомненно, опираются на прокси-кэшей, таких как лак, Nginx и Apache Traffic Server, перед их сайтов .

Кэширование как известно, трудно получить rightОднако, и даже самый оптимизированный динамический сайт, как правило, во много раз медленнее, чем статическое решение .

Этот веб-сайт, Smashing Magazine, очевидно запустить один из самых команд производительности ориентированных там и, в общем, очень сильно оптимизированы для работы.Итак, я побежал небольшой эксперимент для этой статьи.Использование HTTrack¹²Я взял копию данного веб-сайтаодин уровень, а затем развернуть статическую версию, чтобы Netlify¹³, Статический-платформу хостинга на основе сети доставки контента (CDN).Я ничего не сделать, чтобы улучшить производительность статической версией, кроме просто размещения на хост с глубокой интеграции CDN .

¹⁴

Я побежал некоторые тесты, чтобы посмотреть, как это влияет на время первого байта и полный времени загрузки из главных index.htmlстраница.Вот что Супер-полезно tool__1 производительность Sucuri в |16показали .

Даже с оптимизированный динамического веб-сайта, статическая версия более чем в шесть раз быстрее по average!Конечно, не каждый хозяин будет статический сделать этот вид различия, но используя этот уровень кэширования CDN основе просто не было бы возможно без ручного динамического веб-сайта, по крайней мере, не без введения действительно странные артефакты кэширования .

¹⁷

Кэширование и, более конкретно, Кэш invalidationчрезвычайно трудно получить права с динамическим веб-сайте, особенно рода распределенного кэширования, необходимых для полной мере воспользоваться из CDN.С WordPress сайте, нет никакой гарантии, что то же самое URL не вернется другое HTML зависимости от того, пользователь вошел в систему, параметры запроса, продолжающиеся испытания A / B и так далее.Отслеживание, когда страница должна быть признана недействительной в кэше являетсясложная задача: Любое изменение комментарий, глобальный параметр сайт, тег, категории или другой контент в базе данных может привести к изменениям в списках соответствующих должностей, страниц индекса, архива, комментариев и т.д. счетчиков .

Статические веб-сайты являются принципиально differentв этом отношении.Они придерживаются очень простой договора кэширования: Любой URL не будет возвращать тот же HTML любому посетителю до конкретного файла, который соответствует этой URL явно обновленной .

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

Современный статический сайт генератор Link

В последние годы этот альтернативой традиционным динамической инфраструктуры приобрел землю.Идея статического генератора сайте нет ничего нового.Даже WordPress “крупнейшим конкурентом назад в день, Movable Type, имел возможность работать в качестве статического генератора сайте .

¹⁹

Шаблоны Link

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

Уценки Поддержка Link

ПодъемУценки, скорее всего, одна из главных причин, почему статические генераторы сайт стали так популярны.Мало кто будет мечтать о написании всех их содержания в BBCode²¹или чистый HTML, в то время как уценки очень приятно работать, и Markdown редакторы для серьезных письменной форме, конспектирования и блогов, кажется, взрывается в популярности .

Все основные статические генераторы поддерживать Markdown.Некоторые клянутся reStructuredText²²или формат альтернативой разметки.В общем, все они позволяют разработчикам контента, чтобы работать с запись обычного текстовых документов в структурированном формате .

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

Мета данных Link

Содержимое редко стоит полностью на его собственный.Читатели часто хотят знать автор блоге, дата поста, категории он принадлежит и так далее .

²³

Когда GitHub собственной Том Престон Вернер написал Jekyll²⁵²⁴к власти его блог, он придумал действительно интересное решение для представления метаданные при работе в первую очередь с Markdown документов и шаблонов: перед Дело .

Вступление является немного мета-данных, как правило, в формате YAML, в самом верху документа:

title: Title of the document
categories:
- Category A
- Category B
---

# Actual content

This is the document

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

Активами трубопровода Link

Сегодня развитие Фронтальный почти всегда включает в себя несколько строитьинструменты и compilers,Мы хотим, чтобы наши активы, которые будут минимизированы и в комплекте.CSS препроцессоры ушли от странностей в основных инструментов.И CoffeeScript и ECMAScript 6 transpiling сделали составителям неотъемлемую часть программирования для браузера .

Большинство современных статических генераторы сайт включают трубопровод активов, который обрабатывает компиляции активов, transpiling, minification и комплектации.Некоторые из них основаны на строительных инструментов, таких, как Грунт, Глоток и брокколи, и пусть вы подключите в целых экосистем зада …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 02.11.2015 by coding.smashingmagazine.com