通过Github Pages和Jekyll搭建个人博客

---

目录###

1. 什么是Jekyll ？
2. 使用静态网站生成器的好处
3. 环境搭建
4. 主题

---

1. 什么是Jekyll ?

Jekyll

• Jekyll 是目前非常流行的静态网站生成器(static website generator)。静态网站即只包含HTML, CSS 和 Javascript

Jekyll(raw_text_files, templates)
{
    return Beautiful_web_pages;
} 

• 不同于WordPress, Ruby on Rails, CakePHP, Flask等这些需要web server的复杂应用程序。Jekyll不依赖于数据库或CMS。所以最适合用来建立个人博客，个人portfolio等等
• Github Pages即靠Jekyll实现的

2. 使用静态网站生成器的好处

• 轻量级网站，响应速度快
• 网站更安全，无数据库，无动态数据
• 无需通入过多精力维护

3. 环境搭建

本文只说明在Mac上的实现过程

第一步 安装 Jekyll

• 首先打开terminal，输入

jason: ~ $ gem install jekyll

• 如果提示错误，一般是读写权限问题，可尝试sudo，然后根据提示输入密码

jason: ~ $ sudo gem install jekyll

• 输入jekyll -v，确认安装成功。若成功会提示版本信息，例如

jekyll 2.5.3

第二步 创建 Jekyll 项目

• 首先cd到你想创建项目的目录下，比如我想在桌面创建

jason: ~ $ cd Desktop

• 例如我想创建一个项目，叫Jason_Blog

jason: ~/Desktop $ jekyll new Jason_Blog

• 成功会收到提示信息

New jekyll site installed in /Users/boyuan/Desktop/Jason_Blog.

• Jason_Blog文件夹内容如下

  
  
  

  Jason_Blog

• _config.yml 是配置文件，最为重要，包含了所有配置信息

• _includes 文件夹包含了将被反复利用的文件，比如footer，header

• _layouts 文件夹包含了主页面的排版布局

• _posts 文件夹将包含所有的日志文件，Markdown格式

• Jekyll为我们提供了一篇默认博客，我们可以通过运行下面的命令，然后再本地查看

boyuan: ~/Desktop $ cd Jason_Blog_2/
boyuan: ~/Desktop/Jason_Blog $ jekyll serve

注意：此时Jason_Blog文件夹中会增加_site文件夹，包含了生成网站的所有结构。同时，原来文件夹中开头没有下划线的文件夹会被复制到_site文件夹中，比如CSS文件夹

• 停止本地运行，敲击CTR+C

第三步 更改配置文件_config.yml

详细内容参考官网 - Jekyll configuration
想了解更多YAML文件 - YAML

• 打开_config.yml文件，可以看到一些基础设置

• 更改URL显示
  原始URL: http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll.html

# Build settings
markdown: kramdown
permalink: pretty

URL变更为：http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll/

# Build settings
markdown: kramdown
permalink: /:title

URL变更为：http://127.0.0.1:4000/welcome-to-jekyll/

第四步 深入了解Jekyll模板

Jekyll实际使用的是模板语言Liquid来操作模板和输出文件的。Liquid现在是Github上的开源项目，有兴趣可以多了解一下，很简单

• 在每一个_post文件夹的post文件中，在---中间的内容叫做YAML Front Matter，Liquid可以将这里的数据传送到模板中相应的位置。

---
layout: post                       // 表示选择post模板
title:  "Welcome to Jekyll!"       // 博客的标题
date:   2015-06-23 01:54:33        // 博客日期
author: Jason                      // 作者
categories: jekyll update          // 添加类别，空格分开
permalink: "Welcome to Jekyll"     // 确定显示的URL
---

注：反复使用的变量，比如layout, author等可以移到_config.yml中

• 从下面这张图我们可以看到，Jekyll中模板相关的文件在红框中，我们具体以default.html简述一下

default.html

• 首先是Liquid的两种格式

// 格式一   output markup
{% include head.html %}
// 格式二   tag markup
{{ content }}

• 第一个的意思就是把head.html文件添加到相应位置，同理header.html和footer.html。

• 第二个的意思就是具体某个post的内容会添加到相应位置，当然在相应的post中我们要指定layout是什么，比如下面就是指定layout为default。这个post的内容会添加到{{ content }}的位置。
  其实上述内容与ASP.NET 中的Razor布局很像 - ASP.NET Razor 简介

• 下面这张图我们可以看到我们指定了这个post使用default，同时注意到{{ page.title }}，title数据就来自于上面第一点说的YAML Front Matter
  

  

  post.html

• 说完了post，我们再说说怎么增加新页面，比如About, Contact......
  新页面直接添加在项目根目录下，前面没有下划线，比如新建contact.md

// 下面是about.md 中的 YAML Front Matter
---
layout: page                       // 表示选择post模板
title: About                       // 标题为About
permalink: /about/                 //about后面添加一个 "/" 可是_site中生成同名文件夹
---

• 在项目根目录下可以创建文件夹_drafts，然后再其中添加草稿，预览可输入

boyuan: ~/Desktop/Jason_Blog $ jekyll serve --drafts

4. 主题

有了上面的了解，网络上有一大波主题在等着你，直接下个主题，轻松简单。

最后，发布到Github吧， Free Free Free
请戳 => 如何使用Github Pages免费搭建网站