Я порезал себе зубы как веб-разработчик, создающий динамические веб-сайты, но в последнее время все больше и больше я обнаруживаю, что мне не нужно делать так много на сервере. На самом деле, в некоторых случаях мне вообще не нужен внутренний сервер. Сегодня я решил попытаться преобразовать динамический веб-сайт в статический, используя платформу Harp .
Harp — это легкий веб-сервер со встроенными процессорами для разных языков (Markdown, Jade, EJS, LESS, Stylus и CoffeeScript). Он следует простому соглашению, которое упрощает создание простого веб-сайта. После установки вы можете начать работу в считанные секунды. Вам определенно следует проверить документацию самостоятельно (но обратите внимание — я видел некоторые проблемы с макетом в Chrome, поэтому вы можете использовать Firefox вместо этого).
Но настоящая особенность убийцы заключается в том, что, как только вы создали свой сайт, вы можете преобразовать все это в статическую версию с помощью одной команды.
Вы можете спросить — почему вы вообще беспокоитесь? Если я создаю простой 3-4-страничный сайт, какая польза?
Я сам прошел через это несколько месяцев назад, когда создал сайт для друга семьи. Она художник ( http://louisianawatercolors.com/ ) и ей нужен был быстрый веб-сайт, который она могла бы использовать для демонстрации некоторых работ и добавления контактной информации. Я взял шаблон веб-сайта, и все было круто, пока я не понял, что мне нужно сделать несколько настроек для шаблона. Это было после того, как я построил сайт. Это, конечно, не имело большого значения, я только что отредактировал 5 файлов, но Арф сияет в том, что я мог сделать это в одном файле макета и просто сгенерировать новую сборку сразу.
Для своего эксперимента я решил перестроить мой самый старый (все еще живой) веб-сайт « Что сказал гром» . Это сайт, который я построил в 1996 году (да, тогда у них был Интернет) как проект класса. HTML ужасен. Теперь ужасно это слишком мило. Если вы просматриваете источник, вы увидите таблицы, теги шрифтов и, извините, теги во всех заглавных буквах. Мне жаль. Но я также подумал, что это будет идеальный кандидат на конверсию.
Версия сайта ColdFusion была «динамичной», но лишь минимально. Я использовал шаблон ColdFusion для макета. Кроме того, была контактная форма и форумы. За последние пять лет никто не использовал форумы или контактную форму, поэтому я решил, что они могут уйти. Поэтому единственная настоящая работа, которую я должен был сделать, это создать свой макет. Давайте посмотрим на код. (И отказ от ответственности — это мой первый сайт с арфой — я, вероятно, сделал это неправильно.)
Первый — я решил пойти с EJS для моих шаблонов. EJS в порядке, не так хорош, как руль, но я совершенно ненавижу Джейд, и Арфа пока не поддерживает руль. (Хотя это скоро произойдет.) Используя EJS, я мог бы создать простой шаблон, подобный этому.
<html> <head> <meta name="robots" content="index,follow" /> <meta name="title" content="<%- title %>"/> <meta name="Description" content="What the Thunder Said is a site devoted to the life and works of T.S. Eliot."> <meta name="Keywords" content="t.s. eliot,eliot,T.S. Eliot,poetry,fiction,what the thunder said,thunder,waste land"> <link rel="stylesheet" type="text/css" href="/style.css"> <title><%- title %></title> </head> <body bgcolor="#ac9581" text="#000000" link="#490000" vlink="#490000"> <%- yield %> </body> </html>
Обратите внимание — это несколько более простая версия реального файла шаблона. В шаблоне вы можете увидеть несколько жетонов. Значение заголовка — одно, а доходность — другое. Значение yield будет заменено на HTML запрашиваемого файла. Это означает, что я могу написать страницу о программе и просто добавить содержимое, относящееся к этой странице.
Итак, хотя очевидно, откуда берется тело шаблона, как насчет этого поля заголовка? В моем приложении ColdFusion каждая страница передавала это в качестве аргумента помощнику по макету. В Harp вы используете файл _data.json для указания таких значений. Вот как я это сделал для своего сайта.
{
"index": {
"title":"What the Thunder Said: T.S. Eliot"
},
"eliot_timeline": {
"title":"What the Thunder Said: Timeline of T.S. Eliot",
"header":"timeline"
},
"poetry_works": {
"title":"Works by T.S. Eliot",
"header":"works"
},
"literature_resources": {
"title":"Resources on T.S. Eliot",
"header":"res"
},
"eliot_etcetera": {
"title":"Etcetera",
"header":"etc"
},
"poetry_feedback":{
"title":"Feedback",
"header":"feedback"
},
"404":{
"title":"File not found",
"header":"etc"
}
}
В случае, если вам интересно, значение заголовка используется моим реальным шаблоном макета для обработки изменения изображения заголовка.
Как только я собрал файлы (и покачал головой о том, насколько плох мой HTML был тогда), я перешел к командной строке:
harp compile
Вот и все. Шутки в сторону. Он проанализировал мой проект и выплюнул чистый HTML. Вот папка для моего проекта. В общей папке я выполнял свою работу, а в папке www — статический вывод.
Если я открыл index.html, я увидел комбинацию моего файла макета вместе с содержимым index.ejs. То же самое и для других моих файлов. И просто чтобы понять суть — если я найду ошибку в своем макете (за исключением ужасного HTML) — я могу отредактировать файл — перестроить свой статический сайт — и все готово.
Итак, последний аспект этого путешествия был еще круче. Грег Уилсон целую вечность говорил мне, чтобы посмотреть на статический хостинг веб-сайтов с Amazon S3. Оказывается — бесплатный уровень Amazon позволяет невероятно 20000 запросов в месяц бесплатно. Это безумие! Это определенно больше, чем мне нужно для этого сайта.
Если вы еще этого не видели, Amazon делает процесс создания сайта из корзины S3 довольно щадящим. Вы начинаете в свойствах:
Далее вам нужно добавить политику корзины. Эта часть довольно запутанная. Но я обнаружил, что могу скопировать XML отсюда ( http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html ) и просто изменить имя корзины, и она работала нормально.
Последним этапом процесса было несколько быстрых обновлений домена / DNS на GoDaddy (и еще раз спасибо Грегу за помощь), и на этом все. Первое изменение — это CNAME для префикса www. Это довольно просто. Следующий не был так очевиден. (Опять же, спасибо Грегу.) Чтобы foo.com также работал, добавьте правило пересылки:
Я перешел от размещенного решения, работающего с Apache и ColdFusion, к полностью статическому решению на S3 … без цены. Более того, у меня все еще есть возможность динамического приложения для генерации моих файлов. Победа вокруг, я бы сказал.
PS Кстати, я только что заметил, что мои названия не соответствуют друг другу. Мне потребовалось около 20 секунд, чтобы исправить и подтолкнуть к производству.