一个成熟的cms是非常需要的。有时，你仅仅需要创建一个轻量的静态网站，而大量的静态页以致要处理复制模板的任务,使得跨站标记变的事很繁重。今天，我会演示一个简单的解决方案-jekyll-它是使得建一个小站点变的很轻松。
第一步：了解 jekyll
jekyll 是一个简单的、对博客友好的、静态的站点生成器。官网是这么说的。但是这真正意味着什么呢？一个静态的站点生成器是一个程序，它需要一些文件集合来生成你的站点。正如你看到的，我们可以使用大量的模板来创建不同的内容，然后用kekyll生成我们的网站。“对博客友好”意味着我们可以用他来创建博客，或者任何包含具有一系列相似的文章的分类的网站（比如个人作品集网站）(就是说网站里同一分类下的文章结构相似)。让我们赶快试一试！
第二步安装 kekyll
关于更多的Ruby Gems信息请参考这里
我们将要开始安装jekyell;他是一个 Ruby gem，所以你应该直接这样做:
gem install jekyll # use `sudo` if your setup requires it第三步：创建我们第一个模板
接下来，让我们为kekyll创建一些文件夹。给这次教程创建一个文件夹，名字叫“example-app”;我们将要创建个人网站，一个展示图片的网站。这是一个展现jekyll的好例子，这个小网站虽然更新不频繁，但是当你做一个标记改动时不需要去打开每个页面，做这样的事情，它完全足够你用。
在"example-app"里，创建一个名叫_layouts的文件夹。注意文件夹名开头的下划线：任何以下划线开头的文件或这文件夹都不是kekyll生成网站的一部分。如果有kekyll能认出的文件（例如：_config.yml或_layouts），它们的将用于网站的生成，但是文件本身不会出现在生成的网站中。记住：每一个不以下划线开头的文件或文件夹将会复制到生成的站点下（默认是_site下的子目录）。
因此，让我们创建一个布局文件，我们将以一个普通的站点布局文件开始，它包含了我们网站的所有结构。在_layout文件夹下创建一个新文件，命名为default.html（名字不重要），他的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> {% if page.title %} {{ page.title }} | {% endif %} John Doe, Photographer </title>
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<div id="main">
<header>
<h1> John Doe Photograghy </h1>
<header>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
{{ content }}
<footer>
<p>@copy; John Doe Photography 2011 | All Rights Reserved. </p>
</footer>
</div>
</body>
</html>这有些规则需要你记住：
首先，jekull使用的是Liquid template system(默认)。这意味着，你可以使用Liquid做任何事情。例如，在<title>标签里，我们可以使用2个Liquid表记语言的类型符：输出标记和标签标记。输出标记可能输出文本（如果变量引用存在），然而标签标记不是这样的。输出标记是被双大括号界定的，而标签标记是被一个大括号和百分号来界定的。
接下来的要注意的是Liquid标签内的内容：例如page.title 和 content。这些变量由jekyll提供；你可以查看文档里关于 available template data的列表。我们也能够创建自定义的模板数据，正如我们刚才浏览的。
最后，注意链接的css：在你项目的根目录创建一个css文件夹，将下边的代码丢进去：
body {
font: 16px/1.5 verdana, helvetica-neue, helvetica, arial, san-serif;
background: black;
color: #ececec;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #ccc;
text-decoration: none;
}
a:hover {
color: #ececec;
text-decoration: underline;
}
#main {
width: 960px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.4);
}
header {
padding: 0 10px;
overflow: hidden;
}
h1 {
margin: 0;
}
nav ul, ul.entries {
list-style-type: none;
}
nav li a {
float: left;
margin: 5px;
}
.content {
padding: 10px;
}
ul.entries li {
position: relative;
margin: 20px auto;
padding: 20px;
background: #ececec;
width: 600px;
}
ul.entries img {
width: 600px;
}
ul.entries li h3 {
position: absolute;
bottom: -18px;
left: 17px;
font-size: 2em;
}
ul.entries a {
color: #ececec;
}
ul.entries a:hover {
color: #fff;
}
footer {
font-size: 0.65em;
text-align: center;
}同样创建一个img文件夹，添加一张图片，命名为banner.jpg;我们会马上使用它。所有图片都将这么做，把他们裁剪为960*300；
你或许想知道为什么在上面使用if表达式，如果它不存在，page.title变量是否会显示？如果它存在，我想在它后面包含一个竖线；另一种写法可以是：
{{ page.title }}{% if page.title %} | {% endif %}---
layout: default
---
<section role="banner">
<img src="/img/banner.jpg" />
</section>
<section class="content">
<p>
Welcome to John Doe Photography! Please, check out my <a href="/portfolio/">Portfolio</a> to see my work.
</p>
</section>这就是index.html的内容，注意文件顶部的内容：jekyll称它为YAML页眉（front matter）,任何不以下划线开始的文件都有一个YAML页眉，文件将会被jekyll生成后放进_site文件下，如果一个文件没有名字下划线也没有YAML front matter,它经被直接复制到_site下。在这种情况下，YAML front matter仅仅告诉 jekyll 我们要使用的模板。
现在打开一个终端，cd进入你的项目目录，并且运行jekyll,你应该看到这样的提示：
WARNING: Could not read configuration. Using defaults (and options).
No such file or directory - /Users/andrew/Desktop/example-app/_config.yml
Building site: /Users/andrew/Desktop/example-app -> /Users/andrew/Desktop/example-app/_site
Successfully generated site: /Users/andrew/Desktop/example-app -> /Users/andrew/Desktop/example-app/_site忽略警告,我们一会再回来。现在你能够看到站点已经建在新建的目录_site下。如果你在自己选择的浏览器中打开_site/index.html文件,你应该看到是一个失败。问题是我们的路径（urls和stylesheet)是以“/”开始的。这意味着我们不能仅仅把它们看作是普通文件，我需要在服务器上浏览它们。当然，你可以启动W/MAMP，但是为什么去找麻烦呢？jekeyll有内置的服务器，因此，运行jekyll --server(现在启动命令已经改为：jekyll serve),然后用localhost:4000去看某些图片，像下面那样：
如果上面的图片没看够，就直接去看_site/index.html的页面代码。你将会看到你指定的模板已经和你提供的内容结合在了一起。我草，我们有自己的页面了。
我想提醒你：正是YAML front matter使这魔幻般的发生了。如果一个文件没有以3个“-”开始，没有一行或多行属性开始，也没有另外的3个“-”,则该文件仅仅被copy进_site下，不会有生成发生。
第四步：创建一个作品集的模版
现在，我们已经很轻松地完成了最基本的东西，让我们为构思的画册网站创建一个作品列表页。还记得我怎样提示jekyll对博客的友好来吗?（Well, we’re going to use this blog-awareness feature to our advantage: instead of posts, we’ll have portfolio entries.）我们将对博客友好的特性用到我们的网站中：不会是直接列出所有的文章，而是先会有作品的列表页。
所有有提交的文件在同一个文件夹下，叫_post,那么现在创建它。文件的命名模型必须指定为：year-month-day-title.ext.你在kekyll网站上提交的任何文件的格式可以是Markdown或者HTML。
那么，我们来些几篇文章，记住这些将会是作品集中真正的详情页：
_posts/2013-08-07-bikes.md
---
layout: portfolio_entry
image: /img/bikes.jpg
title: Bikes, Black and White
---
Bikes are used by almost everyone in downtown Amsterdam. These ones are chained to a bike rack.
---
layout: portfolio_entry
title: Wing and a Prayer
image: /img/wing.jpg
---
The wing of the AirBus I rode to England._layouts/portfolio_entry.html
---
layout: default
---
<h2 class="content">{{page.title}}</h2>
<img src="{{ page.image }}" />
{{ content }}如果你看了 template data page的话，你就知道自定义的front matter在page下是一个使用的。因此，在这我们能够访问page.image.也可以使用page.title和content（在最后三个“-”之后的任何地方）。
我应该在这提醒，当post对象里有title时，我们只能它所在的post对象上获取。不论怎样工作！
也注意我们这模板也要使用default布局模版。你可以想这样嵌套模版是你的工作更容易。
这样就得的了所有的文章页面，但是我们作品的主页面呢？当在defaul布局中小写导航时，我想让它放在/protfolio/下。因此，创建一个名叫“protfolio“的文件夹在根目录下，并在该目录下打开一个叫 index.html的文件。
---
layout: default
title: Portfolio
---
<section class="content">
<h2>Portfolio</h2>
<p>Check out my images below!</p>
</section>
<ul class="entries">
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">
<img src="{{ post.image }}" />
<h3>{{ post.title }}</h3>
</a>
</li>
{% endfor %}
</ul>这已经是我们最复杂的片段了。记住这不是一个模板，它是一个正常的文件，但是它还能包含Liquid 标签。我们在开头位置设置layout是default，title是Portofio。
注意，在这个html页面里，我们有一个 for - in loop Liquid表达式。我们用sites.posts来检索所有的提交的页面。通过 for post in site.posts / endfor来遍历所有的文章。如果你使用过WrodPress或者其他的博客系统，你应该很熟悉loop的概念。这就是所有的东西！在内部，正如你看到的，你可以访问所有的标准属性和所有你定义的front matter(比如 image).
现在如果你运行jekyll serve重新生成网站启动服务器，通过localhost:4000/portfolio/（相当于列表页）你应该能看到这样：
这是详情页：
好极了！你已经创建了一个个人作品集的网站，我确定你也明白了怎么样去创建一个博客。让我们继续去看去看一下关于jekyll的一些配置选项吧。
第五步：创建一个配置文件
jekyll提供了大量的选项配置。令人欣喜的是它们都有合理的默认值，但是如果你想改变它们，这一点都不难。
有2种方式来设置选项。
第一种，当你使用命令方方式运行程序时，你可以传参数进去。我们已经看到参数 --server，它表示生成站点后启动服务器。
第二种，使用配置文件_config.yml,它就是所谓的YAML文件，因此每行都是键值对（key: value），就像YAML front matter一样。jekyll在生成站点之前会寻找此文件。
那么，创建一个_config.yml文件，验证一些最常见的选项。
查看完整的配置列表，请浏览 the configuration documentation.
auto:增加auto: true到你的配置文件，jekyll将会监视你项目的变动并且及时生成站点，保证jekyll时刻运行着。
source:如果你的源文件在不同的目录下，而jekyll只能从其中一个中国运行，这时你可以通过source属性配置。
desination:默认jekyll生成的站点放在./_site目录下。如果你喜欢其他地方，你可以设置它。
permalink:它是指向你文章的连接。默认，它是 /year/month/day/title.html.如果你喜欢，你可以自定义。其中，你可以使用这些变量 :year,:month,:day,:title,:categories。:categories 来自front matter里，其他的来自提交的文件名字。现在，你可以设置permalink为这样 /:year/:month/:title:/ 或 /:categories/:title.html。友情提示：如果你在文件的front matter里设置了permalink属性，它将会覆盖网站默认的值。
exclude:就想我上边说的，jekyll不会生成以下划线开头的目录下的文件。但是如果你有其他想忽略的不以下划线开头的目录，你可以把它加载exclude上。
第六步：部署网站
可以说我们已经创建好网站了，我想让它能在网上被访问。该怎么做呢?
有几种方式可以达到目的。当然，如果这么个小网站不经常更新，你可以用FTP上传到服务器上。如果你使用的是共享主机，那么这可能是你唯一的选择。
如果你有VPS 或 专用主机，就可以很方便的运行。现在deployment documentation查看一系列的好方案。如果你不确定做什么，尝试一下使用git post-recieve hook的指导，我已经是试过了，它非常酷。
第七步：更进一步说
这仅仅是对jekyll的提示。
这有个结构化的插件，能够让你修改怎样生成你的内容。
你可以用Linquid和jekyll增加的Liquid 表达式来做好多事情。
还有好多template data 我们没有提到，查看它，看看你能做什么!
原文：http://hub.tutsplus.com/tutorials/building-static-sites-with-jekyll--net-22211
这是我按照他操作的源文件：demo
书写格式注意事项：
模板文件的元数据以YAML的格式展现，YAML头部经常会出现三个问题：这块引自Jekyll在Windows下面中文编码问题解决方案
- 三短线前面不能有空格
- “名: 值”对里冒号后面要有空格
- 回车后不要有Tab符
- 表示数组成员开始的
-号后面要有空格
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
