首先，先了解一下Jekyll和Github Pages的概念。

Jekyll是什么？

引用自官网：
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。

简单来说，Jekyll就是将纯文本转化为静态博客网站，不需要数据库支持，也没有评论功能，想要评论功能的话可以借助第三方的评论服务。
Jekyll + Github Pages可以让你更加专注于博客内容，而不是如何搭建一个博客平台。

安装Jekyll

安装Jekyll之前，要先确保在你的电脑上已经配置好Jekyll运行所需要的环境，。

• Ruby
• RubyGems
• NodeJS或其他 JavaScript 运行环境（如果还没安装NodeJS的，可以参照我写的另一篇文章Mac下安装nvm和NodeJS）
• Python2.7(或2.7以上版本)

以上环境在任何系统下都是必须的，安装方法可以自行谷歌。我本人是在Mac系统下搭建的， Mac已经自带Ruby、RubyGems和Python。如果是在Windows下搭建有任何问题，可以参考一下官方Windows环境文档

安装好以上环境后，使用RubyGems安装Jekyll。执行命令：

gem install jekyll

跟npm一样，所有的 Jekyll 的 gem 依赖包都会被自动安装。
如果需要安装指定版本，在上述命令后加上一个-v参数

gem install jekyll -v '指定版本号'

快速启动

安装了 Jekyll 的 Gem 包之后，就可以在命令行中使用 Jekyll 命令了。官网提供了一个快速启动的例子：

# 安装bundler，bundler通过gemfile文件来管理gem包
gem install  bundler

# 创建一个新的Jekyll项目，并命名为myblog
jekyll new myblog

# 进入myblog目录
cd myblog

# 在Jekyll自带的服务器上预览你的项目，默认的运行地址为http://localhost:4000
# bundle exec 表示在当前项目依赖的上下文环境中执行命令 jekyll serve
bundle exec jekyll serve

基本用法

$ jekyll build
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中。

$ jekyll build --destination <destination>
# => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夹<source>中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --watch
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中，
#    查看改变，并且自动再生成。

Jekyll 自带了一个开发用的服务器，可以让你使用浏览器在本地进行预览。

jekyll serve
# 开发服务器将会运行在 http://localhost:4000/

serve 指令将会自动监测变化，生成新的文件。想关闭这功能，你可以使用 jekyll serve --no-watch，这里还有其他几个参数：
jekyll serve --livereload相当于前端开发中自动刷新浏览器。
jekyll serve --incremental相当于模块热替换，只刷新更改的模块。
jekyll serve --detach 和jekyll serve命令相同，但是会脱离终端在后台运行，如果你想关闭服务器，可以使用kill -9 1234命令，"1234" 是进程号（PID）。如果你找不到进程号，那么就用ps aux | grep jekyll命令来查看，然后关闭服务器。

目录结构

这里费了我好长的时间，因为网上大部分的教程都是基于下面这个官方的目录结构，而我新建的目录结构跟这些教程不一致。。。

.
├──_config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html

这是官方列出的目录结构，但是我在实际的Jekyll项目中，发现新版的jekyll跟上面的目录结构有很大的差别，大致如下：

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2018-03-31-welcome-to-jekyll.markdown
├── about.md
├── index.html
└── posts.html

可以看到和上面官方给出的目录结构有很大的不同。先看下每个目录的作用是什么：

虽然新版本的Jekyll生成的项目跟这里列出的目录名有很多不一样的，是因为有些目录已经被移到别处去了，但作用还是相同的。

新版中没有_drafts，_includes，_layouts，_data，jekyll-metadata等目录和文件，多了Gemfile，Gemfile.lock，文件和assets目录。

_drafts个人感觉没有太大作用，可能官方也是觉得作用不大，所以去掉了。

_includes模块文件和_layouts布局文件是保存一些页面的的目录，可以方便后面写文章引入这些模板，这两个目录其实就相当于一个博客主题。新版中没有这两个目录是因为，新版的Jekyll中的Gemlfile可以指定主题了，并且新的项目都会有一个默认主题minima，主题包中就包含了_includes，_layouts这两个目录。但是主题没有安装在Jekyll项目下，想要知道主题包在哪个位置，可以使用:

bundle show minima(默认主题名)
# 我电脑上输出的是在 /Users/xxx/.rvm/gems/ruby-2.4.1/gems/minima-2.4.1, xxx是你的用户名

Gemfile和Gemfile.lock文件，这两个文件是用来管理整个项目的依赖的。主题就是在Gemfile中指定的，你可以在如下gem属性中找到：

