使用kekyll构建静态网站
2013-08-06 19:19
337 查看
一个成熟的cms是非常需要的。有时,你仅仅需要创建一个轻量的静态网站,而大量的静态页以致要处理复制模板的任务,使得跨站标记变的事很繁重。今天,我会演示一个简单的解决方案-jekyll-它是使得建一个小站点变的很轻松。
第一步:了解 jekyll
jekyll 是一个简单的、对博客友好的、静态的站点生成器。官网是这么说的。但是这真正意味着什么呢?一个静态的站点生成器是一个程序,它需要一些文件集合来生成你的站点。正如你看到的,我们可以使用大量的模板来创建不同的内容,然后用kekyll生成我们的网站。“对博客友好”意味着我们可以用他来创建博客,或者任何包含具有一系列相似的文章的分类的网站(比如个人作品集网站)(就是说网站里同一分类下的文章结构相似)。让我们赶快试一试!
第二步安装 kekyll
关于更多的Ruby Gems信息请参考这里
我们将要开始安装jekyell;他是一个 Ruby gem,所以你应该直接这样做:
第三步:创建我们第一个模板
接下来,让我们为kekyll创建一些文件夹。给这次教程创建一个文件夹,名字叫“example-app”;我们将要创建个人网站,一个展示图片的网站。这是一个展现jekyll的好例子,这个小网站虽然更新不频繁,但是当你做一个标记改动时不需要去打开每个页面,做这样的事情,它完全足够你用。
在"example-app"里,创建一个名叫_layouts的文件夹。注意文件夹名开头的下划线:任何以下划线开头的文件或这文件夹都不是kekyll生成网站的一部分。如果有kekyll能认出的文件(例如:_config.yml或_layouts),它们的将用于网站的生成,但是文件本身不会出现在生成的网站中。记住:每一个不以下划线开头的文件或文件夹将会复制到生成的站点下(默认是_site下的子目录)。
因此,让我们创建一个布局文件,我们将以一个普通的站点布局文件开始,它包含了我们网站的所有结构。在_layout文件夹下创建一个新文件,命名为default.html(名字不重要),他的内容如下:
这有些规则需要你记住:
首先,jekull使用的是Liquid template system(默认)。这意味着,你可以使用Liquid做任何事情。例如,在<title>标签里,我们可以使用2个Liquid表记语言的类型符:输出标记和标签标记。输出标记可能输出文本(如果变量引用存在),然而标签标记不是这样的。输出标记是被双大括号界定的,而标签标记是被一个大括号和百分号来界定的。
接下来的要注意的是Liquid标签内的内容:例如page.title 和 content。这些变量由jekyll提供;你可以查看文档里关于
available template data的列表。我们也能够创建自定义的模板数据,正如我们刚才浏览的。
最后,注意链接的css:在你项目的根目录创建一个css文件夹,将下边的代码丢进去:
同样创建一个img文件夹,添加一张图片,命名为banner.jpg;我们会马上使用它。所有图片都将这么做,把他们裁剪为960*300;
你或许想知道为什么在上面使用if表达式,如果它不存在,page.title变量是否会显示?如果它存在,我想在它后面包含一个竖线;另一种写法可以是:
这就是index.html的内容,注意文件顶部的内容:jekyll称它为YAML页眉(front matter),任何不以下划线开始的文件都有一个YAML页眉,文件将会被jekyll生成后放进_site文件下,如果一个文件没有名字下划线也没有YAML front matter,它经被直接复制到_site下。在这种情况下,YAML front matter仅仅告诉 jekyll 我们要使用的模板。
现在打开一个终端,cd进入你的项目目录,并且运行jekyll,你应该看到这样的提示:
忽略警告,我们一会再回来。现在你能够看到站点已经建在新建的目录_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
_posts/2013-08-07-wing.md
_layouts/portfolio_entry.html
如果你看了 template data page的话,你就知道自定义的front matter在page下是一个使用的。因此,在这我们能够访问page.image.也可以使用page.title和content(在最后三个“-”之后的任何地方)。
我应该在这提醒,当post对象里有title时,我们只能它所在的post对象上获取。不论怎样工作!
也注意我们这模板也要使用default布局模版。你可以想这样嵌套模版是你的工作更容易。
这样就得的了所有的文章页面,但是我们作品的主页面呢?当在defaul布局中小写导航时,我想让它放在/protfolio/下。因此,创建一个名叫“protfolio“的文件夹在根目录下,并在该目录下打开一个叫 index.html的文件。
这已经是我们最复杂的片段了。记住这不是一个模板,它是一个正常的文件,但是它还能包含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符
表示数组成员开始的
第一步:了解 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下面中文编码问题解决方案
三短线前面不能有空格
“名: 值”对里冒号后面要有空格
回车后不要有Tab符
表示数组成员开始的
-号后面要有空格
相关文章推荐
- 使用 Responsive Elements 快速构建响应式网站
- 构建高性能网站的14条法则:使用CDN
- 使用GitHub构建个人博客网站
- 使用云服务器搭建tomcat+mysql,构建网站
- 快速构建网站之动态网站和静态网站介绍
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- 使用GAE建立免费静态网站
- 使用Apache部署静态网站
- IO流使用模板生成静态网站
- github pages + jekyll 构建静态网站
- 使用静态工厂方法代替构造器和构建器使用
- JAVA学习.JAVA对象构建内存理解&静态方法和变量的理解和使用.
- 技术干货:使用静态缓存提升网站性能的五种方法!
- 使用Sharepoint Services 3.0构建基本网站
- 在Mac OS X上构建wget来抓取静态网站内容
- 构建垂直搜索引擎 本课程带领大家实现一个简单的垂直搜索引擎网站,使用nodejs、python、elasticsearch实现的。
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- html 构建响应式网站之viewport的使用
- 使用 gulp-file-include 构建前端静态页面