使用 Hyde 快速构建轻量级的静态站点

使用基于纯文本系统的站点开发工具包揭开内容管理的神秘面纱

Web 发布框架非常出色,但有时太过庞杂,您可能只想要一个简单的静态站点,依赖该站点获得良好的一致性能。在无需额外开销就能利用 Web 发布框架的便捷性的场合中,静态站点生成器是一个非常有用的混合工具。Hyde 是一个流行的站点生成器,提供了功能强大的基于 Django 的模板和元数据管理。Hyde 是在 Python 中实现的,但并不要求一定要掌握 Python 知识。在本文中,我们将学习如何使用 Hyde 加快静态站点的开发。

Uche Ogbuji (uche.ogbuji@fourthought.com), 首席顾问, Fourthought, Inc.

Uche Ogbuji 的照片Uche OgbujiZepheira的合作伙伴,负责监管复杂的 Web 目录和其他丰富的上下文数据库的创建。他是高级 Web 技术的开创先驱,这些技术包括 XML、语义 Web、Web 服务和开源项目(比如 Akara,这是一个适用于 Web 数据应用程序的开源平台)。Uche 是一位出生于尼日利亚的计算机工程师和作家,他目前生活和工作在美国科罗拉多的博耳德。您可以通过他的博客 Copia进一步了解他。



2013 年 6 月 25 日

概述

在 Web 开发早期,大多数网页只是某个服务器上文件系统中的一个页面。随着 Web 的日益成熟,借助动态站点、电子商务、大规模发布和 Web 上的应用程序,从使用简单文件转换到使用复杂的 Web 内容管理系统 (CMS) 和发布工具也变得越来越普遍。每天都有数以千计的站点在以下平台上运行:

  • IBM®WebSphere®
  • 其他 Java®框架或 .NET
  • 其他流行的可供替换的 Web 发布框架,比如 Ruby on Rails 和 Django
  • 面向社区的 CMS,比如 WordPress

除了最简单的站点以外,其他任何站点似乎都需要一个配备了现代设施和工作流的 CMS。

但是,许多 Web 老手(比如我)依然记得过去简单站点的一些优势。首先,提供静态文件需要的服务器功率较少。另一个问题是备份和内容可移植性。在选择 CMS 或 Web 发布框架时,可能需要依赖于它们呈现给您的内容。将内容绑定到数据库表中,这样就无法轻易接触或拿出一个文件来共享。迁移到不同的基础架构可能是一项艰巨的任务,必须依靠特殊工具才能实现备份和恢复。

导致这些问题的根本原因就是透明性。Web 发布框架和 CMS 通常都不是透明的,这意味着要了解它们是如何存储、管理和提供内容的,就需要掌握大量的专业知识。从某种程度上讲,对于所有站点(即使是最简单的网站),这项要求都是不可避免的,近期新兴的项目提供了一些优势的框架,而且不会丢失在服务器上处理和发布简单文件的核心元素。较为流行的一个框架是 Jekyll。 一些开发人员以 Jekyll 核心理念为基础,使用一组在开源 Hyde 项目上创建的构造块进行构建。Hyde 也是我使用的 Web 发布系统。Hyde 虽然很简单,但提供了许多功能,它将大多数业务限制为处理简单文件,以便生成一个静态站点,这带来了高效性和灵活性。

Hyde 入门

Hyde 是使用 Python 编写的一个系统,它支持您在 Web 开发机的文件系统上管理目录中的内容和模板。您可以使用常规文本编辑器和命令行工具创建或更新内容,也可以使用 IDE(如果您喜欢的话)。如果您想看看站点的外观,那么可以使用 Hyde 生成站点,并使用测试 Web 服务器在本地运行。如果您对测试模式下的站点比较满意,可以将静态生成的文件导入适用于 Apache、Lighttpd、Nginx 或任何快速提供文件服务的 Web 服务器的生产 Web 服务器。


安装和设置

如果您在 Mac 或 Linux 系统上进行 Web 开发,那么可以获得的主要工具就是 Python。Python 很容易安装在 Microsoft®Windows® 以及其他大多数平台上。要将 Hyde 安装在您的 Python 库中,请调用 sudo easy_install hydepip install hyde,具体根据您的设置而定。安装成功后,就可以使用 hyde 命令了。首先,在一个带有文件框架的目录下设置 Hyde,对于典型网站,可以使用以下命令:

 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 内置在一个允许您使用 Markdown 而不是 HTML 来编写 Web 页面处理器中。在本文中,我不会对 Markdown 进行详细介绍,清单 1是 Markdown 格式的丰富内容的一个小示例。

