Создание быстрых и легких Web-сайтов с помощью Hyde

Инструментарий разработки Web-сайтов на основе простой файловой системы срывает завесу тайны с управления контентом

Платформы Web-публикаций хороши, но иногда они кажутся слишком громоздкими, а вам нужен всего лишь простой статический сайт, который обеспечит хорошее и стабильное быстродействие. Генераторы статических сайтов ― это полезный гибрид для тех случаев, когда требуется удобство, характерное для платформы Web-публикации, но без излишеств. Hyde — это популярный генератор сайтов с мощным аппаратом шаблонов, основанным на Django, и функциями управления метаданными. Он написан на языке Python, но знание Python не обязательно. Эта статья учит использовать Hyde для ускорения процесса разработки статических Web-сайтов.

Учи Огбаджи, ведущий консультант, Fourthought Inc

Учи Огбаджи (Uche Ogbuji) – консультант и соучредитель Fourthought Inc.. компании, специализирующейся на продаже программного обеспечения и консалтинге в области XML-решений для менеджмента интелектуальный ресурсов предприятий. Fourthought разрабатывает 4Suite, платформу с открытым кодом для XML, RDF и приложений для управления интеллектуальными ресурсами. Мистер Огбаджи является также ведущим разработчиком языка запросов Versa RDF. Он – компьютерный инженер и писатель, родившийся в Нигерии; живет и работает в Болдере (Boulder), штат Колорадо, США. Вы можете найти больше информации о мистере Огбаджи, посетив его блог Copia.



31.05.2013

Обзор

В ранней истории Web большинство страниц были просто страницами в файловой системе, размещенными на каком-нибудь сервере. Затем, по мере совершенствования Web, стали появляться динамические сайты, системы электронной коммерции, крупномасштабные издания и Web-приложения, так что он все больше и больше двигался от простых файлов в сторону сложных систем управления Web-контентом (CMS) и инструментов публикации. Сегодня многие тысячи сайтов работают:

  • на IBM® WebSphere®;
  • других Java®- или .NET-платформах;
  • популярных альтернативных платформах Web-публикации, таких как Ruby on Rails и Django;
  • социально-ориентированных CMS, таких как WordPress.

Для всех сайтов, кроме простейших, стало почти стандартным требование CMS с современным инструментарием и рабочим процессом.

Но многие старожилы Web, такие как я, часто вспоминают преимущества былой простоты. Во-первых, для обслуживания статических файлов требуется меньше ресурсов сервера. Другая проблема ― резервное копирование и переносимость содержания. Выбирая CMS или платформу Web-публикации, вы полагаетесь на нее, чтобы сделать свою информацию наглядной. Ваша информация связана с таблицами базы данных, и ее нельзя легко вытащить и переслать в виде файла. Переход на другую инфраструктуру может оказаться довольно сложной задачей. А для резервного копирования и восстановления приходится опираться на специализированные инструменты.

Свойство, лежащее в основе этих проблем, называется прозрачностью. Платформы Web-публикаций и CMS, как правило, непрозрачны, что означает, что для понимания того, как они хранят, организуют и обслуживают информацию, требуются глубокие специальные знания. В какой-то мере для всех Web-сайтов, кроме самых простых, это требование неизбежно, однако некоторые новые проекты предлагают определенные преимущества платформ Web-издания, не теряя при этом ключевого элемента обработки и публикации простых файлов на сервере. Одна из популярных платформ этого типа ― Jekyll. Некоторые разработчики опираются на основные идеи Jekyll, но используют другой набор стандартных конструктивных блоков, созданных в рамках проекта ПО с открытым исходным кодом Hyde. Hyde ― моя любимая система Web-издания. При всей своей простоте она обеспечивает широкие возможности и ограничивает вашу задачу главным образом подготовкой простых файлов для создания статического сайта, что гарантирует значительную эффективность и гибкость.

Знакомство с Hyde

Hyde — это система, написанная на Python, которая позволяет управлять информацией и шаблонами в каталоге файловой системы компьютера, используемого для Web-разработки. Для создания или обновления информации используются обычный текстовый редактор и инструменты командной строки, но можно работать и со своей любимой IDE. Когда нужно посмотреть, как будет выглядеть сайт, Hyde позволяет создать и обслуживать его локально с помощью тестового Web-сервера. Если вам нравится, как выглядит сайт в тестовом режиме, то сгенерированные статические файлы можно передать на рабочий Web-сервер Apache, Lighttpd, Nginx или любой другой, который будет молниеносно обслуживать эти файлы.


Установка и настройка