{
  ...
  # This is the default theme for new Jekyll sites. You may change this to anything you like.
  gem "minima"
  ...
}

配置

Jekyll 有这非常灵活和强大的配置功能，既可以在网站根目录下的 _config.yml 文件中进行配置，也可以作为命令行参数来配置。默认配置大致如下：

 title: Your awesome title
 email: your-email@example.com description: >- # this means to ignore newlines until "baseurl:"
  
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: jekyllrb
 github_username:  jekyll

 # Build settings
 markdown: kramdown
 theme: minima
 plugins:
   - jekyll-feed  

yml文件使用了YAML语法，如果想更好的理解Jekyll就需要了解一下YAML语法的内容，这里引用一下阮一峰老师写的一篇YAML语法教程

一般来说_config.yml的默认内容不需要太大改动，只需要往里面添加你需要的自定义属性，然后你就可以在页面模板中使用site.属性名来取得对应的值，例如site.title的值就是Your awesome title。
一般主题中也会自动帮你写好这些自定义属性，搭建你自己的博客时你只需要将这些自定义属性改为你想要的值即可。

Jekyll官方中文文档：点击跳转

接下来说一下Github Pages。

什么是Github Pages

GitHub Pages 是一个静态网站托管服务，直接从github仓库托管你个人、公司或者项目页面 ，并且不需要你写任何后端语言来支持。

Github Pages的服务是免费的，但是也有一些限制：

• 仓库空间不大于1G
• 每个月的流量不超过100G
• 每小时更新不超过 10 次

但是这些限制对我们普通人来说肯定没影响的，所以可以忽略。
这里只是将Github Pages当做一个平台，其他详细信息可以在Github Pages 文档查看

Jekyll + Github Pages搭建静态博客

好吧，终于说到正题了，其实这里搭建的过程很简单，只要你找好一个博客模板然后fork到自己的github上。但是我之前花费了好长的时间才搞得定，因为我是想自己新建一个Jekyll项目，而不是fork别人的，但是由于Jekyll最新版本新建的项目把主题功能分开了，缺少了_includes和_layouts目录，不兼容现在的Github Pages的模式，所以搞了我好久，后来就直接去github上找博客模板了。

我用的是黄玄大神的博客模板，github仓库在这里，进入仓库，点击Fork

Fork项目

然后回到你自己的仓库，进入刚刚fork的博客项目，点击setting，将仓库名字改为： <username>.github.io，<username>就是你的github用户名，然后点击 Rename

该项目名字

然后等几分钟，在浏览器打开https://xxx.github.io，你就可以看到博客页面，但是此时页面的内容都不是你自己的，这是你首先需要修改一下_config.yml内容。具体的教程还是直接看黄玄大神的教程吧，有个中文版教程，我也就懒得班门弄斧了。

写博客

有了博客网站，就到了最后“最难”的一部分了——写博客。

推荐先将博客项目从github上clone到本地，然后进到博客目录在命令行执行jekyll serve开启本地预览，这样就可以边写边看效果，一般本地没有报错等问题，写好后上传到github后也是没问题的，如果出现构建Github Pages错误的问题，GitHub 会向你的账户发送邮件。

_posts目录就是专门存放博客文件的，你可以使用markdown、Textile（这个没听过）或者html格式的文件来写博客，我个人是用markdown格式写的。但是不管是哪种格式的文件都需要包含 YAML 头信息， Jekyll 才会把它当做一个特殊的文件来处理。

在_posts目录下新建一个markdown文件，头信息必须在文件的开始部分，并且需要按照 YAML 的格式写在两行三虚线之间。如下所示：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2018-03-31 02:36:26 +0800
tags:
      - example
---

...
这里就可以使用markdown格式或其他格式写博客内容啦

除了这些预定义的变量，也可以自定义变量，然后在布局文件中{{ page.自定义变量 }}来引用

我第一次写博客头信息的时候遇到两个坑：

• 设置date的时候，如果加上了具体时间（小时：分钟：秒），必须在后面写上+0800（时区偏移），否则将不会生成该文章页面。
• YAML语法是不允许用tab来缩进，只能用空格。

写好文章后，上传github后需要等一两分钟，Github Pages就会更新你的博客啦。

好吧，博客搭建的教程大致就到这了，第一次写这么长的文章，还是教程，感觉写的好烂，如果这个教程能有幸被有缘人看到，哪里有错误或者看不懂的就留言给我吧。