jekyll及github建立简单网站(博客)

2014-08-18 (2014-08-18更新)

jekyll是什么

jekyll是一个免费的文档转换引擎，它可以把markdown，Textile等格式的文档根据模板及配置转换成静态网站。大名鼎鼎的开源网站github将jekyll作为每个开源项目的wiki引擎。每个人都可以以建立开源项目的名义通过github建立静态网站（github pages技术）。用户不需要编辑复杂的网页，只需要编写简单的markdown、textile文档即可。

jekyll怎么建立静态网站

新人建议到 https://github.com/jekyll/jekyll/wiki/Sites 下载别人的模板，直接上传到github上即可测试。具体步骤如下:

编写简单jekyll网站源代码

以下最简单的jekyll结构，每个文件用户都可以自己用记事本或其他文本编辑器建立。

jekyll_demo
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello-world.html
　　　　|-- index.html

_config.yml 为yaml格式配置文件，设置一些jekyll参数，例如markdown引擎，代码颜色等等。如果_config.yml文件是空文件，则jekyll会使用默认配置。

_layouts 为模板文件夹，模板将提供markdown，html等源文件转换为目标html的方法。Jekyll使用Liquid模板语言，{{ page.title }} 表示文章标题，{{ content }}表示文章内容，page.title等为jekyll内置变量，具体详见本站“jekyll变量和liquid语法”。

简单的网站可以仅放一个default.html作为默认模板。文件内容可以如下：

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta http-equiv="content-type" content="text/html; charset=utf-8" />
　　　　<title> {{ page.title }}</title>
　　</head>
　　<body>

　　　　{{ content }}

　　</body>
　　</html>

_posts 文件夹存放网站文章。文件名必须为”年-月-日-文章标题.后缀名”的格式。如果网页代码采用html格式，后缀名为html；如果采用markdown格式，后缀名为md。）

在该文件中，可以填入以下内容：（注意，行首不能有空格）

　　---
　　layout: default
　　title: 你好，世界
　　---
　　<h2>{{ page.title }}</h2>
　　<p>我的第一篇文章</p>
　　<p>{{ page.date | date_to_string }}</p>

每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线”—“，标记开始和结束，里面每一行设置一种元数据。”layout:default”，表示该文章的模板使用_layouts目录下的default.html文件；”title: 你好，世界”，表示该文章的标题是”你好，世界”，如果不设置这个值，默认使用嵌入文件名的标题，即”hello world”。

index.html 为默认网站首页，可以填入以下内容。

https://github.com/ruanyf/jekyll_demo/blob/gh-pages/index.html

它的Yaml文件头表示，首页使用default模板，标题为”我的Blog”。然后，首页使用了{\% for post in site.posts %}，表示对所有帖子进行一个遍历。这里要注意的是，Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。

github上建立jekyll网站

有多种方法，本文建议采用如下方法(更多方法及说明可见本站“jekyll在github上部署”一文)。：

  1. 在github上注册，假设用户名为username
  2. 建立一个开源项目，名为username.github.io (username为用户名)
  3. 将jekyll_demo目录下文件全部上传到username.github.io项目的master分支
  4. 浏览器访问username.github.io即可

上传jekyll_demo到username.github.io的方法

首先安装github for win，本文介绍命令行方式

  1. clone username.github.io到本地目录
  2. 进入git shell
    • cd xxx/username.github.io //进入clone的本地目录
    • 把jekyll_demo下文件全部copy到username.github.io文件夹下
    • git add -A
    • git commit -m “my blog”
    • git push -f

相关文档链接

Fork me on GitHub