这篇文章主要介绍了我在搭建这个博客中使用的框架和搭建过程，以及其中踩到的一些坑。我的电脑环境是Win10。
这篇文章分为以下几个部分。

1. 为什么选择了Jekyll + GitHub page的组合
2. 基于windows的环境安装
3. 建立自己的第一个博客
4. 使用Jekyll模板快速建立博客
5. 将博客放在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需要以下环境

1. Ruby
2. Ruby dev
3. Jekyll
4. 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停止

控制台返回如下：

image.png

根据返回的本地端口，在浏览器中打开，得到如下界面。

image.png

使用 Jekyll 模版搭建博客

网络上提供了大量适用于 GitHub Pages 的 Jekyll 模版，下载一个并解压将文件放到你的代码库（repository）根目录下。这些模板极大的方便了前端知识匮乏的我们建立一个精美的网页。在这里下载：

• Jekyll Themes

我使用的是Voyager主题，感谢redVi开源的主题，精致又方便。

下载并解压后，进入解压后的文件夹，可以看到主要包含几个文件，其作用分别是：（资料来源：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
<!--在文章头部添加的yaml头信息实例-->
---

写上自己的博文内容，按命名规则将这个文件_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

以上安装过程参考：

1. jekyll的windows安装官方指南
2. Redchar的博客
3. 爱博客大伯