王士江的博客,学习认真活着。

我的视界,我的世界

My Word, My World

使用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”的文件,就是你正在读的这篇博客了。

创建文章的文件

如果你要创建一篇新博客,需要按照以下规则给博客文件起名字:

YEAR-MONTH-DAY-title.MARKUP

在这里,是4位数字,都是2位数字。MARKUP扩展名代表了这篇文章是用什么格式写的。下面是一些合法的文件名的例子:

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.textile

内容格式

所有博客文章顶部必须有一段YAML头信息(YAML front- matter)。 在它下面,就可以选择你喜欢的格式来写文章。Jekyll支持2种流行的标记语言格式: MarkdownTextile

正是头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。 头信息必须在文件的开始部分,并且需要按照 YAML 的格式写在两行三虚线之间。下面是一个基本的例子:

---
layout: post
title: Blogging Like a Hacker
---

接下来,你就可以通过使用Markdown来写文章内容了(想看例子的话,可以看看本博客是怎么写的)。

例如,在文章里引用其他资源文件,比如下面这张图片(名称为“jekyll-blog.png”,让我放到了网站源代码“images”目录下):

使用Jekyll和Bootstrap,创建一个静态网站

我就可以通过以下形式引用到博客里面:

![使用Jekyll和Bootstrap,创建一个静态网站](/images/jekyll-blog.png)