crystalNB的专栏

国产偶像--王垠

使用kekyll构建静态网站

一个成熟的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 %}
那么我们该怎样使用模板?我们需要创建一个页面来使用模板。在项目的根目录下,创建一个index,html文件。这是内容:
---
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.


_posts/2013-08-07-wing.md

---
layout: portfolio_entry
title: Wing and a Prayer
image: /img/wing.jpg
---
The wing of the AirBus I rode to England.
非常简单,是吗?注意我怎么创建一个自定义的 YAML front matter域:image.这是他所在条目的图片的url.当然我们可以编译所有的html条目,但是如果我们想改变呢?这时就不得不挨着一个一个条目来改。不过通过这样,我可以使用一个 portfolio_entry 模板来渲染它们。那这个模板是什么样的呢?太简单了:

_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下面中文编码问题解决方案

  1. 三短线前面不能有空格
  2. “名: 值”对里冒号后面要有空格
  3. 回车后不要有Tab符
  4. 表示数组成员开始的-号后面要有空格


阅读更多
文章标签: jekyll
个人分类: Tools web
想对作者说点什么? 我来说一句

静态html+css+js做的网站

2010年05月09日 614KB 下载

舟山金海湾船业有限公司html

2011年06月21日 1.57MB 下载

没有更多推荐了,返回首页

不良信息举报

使用kekyll构建静态网站

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