У тех, кто занимается Web-разработкой на системах Mac или Linux, главное ― Python ― уже есть. Python легко установить и на Microsoft® Windows® и большинство других платформ. Чтобы установить Hyde в библиотеку Python, достаточно выполнить команду sudo easy_install hyde или pip install hyde в зависимости от своей установки. После этого должна быть доступна команда hyde. Для начала установите Hyde в каталог со скелетным набором файлов для типового Web-сайта с помощью следующей команды:

hyde -s $PATH_TO_DIRECTORY create

Замените $PATH_TO_DIRECTORY тем каталогом, в котором вы хотите работать над файлами информации и шаблонов.

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

Если перейти во вновь созданный каталог сайта с макетом по умолчанию, то вы увидите следующие подкаталоги:

README.markdown content info.yaml layout site.yaml

Каждый из них содержит определенную часть Hyde.

Markdown

Мало кому нравится писать HTML-код, и Hyde позволяет свести работу с HTML к минимуму. В большинстве систем управления контентом есть способы избежать ручного HTML-кодирования, обычно с использованием специальных виджетов точного отображения (WYSIWYG), которые создают впечатление работы с текстом, но генерируют HTML. Другой подход хорошо известен по вики. Для обозначения различных конструкций HTML-разметки обычный текст редактируется с использованием специальных символов. Это называется облегченными языками разметки, и один из наиболее популярных из них ― Markdown.

В Hyde есть встроенный процессор, который позволяет писать Web-страницы на языке Markdown, вместо HTML. Я не буду в этой статье приводить подробное введение в Markdown, но листинг 1 демонстрирует небольшой пример документа в этом формате.

