前言

好吧，我太难了！想着花个几分钟搞定本地开发撰写博客，能实时预览，就不用每次都 push 上线才能查看！理想很美好，现实很骨感，我花了一下午。不过坑我都踩完了，我相信跟着我，你五分钟就可以搞定了！

首先声明我是 Windows 系统，其他系统的待我买新电脑（也不知道何年何月）再补充哈。

一、安装 Ruby

在 Windows 上运行 Jekyll 需要先安装 Ruby。在Ruby 官网中我们可以看到官网推荐的版本。

下载后进行安装，在安装过程中不能更改软件安装路径否则会导致后续的 Jekyll 安装失败。同时，将下图中的复选框勾选。

安装完成后，会自动弹出 cmd.exe如下图所示， 提示安装 MSYS2，它是用来编译 Ruby 本地包的，我们需要手动输入[1,2,3]，然后回车进行安装。由于强强的原因，会导致安装极慢，甚至安装失败，但是这是必须的步骤，只能多试几次，或者FangQiang。这里如果没有弹出命令行 MSYS2 安装界面或者把它关掉了，那么可以重新打开cmd命令行，输入 ridk install 来再次进入 MSYS2 安装界面。分别输入 ruby -v和 gem -v 查看版本，确认安装完成。

二、安装 Jekyll

虽然目前 Jekyll 的版本已经到了 4 以上，但是还有很多问题(大坑)，会导致很多包的版本不匹配，经过我的一波折腾，发现了3.8.5是比较可靠的，如果你已经安装了其他版本，建议卸载，命令如下：

gem uninstall jekyll -v 你的版本

再安装3.8.5:

gem install jekyll -v 3.8.5

三、其他事项

正常情况下，直接jekyll serve就可以启动了，但是事情总没那么简单，那我们就一起来解决一些常见的问题吧。

3.1 jekyll 版本不同导致启动本地服务时 liquid 语法报错

解决：找到对应文件，将:

• "site.duoshuo_share && site.duoshuo_username" 修改成 "site.duoshuo_share and site.duoshuo_username"

• "tag[1].size > {{site.featured-condition-size}}" 修改成 "tag[1].size > site.featured-condition-size"

3.2 Jekyll serve 本地预览 not found 页面 404

本地预览自己写的博客无法正常打开，而提交到 github 上却可以正常解析。这是因为博客的 markdown 文件使用了中文文件名，jekyll 无法正常解析出现乱码。

解决：在自己的安装目录（如果默认安装则在C盘）找到:

\Ruby22-x64\lib\ruby\2.2.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))

到这里这个版本（3.8.5）的问题就基本解决了，可以预览本地的博客了，由于 Jekyll 官方更新频繁，且属于不向下兼容，因此该教程只适合该版本，其他版本的待踩坑吧！

希望本文对你有帮助！如果你觉得有帮助，请麻烦到这里👉 前端梦想家（GitHub）点个赞吧，或者关注微信公众号，不迷路！

本文使用 mdnice 排版