这篇文章主要介绍了我在搭建这个博客中使用的框架和搭建过程，以及其中踩到的一些坑。我的电脑环境是Win10。
这篇文章分为以下几个部分。
- 为什么选择了Jekyll + GitHub page的组合
- 基于windows的环境安装
- 建立自己的第一个博客
- 使用Jekyll模板快速建立博客
- 将博客放在Github Pages上
为什么是Jekyll + GitHub page的组合
选择Jekyll的理由
引用自官网：
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。
选择GitHub page的理由
GitHub Pages是一个免费的静态网站托管平台，由Github提供，它具有以下特点：
- GitHub Pages 有 300M 免费空间，资料自己管理，保存可靠；
- 熟悉版本控制，团队协作流程；
- 可以自定义域名，Github 学生认证享受诸多优惠。
基于windows的环境安装
Jekyll的安装
由于Jekyll是基于Ruby开发的，所以，要想在本地构建一个Jekyll的测试环境，需要具有Ruby的开发和运行环境。下载与本地环境相符的Ruby和RubyDevKit。
安装Jekyll需要以下环境
- Ruby
- Ruby dev
- Jekyll
- Bundler
安装过程如下：
- 首先需要从RubyInstaller下载Ruby+Devkit的组合包，使用默认的选项进行安装即可。
- Win键 + R键打开CMD命令行，通过以下命令下载jekyll和Bundler，安装过程中如果卡了很久按下回车即可，下载大概需要10分钟。
gem install jekyll bundler - 在CMD命令行窗口中检测jekyll是否安装成功
jekyll -v
编码问题
如果你使用 UTF-8 编码，请确保你的问题见中不存在 BOM 字符，否则 Jekyll 将会出现意想不到的情况。特别是你要在 Windows 上使用 Jekyll，这个问题就需要特别注意。
因此需要将代码控制台页面的编码修改为 UTF-8，否则将会出现一个异常：“Liquid Exception: Incompatible character encoding” 。可以通过在CMD控制台中输入以下的命令解决：chcp 65001
建立自己的第一个博客
首先看看你想把你的博客建在哪里，以D盘举例，建立一个名字为testblog的博客。新建博客需要等待一定时间。命令行中输入：
cd d:
jekyll new testblog // testblog 为你的博客文件名,
控制台返回（创建的地址有所不同）New jekyll site installed in D : /testblog。
开启jekyll内置服务器
cd testblog//一定要进入创建的对应blog目录，否则服务无法开启
jekyll serve //开启服务器，可以按ctrl+c停止
控制台返回如下：
根据返回的本地端口，在浏览器中打开，得到如下界面。
使用 Jekyll 模版搭建博客
网络上提供了大量适用于 GitHub Pages 的 Jekyll 模版，下载一个并解压将文件放到你的代码库（repository）根目录下。这些模板极大的方便了前端知识匮乏的我们建立一个精美的网页。在这里下载：
- Jekyll Themes
我使用的是Voyager主题，感谢redVi开源的主题，精致又方便。
下载并解压后，进入解压后的文件夹，可以看到主要包含几个文件，其作用分别是：（资料来源：Jekyll 官网文档）
| 文件 / 目录 | 描述 |
|---|---|
_config.yml |
保存配置数据。很多配置选项都会直接从命令行中进行设置，但是如果你把那些配置写在这儿，你就不用非要去记住那些命令了。 |
_drafts |
drafts 是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。学习如何使用 drafts. |
_includes |
你可以加载这些包含部分到你的布局或者文章中以方便重用。 |
_layouts |
layouts 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。 这将在下一个部分进行介绍。标签 {{ content }}可以将content插入页面中。 |
_posts |
这里放的就是你的文章了。文件格式很重要，必须要符合:YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制，但是数据和标记语言都是根据文件名来确定的。 |
_site |
一旦 Jekyll 完成转换，就会将生成的页面放在这里（默认）。最好将这个目录放进你的 .gitignore 文件中。 |
index.htmland other HTML, Markdown, Textile files |
如果这些文件中包含 YAML 头信息 部分，Jekyll 就会自动将它们进行转换。当然，其他的如 .html， .markdown， .md，或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。 |
| Other Files/Folders | 其他一些未被提及的目录和文件如 css 还有 images 文件夹，favicon.ico 等文件都将被完全拷贝到生成的 site 中。 这里有一些使用 Jekyll 的站点，如果你感兴趣就来看看吧。 |
不过随着Jekyll的更新，新版的主题中没有_drafts，_data，jekyll-metadata等目录和文件，多了assets等目录。下载完成后打开文件夹，_posts/ 目录下的文章都删除，此为模板作者的实例文章。将 _config.yml文件里面的内容修改为自己的信息。
你可能喜欢markdown来写文章，那么我们在文章头部添加yaml头信息并且文件的命名要服从下面的规则：year-month-title.markdown //markup为你的文件格式的后缀名
---
bg: "tools.jpg"
layout: post
title: "我是如何搭建这个博客的"
crawlertitle: "我是如何搭建这个博客的"
summary: "搭建博客总结"
date: 2019-03-06 20:09:47 +0700
categories: posts
tags: ['个人杂谈']
author: Zhanghx
---
写上自己的博文内容，按命名规则将这个文件_posts/目录里面即可。启动jekyll内置服务器， jekyll serve，生成页面。
将博客放在Github Pages上
首先需要有一个Github账户，没有的注册一个，不多说。新建一个 new repository 新的个人仓库，仓库的名字为你的github的名字+github+io，即yourname.github.io。
接着是将这个新的仓库拉取到本地，在windows环境下我使用Github desktop作为Git客户端，拉取完成后文件夹下会多出一个yourname的文件，我们把用下载好的主题下的所有文件复制到里面。然后把里面的所有文件push到刚刚建的远程仓库。
这时，在浏览器里面输入网址：http://yourname.github.io 就可以看你的个人博客网站了，这就是你的博客网站的地址了。前面所说的yourname指的是你的github账号名字。
最后在本地把写好的文章Push到Github上就可以完成网页的更新了。至此一个个人博客算是搭建完成。这是我的个人网站 http://zhanghx.me
以上安装过程参考：
- jekyll的windows安装官方指南
- Redchar的博客
- 爱博客大伯