Листинг 1. Пример документа в формате Markdown
      For immediate release. **Boulder, Colorado, 1 January 2012** The new year began 
      with a bang.... At city hall a local first nation elder was invited to offer 
      residents a greeting of *Heebee*, or "Hello" in Arapaho, and recorded for the 
      [city Web page](http://www.bouldercolorado.gov/). One resident said his New Year 
      resolutions were to: 
      * Lose weight 
      * Go camping for at least one week in the summer 
      * Pay off one credit card

Markdown-процессор, такой как тот, что входит в состав Hyde, может конвертировать это в HTML, как показано в листинге 2.

Листинг 2. HTML-страница из Markdown-документа, приведенного в листинге 1
      <p>For immediate release. 
      <strong>Boulder, Colorado, 1 January 2012</strong> 
      The new year began with a bang....</p>
      <p>At city hall a local first nation elder was invited to offer residents 
          a greeting of <em>Heebee</em>, or "Hello" in Arapaho, and recorded 
          for the <a href="http://www.bouldercolorado.gov/">city Web page</a>.</p>
      <p>One resident said his New Year resolutions were to:</p>
      <ul>
          <li>Lose weight</li>
          <li>Go camping for at least one week in the summer</li>
          <li>Pay off one credit card</li>
      </ul>

Конфигурация сайта и YAML

YAML Ain't Markup Language (YAML) — это язык, который некоторые программисты любят использовать для файлов конфигурации. Сайт, построенный с помощью Hyde, требует некоторой настройки, например, для управления тем, как применять шаблоны. Файл site.yaml, генерируемый Hyde по умолчанию, указывает на несколько плагинов, показывает, как некоторые локальные каталоги файлов преобразуются в пути для Web-сервера, и предоставляет основные метаданные для некоторых ключевых страниц.

Шаблоны и Jinja2

Сегодня большинство Web-сайтов в той или иной степени использует шаблоны. Система шаблонов помогает отделить общие элементы структуры и страницы сайта от индивидуального содержания каждой страницы. Например, если посмотреть на блог, то окажется, что иногда более половины HTML-кода каждой страницы ― это шаблонный текст, повторяющийся во всех записях. Шаблоны позволяют оформить эти 50% содержания единственный раз и автоматически размещать его на всех страницах. Система шаблонов может поддерживать и более сложные функции, такие как автоматическая генерация календаря с архивами блогов.

Hyde использует язык шаблонов, подобный популярной платформе Django, реализованной в рамках проекта Jinja2. Каждый шаблон выглядит как HTML-код с некоторым дополнительным, специальным синтаксисом для команд управления шаблонами, как будет показано ниже. Шаблоны размещаются в каталоге layout, где их можно дополнять и обновлять, манипулируя общим макетом своего сайта.

Содержание

Важнее всего ваше собственное содержание сайта, которое хранится в каталоге с именем Your content. Как правило, это один файл для каждой отдельной Web-страницы. Каждый файл содержания начинается с метаданных страницы, за которым следует код HTML и код шаблона страницы. В этом же каталоге находятся статические файлы для поддержки сайта ― изображения, таблицы стилей, файлы сценариев и т.п.


Небольшой пример

Быстрый способ начать с красивого сайта ― загрузить один из многих бесплатных образцов Web-дизайна, содержащих HTML, CSS и даже сценарии, необходимые для отображения сайта. Затем можно заменить шаблонный дизайн своим собственным содержанием и подредактировать внешний вид. Hyde упрощает этот процесс, и вам не нужно ограничиваться Web-дизайном, рассчитанным на данное конкретное ПО. Для этого раздела я выбрал простой бесплатный шаблон HTML5/CSS3 и адаптировал его для Hyde. Это шаблон Minimalism Марии Зарыч (см. раздел Ресурсы), предоставляемый по лицензии Creative Commons Attribution (by) 3.0, так что его можно свободно использовать даже в коммерческих проектах, если только поблагодарить автора. Web-сайты, созданные с помощью шаблона, становятся его производными произведениями.

Я загрузил пакет шаблона и распаковал его. Он содержит файл index.html. Каталог Hyde content тоже содержит файл с таким именем, но это на самом деле не HTML, а шаблон Jinja2, основанный на base.j2. Я превратил файл Minimalism в новый шаблон, скопировав его как minimalism.j2. Одновременно я скопировал в соответствующие места и другие, вспомогательные файлы шаблона:

      cp minimalism/index.html 
      $PATH_TO_DIRECTORY/layout/minimalism.j2 cp minimalism/css/styles.css 
      $PATH_TO_DIRECTORY/content/media/css/ cp minimalism/images/* 
      $PATH_TO_DIRECTORY/content/media/images/

Превращение шаблона дизайна в шаблон Jinja2

На Web-сайтах часто один и тот же базовый макет и дизайн используется для множества страниц, различающихся только содержанием и метаданными. Чтобы превратить дизайн Minimalism в шаблон Jinja2, который можно использовать для множества фактических страниц, определите, что должно быть общим для всех страниц, а что ― индивидуальным. Рассмотрим элемент head шаблона Minimalism.

      <head> 
          <meta charset="UTF-8"> 
              <title>Minimalism - Home</title> 
              <link rel="icon" href="images/favicon.gif" type="image/x-icon"/> 
              <!--[if lt IE 9]> 
                  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
                  </script> 
                  <![endif]-->
              <link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/>
              <link rel="stylesheet" type="text/css" href="css/styles.css"/>
      </head>

В данном случае почти все, кроме заголовка, повторяется на всех страницах, поэтому я перенесу в поле метаданных шаблона только содержимое заголовка:

<title>{{ resource.meta.title }}</title>

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

      <link rel="icon" href="{{ media_url('images/favicon.gif') }}" type="image/x-icon"/>
      ... 
      <link rel="shortcut icon" href="{{ media_url('images/favicon.gif') }}" 
          type="image/x-icon"/> <link rel="stylesheet" 
              href="{{ media_url('css/styles.css') }}" type="text/css"/>

Во время разработки в строку можно поместить файл favicon.gif. Изображение значка при публикации сайта лучше разместить в корне домена, тогда явные ссылки становится излишними.

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

      <a class="photo_hover3" href="#"> 
          <img src="{{ media_url('images/picture1.jpg') }}" width="240" 
              height="214" alt="picture1"/></a>

На этом этапе Hyde может отображать шаблон только так, как он выглядит на демосайте, с которого был загружен. Но работа еще не закончена. Теперь нужно заменить демонстрационный текст Lorem Ipsum полезной информацией.

Информационное наполнение

В шаблоне легко пометить места, куда нужно вставить информацию страниц. Просто добавьте маркеры блоков Jinja. Листинг 3 иллюстрирует раздел minimalism.j2.

Листинг 3. Раздел шаблона Minimalism, иллюстрирующий маркеры блока Jinja
      <!--start intro--> 
      {% block intro %} 
      <section id="intro"> 
          <hgroup> 
              <h1>"Simplicity is the ultimate sophistication"
                  <span>- Leonardo da Vinci</span>
              </h1> 
              <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                  Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
                  Vestibulum condimentum facilisis nulla. In hac habitasse platea 
                  dictumst. Nulla nonummy. Cras quis libero.</h2> 
          </hgroup> 
      </section> 
      {% endblock intro %}

Я добавил в HTML-шаблон {% block intro %} и {% endblock intro %}. Как видите, демонстрационный текст я оставил на месте. Это удобно, потому что я буду переопределять страницу за страницей. Листинг 4 служит примером страницы, сохраненной как index.html, которая основана на шаблоне minimalism.j2, но содержит два переопределенных блока шаблона.

Листинг 4. Пример страницы, основанный на листинге 3, но с переопределением двух блоков шаблона Jinja с использованием Markdown
      --- extends: minimalism.j2 
      title: Strange Case of Dr Jekyll and Mr Hyde 
      description: Tribute to a Victorian classic -- 
      {% block intro %} 
      <section id="intro"> 
      <hgroup>
      <h1><i>Strange Case of Dr Jekyll and Mr Hyde</i>
          <span>—R.L. Stevenson</span></h1>
          <h2>"I knew myself, at the first breath of this new life, 
          to be more wicked, tenfold more wicked, sold a slave to my original evil; 
          and the thought, in that moment, braced and delighted me like wine."</h2>
      </hgroup>
      </section>
      {% endblock intro %}
      {% block group1 %}
      <section class="group1">
          <h3>The author</h3>
          <p><b>Robert Louis Balfour Stevenson</b> (13 November 1850 – 3 December 1894) 
              was a Scottish novelist, poet, essayist and travel writer. His best known 
              books include <i>Treasure Island</i>, <i>Kidnapped</i>, and 
              <i>Strange Case of Dr Jekyll and Mr Hyde</i>.</p> 
          <a class="photo_hover3" href="#">
              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/  
                  Robert_Louis_Stevenson_Knox_Series.jpg/ 
                  220px-Robert_Louis_Stevenson_Knox_Series.jpg" 
                  width="220" height="329" alt="R.L. Stevenson"/></a> 
          <a href="#"><span class="button">Read more</span></a>
      </section>
      {% endblock group1 %}

Листинг 5 иллюстрирует использование Markdown для выражения части содержания страницы с помощью инструкции {% filter markdown -%} для вызова встроенного markdown-конвертера Hyde.

Листинг 5. Пример страницы, основанный на листинге 3, но с переопределением двух блоков шаблона Jinja с использованием Markdown
      --- extends: minimalism.j2 title: Strange Case of Dr Jekyll and Mr Hyde 
      description: Tribute to a Victorian classic --- 
      {% block intro %} 
      <section id="intro">
          <hgroup>
             {% filter markdown -%} 
      # *Strange Case of Dr Jekyll and Mr Hyde* 
      ## "I knew myself, at the first breath of this new life, to be more wicked..." 
             {%- endfilter %} 
          </hgroup> 
      </section> 
      {% endblock intro %} 
      {% block group1 %} 
      <section class="group1"> 
          {% filter markdown -%} 
      ### The author 
      **Robert Louis Balfour Stevenson** (13 November 1850 – 3 December 1894) was a 
      Scottish novelist, poet, essayist and travel writer. His best-known books include 
      *Treasure Island*, *Kidnapped*, and *Strange Case of Dr Jekyll and Mr Hyde* 
          {%- endfilter %} 
          <a class="photo_hover3" href="#">
              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/ 
                  Robert_Louis_Stevenson_Knox_Series.jpg/ 
                  220px-Robert_Louis_Stevenson_Knox_Series.jpg" 
                  width="220" height="329" alt="R.L. Stevenson"/>
          </a> 
          <a href="#"><span class="button">Read more</span></a> 
      </section> 
      {% endblock group1 %}

Как markdown интерпретируется только текст, заключенный в инструкции filter. Обратите внимание, что этот текст выровнен по левому краю, в отличие от элементов HTML, которые следуют с отступом в соответствии с элементами блоков. Потому что в Markdown отступы значимы, а в HTML ― нет.


Заключение

Это лишь самое поверхностное описание возможностей шаблонов Jinja и других компонентов Hyde. Но этого достаточно, потому что Hyde спроектирован таким образом, что начав с простых функций, можно переходить к более сложным, когда потребуются дополнительные средства автоматизации и совершенствования рабочего процесса. Можно разработать множество простых Web-страниц из простых блоков (с возможностью вложения). Макет по умолчанию Hyde даетхороший пример, когда нужны автоматически составляемые блоги и т.п.

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

Ресурсы

Научиться

  • Оригинал статьи: Build rapid and lightweight static websites with Hyde.
  • Подробнее о Markdown, популярном облегченном языке разметки на основе текста.
  • Подробнее о языке YAML Ain't Markup Language (YAML), который становится все более популярным для файлов конфигурации, используемых в Hyde.
  • Другие статьи этого автора (Уче Огбаджи, developerWorks, с ноября 2000 г. по настоящее время): статьи, посвященные Web-разработке, Python, XML, XSLT и другим технологиям.
  • Новости Web-разработки: читайте о самых разнообразных технологиях, используемых для разработки Web-приложений, которые обслуживают информацию, от файлов HTML, CSS или JavaScript до реляционных баз данных и программирования на стороне сервера.

Получить продукты и технологии

  • Начните работать с Hyde, генератором статических сайтов, моделирующим многие традиционные функции CMS.
  • Jinja2: язык шаблонов и инструментарий, подобный Django.
  • Шаблон Minimalism Марии Зарыч, используемый в примерах для этой статьи.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=932162
ArticleTitle=Создание быстрых и легких Web-сайтов с помощью Hyde
publish-date=05312013