前言
自己一直想做一个个人专属的博客网站，所以之前使用 jekyll 并配合 github page 搭建了个人的博客网站，详情参考我的博客https://blog.csdn.net/qq_36272282/article/details/87987068。
但是，我对这个 jekyll 搭建起来的个人博客网站并不是很满意，一个是我对这个 jekyll 主题并不是很中意，自己找了很久都找不到中意的 jekyll 主题，第二个是这个主题的功能不是很丰富，没有一些自己想要的功能，所以我决定更换主题。恰好，我找到了一个非常热门并且功能丰富自己又中意的主题：Jekyll-Next-Theme，github 地址为 https://github.com/Simpleyyt/jekyll-theme-next。
本文只总结一些配置过程中容易出错的关键点，主要配置教程参考官方文档。
安装 NexT
首先确保已安装Ruby 2.1.0 或更高版本：
ruby --version
然后安装 Bundler：
gem install bundler
下载 NexT 主题到本地：
git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next
以下是与官方教程不一样的地方。
首先查看 Gemfile.lock 文件末尾，如下：
PLATFORMS
ruby
x64-mingw32
DEPENDENCIES
github-pages
BUNDLED WITH
1.17.1
BUNDLED WITH 指明了要求 bundler 版本为 1.17.1，所以我们应该先安装对应版本的 bundler：
gem install bundler -v '1.17.1'
然后安装依赖：
bundle install
然后，我们要先删除本项目的隐藏文件 .git 文件，然后再自己的 github 账户新建一个名为 jekyll-theme-next 的仓库（名字自取，如果配合 github page，就取名为 xxx.github.io），然后把本项目 push 到自己 github 下的新建的仓库，然后在 _config.yml 文件末尾添加以下代码：
# 仓库名
repository: watchcat2k/jekyll-theme-next
这就完成了安装，以命令运行即可在 http://127.0.0.1:4000 处访问：
bundle exec jekyll server
运行后，命令行出现了一些提示，如下图：
根据命令行输出提示，我们把下列代码添加到Gemfile
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
然后要注意的是，运行服务的命令不要添加 --incremental 参数，不然无法预览新的 post：
效果
最终运行结果图如下：
深度配置
该主题的配置详情参考官方文档，这里只对一些关键点进行说明。
编码问题
我在 window 本地环境下运行 jekyll 服务器进行网站的预览时，有出现博客无法找到、无法打开预览的情况，原因是这些博客的文件名、分类名或标签名使用了中文，jekyll 无法正常解析。要解决这个问题，就要找到 window 环境下的 ruby 安装路径，如下：
C:\Ruby25-x64\lib\ruby\2.5.0\webrick\httpservlet
找到该路径下的 filehandler.rb 文件，修改下面两处地方（有+的一行为添加部分）：
path = req.path_info.dup.force_encoding(Encoding.find("filesystem"))
+ path.force_encoding("UTF-8") # 加入编码
if trailing_pathsep?(req.path_info)
break if base == "/"
+ base.force_encoding("UTF-8") #加入编码
break unless File.directory?(File.expand_path(res.filename + base))
开启打赏功能
Jekyll-Next-Theme 主题的 _config.yml 配置文件默认是没有关于打赏功能的字段的，我们自己添加相应字段后便可开启打赏功能。所以在配置文件添加以下代码：
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image
修改页面宽度
我使用的主题是 scheme: Pisces，这个主题有个问题就是页面太窄了，在浏览器上看文章和代码比较吃力，所以推荐修改一下页面宽度。
首先找到 Pisces 的布局文件，它的路径为 xxx.github.io/_sass/_schemes/Pisces/_layout.scss ，然后修改一下三处地方（有注释的地方就是要修改的地方）：
.header {
position: relative;
margin: 0 auto;
//width: $main-desktop;
width: 80%;
@include tablet() {
width: auto;
}
@include mobile() {
width: auto;
}
}
.container .main-inner {
//width: $main-desktop;
width: 80%;
@include tablet() {
width: auto;
}
@include mobile() {
width: auto;
}
}
.content-wrap {
float: right;
box-sizing: border-box;
padding: $content-desktop-padding;
//width: $content-desktop;
width: calc(100% - 260px);
background: white;
min-height: 700px;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
@include tablet() {
width: 100%;
padding: 20px;
border-radius: initial;
}
@include mobile() {
width: 100%;
padding: 20px;
min-height: auto;
border-radius: initial;
}
}
至于其它两个主题的页面宽度修改方式，参考官方文档http://theme-next.simpleyyt.com/faqs.html#custom-content-width