使用Jekyll和Bootstrap,创建一个静态网站
这篇博客是为了介绍使用Jekyll和Bootstrap,创建一个类似当前网站一样的静态网站。
这个博客网站的源代码在哪里?
这个网站的源代码仓库放在了Github上,点击这里查看源代码。 在Github中,个人、组织、项目,都可以有自己的GitHub Pages,程序员们可以使用编程的方式,进行个人、组织、项目的介绍页制作。 这篇博客就放在了我的的Github Pages中。
什么是Jekyll?
Jekyll是一个用Ruby开发的静态站点生成器——将原始的纯文本格式的文档(比如这一篇博客, 是用Markdown写的), 加上使用Liquid标记写的模版(存储为HTML格式),从而转化成一个完整的静态网站。
这里的需要特别指出一点——Github Pages原生支持使用Jekyll。 当我往Github Pages所在的代码仓库发布新博客的时候(比如这一篇),Jekyll会读取设置、生成网页,最终生成一个由静态网页形成的网站; 如果在本地查看的话,你会发现Jekyll生成的静态网站被放在了一个名称为“_site”的文件夹下 —— 一个没有后端、没有数据库的静态网站。
关于Jekyll的更多详细信息,请到这个网站查看。
什么是Bootstrap?
Bootstrap是一个非常优秀的前端开发框架,由于它诸多设计良好的CSS样式(比如网格,组件等等)、Javascript插件, 能让你快速开发一个漂亮的页面。
点击这里,欣赏众多使用Bootstrap开发的网站。
到目前为止,我们可以看出来——我们是通过提供纯本文(比如Markdown格式的文本)和模版,让Jekyll生成静态的HTML页面,借助于Bootstrap良好设计的CSS样式, 我们就得到了一个漂亮的博客网站。
怎么样发布一篇新博客?
以当前这篇博客为例,如果你已经下载了这个博客网站的源代码,那么你可以在源代码的“_post”目录下, 找到一个名称为“2016-05-26-how-to-build-a-site-like-this-with-jekyll-and-bootstrap.markdown”的文件,就是你正在读的这篇博客了。
创建文章的文件
如果你要创建一篇新博客,需要按照以下规则给博客文件起名字:
在这里,年
是4位数字,月
和日
都是2位数字。MARKUP
扩展名代表了这篇文章是用什么格式写的。下面是一些合法的文件名的例子:
内容格式
所有博客文章顶部必须有一段YAML头信息(YAML front- matter)。 在它下面,就可以选择你喜欢的格式来写文章。Jekyll支持2种流行的标记语言格式: Markdown 和 Textile。
正是头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。 头信息必须在文件的开始部分,并且需要按照 YAML 的格式写在两行三虚线之间。下面是一个基本的例子:
接下来,你就可以通过使用Markdown来写文章内容了(想看例子的话,可以看看本博客是怎么写的)。
例如,在文章里引用其他资源文件,比如下面这张图片(名称为“jekyll-blog.png”,让我放到了网站源代码“images”目录下):
我就可以通过以下形式引用到博客里面: