搭建博客相关技术总结

Apr 15,2017   3113 words   12 min

Tags: Web

虽然博客搭建已经有一段时日了,但是对于在搭建博客时遇到的很多新的名词、概念和技术等等, 还是觉得有必要记录一下,好记性不如烂笔头。

Jekyll

Jekyll是目前非常流行的静态网站生成器(static website generator)。静态网站即只包含HTML, CSS 和 Javascript。 Jekyll不依赖于数据库或CMS(Content Management System,内容管理系统),所以最适合用来建立个人博客、个人portfolio等等。 简单来说,Jekyll是一个按照指定规则生成网页的生成器,正是基于此我们才能很轻易的搭建个人博客。 官网对其定义是:

Jekyll是一个简单的博客形态的静态站点生产机器。

它有一个模版目录,其中包含原始文本格式的文档, 通过Markdown(或者Textile)以及Liquid转化成一个完整的可发布的静态网站。 目前GitHub Page上运行的便是Jekyll引擎。你可以使用GitHub的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。 更多有关的信息可以从Jekyll中文网站获得。

Markdown

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法, 它可以使普通文本内容在解释器中以有一定格式显示。 markdown Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。 世界上最流行的博客平台WordPress和大型CMS如Joomla、Drupal都能很好的支持Markdown。 其好处就是通过特殊的标记便可以以纯文本的形式实现简单的文字排版,如标题、引用、图片、代码等等。 因此可以说Markdown是我们用来撰写博客内容的语法规范。 只要按照这个语法格式编写,解释器便能带格式正确地解析出文本内容。 需要注意的是Markdown支持在文本中嵌入html标签,从而实现相关功能。 如以html中的表格标签编写表格,markdown解释器是可以正确显示的。 更多信息可参考Markdown中文网

模板引擎与模板语言

模版是一个纯文本文件,由它可以产生任何基于该文本的格式(HTML,XML,CSV等等)。 在生成其它文件格式时,模版中的变量和控制模版逻辑的标签会被值替换掉。 模板引擎是Web应用中用来生成动态HTML的工具, 它负责将数据模型与HTML模板结合(模板渲染),生成最终的HTML。 编写模板文件的语法称为模板语法,模板语法的表达能力和可扩展性决定了模板引擎的易用性。 Jekyll就是众多模板引擎中的一个。按照一定的约定与规则,将纯文本文件等生成一系列html网页。
举个简单的例子类比。在C++的printf("Name: %s", str)中,printf()函数便是模板引擎, 它负责将格式化字符串与上下文数据结合生成最终的字符串。 其中”Name: %s”是模板,%s是一种模板语法。而str则为上下文数据。
而模板语言就是模板引擎所使用的一系列语法及规范,例如Jekyll模板引擎使用的就是Liquid语言。 更多与模板引擎相关的介绍可以看这里

Liquid

Liquid是一门开源的模板语言,由Shopify创造并用Ruby实现。 如上文所说,Jekyll正是使用Liquid语言生成静态网页,提供控制流、变量定义、迭代功能、继承和引入。 不支持通用的表达式求值,但可以自定义过滤器和标签。
Liquid代码由对象标签过滤器组成。 对象(object)告诉Liquid在页面的哪个位置展示内容。对象和变量名由双花括号标识。 标记(tag)创造了模板的逻辑和控制流。他们由单括号加百分号标识。 它并不产生任何可见的文本输出。 这意味着你可以用他们为变量赋值、创建条件和循环逻辑,并且不在页面上显示出任何Liquid逻辑代码。 过滤器(filter)改变Liquid对象的输出。他们被用在输出上,通过一个|符号分隔。 有关Liquid语言更多的语法知识可以看这里

Ruby

Ruby是一种开源的面向对象程序设计的服务器端脚本语言, 在20世纪90年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。 ruby Ruby的特性与Smalltalk、Perl和Python类似。 Perl、Python和Smalltalk是脚本语言。 Smalltalk是一个真正的面向对象语言。 Ruby与Smalltalk一样,是一个完美的面向对象语言。 使用Ruby的语法比使用Smalltalk的语法要容易得多。 Ruby教程可以点击这里

YAML

YAML是“另一种标记语言”的外语缩写(YAML Ain’t Markup Language)。 它是一种直观的能够被电脑识别的数据序列化格式,是一个可读性高并且容易被人类阅读, 容易和脚本语言交互,用来表达资料序列的编程语言。 YAML是专门用来写配置文件的语言,非常简洁和强大。 YAML官网的描述是

YAML is a human friendly data serialization standard for all programming languages.

在Jekyll中,YAML被用来编写文件头。 正是头信息让Jekyll变的很酷。 Jekyll会遍历你的网站搜寻要处理的文件。 任何只要包含YAML头信息的文件在Jekyll中都能被当做一个特殊的文件来处理。 对于每一个这样的文件,Jekyll都会通过Liquid模板工具来生成一系列的数据。 头信息必须在文件的开始部分,并且需要按照YAML的格式写在两行三虚线之间。 在---中间的内容叫做YAML Front Matter,Liquid可以将这里的数据传送到模板中相应的位置。 同时头信息变量是可选的。 如果你想使用Liquid标签和变量但是在头信息中又不需要任何定义,那么你可以将头信息设置为空! 在头信息为空的情况下,Jekyll仍然能够处理文件(这对于一些像CSS和RSS的文件非常有用)。 如果并不想使用Jekyll由模板生成的网页,那就不需要YAML文件头,直接push编写好的标准html文件至仓库即可。 这样用户访问到的便是你写的纯html文件,与Jekyll没有任何关系。

Bootstrap

Bootstrap来自Twitter,是目前最受欢迎的前端框架。 bootstrap Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。 官网对它的描述是“简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。”。 Jekyll也采用了Bootstrap的框架进行网页的构建。

总结

Jekyll是个基于Liquid的模板引擎。 它可以把你设计好的框架和诸如Markdown、textile写的纯文本文件一起编译成一个完整的静态html网站。 站点的全局变量在_config.yml中定义,用site.访问, 页面的变量在YAML Front Matter中定义,用page.访问。
Jekyll生成静态页面的过程是先搜集站点的原始数据, 通过计算,生成用于页面显示的结构化数据(最终的html文件)。 结构化数据来源有两方面:一方面是文件中的配置文件, 如_config.yml和markdown的YAML Front Matter。 另一方面通过目录结构和Jekyll定义的解析法则,产生数据。 有了这些结构化的数据后,Jekyll再按照用户定义的模板, 用相应的结构化数据替换模板中的变量。 这样一个可以被用户浏览的网页便生成成功保存在仓库中了。 用户输入网址即可看到你新鲜出炉的内容,比如这篇博客。

本文作者原创,未经许可不得转载,谢谢配合

返回顶部