清单 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. 清单 1 中的 Markdown 内容的 HTML 输出
      <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 构建的站点需要进行一些配置,例如,控制如何应用模板。Hyde 生成的默认 site.yaml 文件指定了一些插件,指示如何将一些本地文件目录转化成 Web 服务器路径,并提供关键页面的基本元数据。

模板和 Jinja2

目前,大多数网站从某种程度上讲都可以从模板中受益。模板系统可帮助您将站点结构和页面的共同元素与每个页面的独立内容分隔开。通过阅读博客就会发现,有时候页面上超过一半的 HTML 内容都是样板复制的。模板使得您能够将 50% 的内容仅呈现一次,然后自动应用于所有页面。模板系统也可以支持智能特性,比如自动生成博客档案日历。

Hyde 使用了一种类似于流行 Django 框架的模板语言,是通过 Jinja2 项目实现的。每个模板看起来像是对模板命令使用额外的特殊语法的 HTML,下面会进一步探讨它们。模板位于 layout 目录下,您可以在那里添加或更新模板,从而操纵站点的整体内容大纲。

您的内容

最重要的是您站点的内容,该内容可在同名目录下维护。每个 Web 页面对应一个文件。每个内容文件都从页面元数据开始,然后是页面 HTML 和模板代码。您还可以在该目录下找到支持站点的静态文件,比如图像、表单和脚本文件。


一个小示例

获得漂亮网站的一个快速方法就是下载一个免费 Web 设计,其中包括 HTML、CSS,甚至还包括呈现站点所需的脚本。然后将该设计的样板文件替换成您自己的内容,并进行外观调整。这是一个简单的使用 Hyde 的过程,对于该软件,不一定非要进行 Web 设计。在本小节中,我选择了一个常规的免费 HTML5/CSS3 ,然后对其进行修改,让它使用 Hyde。Marija Zaric 将其称为 “Minimalism”(参阅参考资料),在 Creative Commons Attribution (by) 3.0 下提供,以便您可以免费使用它,甚至可将它用于商业项目,只要注明了所使用模板的作者。使用该模板的网站将成为该模板的衍生作品。

下载模板包并对其进行解压。其中包含一个 index.html 文件。Hyde 文件夹的 content 目录中也包含一个同名文件,但实际上该文件不是一个 HTML,而是一个基于 base.j2 的 Jinja2 模板,我要做的就是将 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 模板

在网站中,许多页面通常具有相同的基础布局和设计,只在内容和元数据上有所区别。要将 Minimalism 设计模板变成一个可用于多个页面的 Jinja2 模板,首先需要找出所有页面的共同点和各个页面的特有内容。查看 Minimalism 中的 head 元素:

      <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. 展示 Jinja 块标记的 "Minimalism" 模板部分
      <!--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. 使用 HTML 展示了清单 3 的页面示例,并重写了两个 Jinja 模板块。
      --- 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 -%} 命令来调用 Hyde 内置的 Markdown 转换器。

清单 5. 使用 Markdown 展示了清单 3 的页面示例,并重写了两个 Jinja 模板块
      --- 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。请注意,这些二进制数是左对齐的,这与 HTML 代码不同 ,HTML 代码是根据块元素格式进行缩进的。这是因为缩进在 Markdown 中很重要,而这在 HTML 中并不重要。


结束语

我只是简单介绍了 Jinja 模板中的一些功能和其他 Hyde 组件。其实简单介绍就已经足够,因为 Hyde 被设计为便于从简单功能开始,随着对 Hyde 的使用,您将逐渐深入了解更多的复杂特性,无论何时需要增强自动化和改进工作流,都可以使用这些复杂特性。您可以使用简单的块(进行嵌套)开发一些简单 Web 页面。如果需要自动编辑博客等,Hyde 的默认布局将会提供一个很好的示例。

总而言之,Hyde 为您提供了内容管理系统和低级 Web 发布框架的大多数特性。在使用文件系统作为备份存储的情况下,即使是系统的非常小的一部分,也可能是模糊不清或神秘的。我认为这样做很有好处,现在,您应该已掌握了足够的基础知识,可以使用 Hyde 和您选择的 Web 设计模板开始创建一个简单 Web 页面了。

参考资料

学习

获得产品和技术

  • 了解 Hyde,这是一个可以模型化许多常见 CMS 功能的静态网站生成器。
  • 查阅 Jinja2模板语言和工具包,它类似于 Django
  • 获取用于本文示例的 Marija Zaric “Minimalism” 模板
  • 以最适合您的方式 评估 IBM 产品:下载产品试用版,在线试用产品,在云环境中试用产品,或者在 SOA 沙盒中花费几个小时来学习如何高效地实现面向服务的架构。

讨论

  • 加入 developerWorks 中文社区:查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。 。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Open source
ArticleID=934834
ArticleTitle=使用 Hyde 快速构建轻量级的静态站点
publish-date=06252013