本文首发于 Caiyun Blog,作者 @Caiyun, 如果您喜欢想转载,这是我的荣幸,您只需要保留原文链接就好啦,谢谢哦 ^_

该文章步骤详细,更适合 大白(●—●) 型的朋友.如果您觉得 low ,希望您能吐槽,给我成长和改进的机会,如果您发现其中有错误或者不当的地方,也欢迎您随时联系,我会及时更正,彩云在这里先谢谢您啦 ^_

今天（2019-01-25）在 mac 上面重新搭建了下博客，炒鸡简单，一个报错信息都没看见 jekyll 本地就已经跑起来了，想当初在 windows 上面折腾了辣么久。。。。。。

前言

在前人的帮助下,仍然踩了不少坑,终于把这个 个人博客 搭建起来啦 ^_

之前想在某网站上注册一个博客,来记录自己的点滴成长,但是申请一直没有通过,然后好多次遇到问题Google 的时候,就会看到其他人将 或学习心得 或踩过的坑 或日常点滴 记录在册,就更眼馋了,但是却觉得博客高大上的样子,一直望而却步,最近偶然的某个瞬间,一时心血来潮(竟然忘记了之前对高大上的恐惧),就搭建了现在这个博客,其中,非常感谢 Mishy Jan 的耐心帮助,该文章中的前半部分引用 @BY Qiu 的文章(因为文章真的很详细,没必要再重新整理了,非常感谢!)

本文章偏向于不懂技术的小白(当然懂技术更好啦),好啦,废话不多说,我这样的大白都能搭起来博客了,你还等什么呢??

用 GitHub Pages 快速搭建个人博客

我认为这部分内容完全可以参考 @BY Qiu(该文章作者系统为 Mac系统) 前半部分(原文标题 在本地调试博客 之前)的内容,图文并茂,简单易懂,这里就不赘述了.但是要做一些补充说明,建议您可以先看看下面的话,然后再参考链接中的文章,避免我踩过的坑 (本大白的测试系统为 : win7 x64)

在我搭建博客的后期(jekyll serve) 的时候(别着急,这部分是我分享的重点,后面会详细讲解的哈),BY Qiu repo 中提供的模板配置在我这里并不是完全好用的,您可以直接在原文内容中 fork BY Qiu 的 repo ,后面会分享修改过程,当然,您也可以直接 fork 我的 repo ,省去修改的麻烦,剩下的文章前半部分的分享我测试的时候是没什么问题的,然后后期 jekyll的相关操作就可以看下面的分享啦(@BY Qiu 这部分没有很详细,结果我就开始踩坑了,不过还好,最后爬出来了,希望我的分享能帮你少踩些坑~~)

jekyll 的安装过程如下

考虑到自己对满屏英语的恐惧和遇到问题不知所措的不安,这部分会记录的很详细,还希望不要觉得啰嗦,如果您有基础有技术,大概扫一眼应该就可以了

大部分内容可以在 jekyll 官网 找到解释和解决方案(大白我以后也要尽量习惯看文档了 * _ *)

打开 jekyll 官网中有关 Windows环境下
安装的部分 ,
找到

01

02

Ruby 的安装

不是要安装 jekyll 吗?你骗我,为什么还要装 Ruby ,白捉急嘛, 客官您先看看官网解释嘛

然后选择

03

01

04

Ruby Devkit 的安装

05

$ cd C:\RubyDevKit

$ ruby dk.rb init

$ ruby dk.rb install

如果在执行命令的过程中没有出现错误的话,那就继续安装 Jekyll Gem 吧(就是点击右下角 install Jekyll Gem 的按钮 )

Ruby 安装可能的报错

上面三行命令,除了第一行,剩下两行由于各种原因可能会报错,我这里就整理一下自己遇到过的小问题吧(最后能解决的都不是问题,喝碗鸡汤~开始 除错)

• $ ruby dk.rb init可能遇到的报错
  • generated config.yml file doesn't list Ruby path

    生成的 config.yml 文件找不到 Ruby 的路径
    * 解决方案
    找到安装的 RubyDevKit文件夹,找到其中的 config.yml 文件,用编辑器打开,如图
    

    09

    
    添加箭头所指的部分
    然后打开你安装RubyDevKit 的文件夹,找到其中一个名为 dk.rb 的文件,然后用编辑器打开(或者记事本也行),在 REG_KEYS 里面添加一句

 'Software\Wow6432Node\RubyInstaller\MRI'

如图:

10

如果不可以,请参考这里 以寻找适当的方法

主角 Jekyll

好啦,现在终于要主角 jekyll 出场啦, 运行命令

$ gem install jekyll

进行 jekyll 的安装,再进行安装 jekyll 的时候,我测试的时候默认安装的版本是 3.5.2 ,所以就不用管下面的兼容性问题啦

06

$ gem install jekyll bundler

进行 jekyll bundler 的安装

安装成功后,进入你博客所在的文件里面,比如(personalBlog 为我的博客所在的文件夹):

07

jekyll s

或者

jekyll serve

两个命令功能是一样的
如果这步没有问题的话,会出现

08

使用 ctrl + c 可以停止serve 的运行

这样的话,用 jekyll 进行本地博客的同步预览就已经完成了(当然,在编辑器中更改博客内容后还是需要保存和刷新浏览器的),开森开森 ^_

正确的都一样,报错的各有各的报错,执行上面命令有报错的,来吧,咱们一起来看看这里有没有可以参考的解决方案

gem install jekyll 可能的报错

C:\RubyDevKit>gem install jekyll
ERROR: Could not find a valid gem 'jekyll' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.8.gz)

• 我实验成功的方法是:
  依次执行如下命令:

$ gem sources --remove https://rubygems.org/
$ gem sources -a http://api.rubygems.org
$ gem install jekyll

可以参考 这里 或者 这里 以便寻找更合适的方法

jekyll serve 可能的报错

• 可能报错如下

  
  
  13

• 解决方案如下:

  • 打开你的博客所在的文件夹,找到其中的配置文件 _config.yml ,然后找到一句 gems: [jekyll-paginate] ,将gems 改为 plugins ,如图所示(不要像我一样,傻傻的把 gems 换成了 plugins 还不知道错在哪里 捂脸捂脸)
    
    14
    
    然后执行命令

  gem install jekyll-paginate
  

  然后应该就可以啦

• 其实上面的方案有瑕疵,就是在运行 jekyll serve 的时候虽然能正常进行同步本地预览,但是会出现警告,就像下面这样
  

  15
  
  一大堆哦(一脸嫌弃)

• 解决方案 : 在 _layouts下的post.html与page.html中

  • 首先 将两个文件中的 && 替换为 and ;
  • 然后 将 { { site.featured-condition-size } }替换为site.featured-condition-size(也就是删除 {{}} )

这里需要感谢 Anc 在本博客留言中提供的解决方案呢~

_post 文件夹下文件名不能兼容中文的问题

• 可以参考这里 原文链接

修改安装目录\Ruby21-x64\lib\ruby\2.1.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 clean &&jekyll s

注意 : + 要去掉的,还有就是 要执行 jekyll clean &&jekyll s 之后再去看本地效果(千万不要像我一样,猴急猴急的,+没去掉 命令不执行 的就去看本地效果 捂脸捂脸 * _ * )
效果如图所示:

可以大概参考一下代码行数,或者用编辑器的搜索命令也行,缩小查找范围

11

12

好啦,关于 GitHub pages + jekyll 的搭建个人博客 基本就算是完成了,剩下的就是把你文件里面有关我的内容全部删掉换成你自己的,变成属于你的小天地,好开森有木有呀~~

快去吧,皮卡丘~~~

补充

Markdown

Markdown 是什么? Markdown是一种轻量级的 标记语言,很简单易用,相信你用了之后会爱不释手的,详情请看这里

Disqus 评论系统

• 关于 Disqus username 是什么的问题,请参考 @ancientwood

图床

在后期写自己博客内容的时候少不了要用到自己的图片的,比如本文中分享的这些个截图 之类的,但是,自己的截图在 Markdown 中是无法直接插入的,那咋办??白捉急嘛,客官您请听我说

首先说一个名词: 图床 ,啥??图床是啥??
介个....介个...哎呀,自己 Google 去啦~

了解了图床是啥之后,就认识到图床的重要性了吧
关于各种 收费 免费 常用 的图床可以 参考这里

我这里用的是 七牛云,所以就简单说一下好啦

之前没用过的话,注册账号,登录,然后如图所示,创建 对象存储(我理解的即使给你以后要上传的图片 文件 之类的东东找个地方待着)

16

17

18

19

另外 其实还有一个更简单的方法,就是使用浏览器插件

• 下载 Demo 集锦- 七牛云存储 的 qiniu upload files 插件

  1.七牛云插件,像使用桌面系统一样管理你的七牛云空间 2.支持拖拽上传，批量操作，文件处理等功能

• 安装之后,在浏览器的右上角部位会有一个图标,你一看就知道啦
• 然后根据实际情况填写表单
• 之后点击浏览器右上角的那个图标,把需要的图片或者文件拖进去,就会看到文件上传成功之后的显示
  
  20
  ,在邮件复制外链地址就可以啦
  遗留问题: 但是这个方法我测试没成功,好像跟 我选择区域为 华北 有关系, 出现的错误提示是:
  
  21
  
  
  22
  
  客户端认证授权失败。请重试或提交反馈。(401：bad token)

如果您有相关建议的话,还希望您能 不吝赐教哦~~

管理 GitHub 文件库插件安利

• GitHub 现有的目录层级形式，在查看来自不同层级文件夹的文件的时候，显得似乎不是很方便，Octotree 这款 Chrome 插件能够让你通过文档库的方式管理、查看你的 GitHub 仓库，简单直观的同时，也方便你进行文件之间的跳转操作
• 25
• 插件下载参考地址

关于百度统计

2017-10-04 更新补充

• 在 百度统计 注册账号,关于注册站长版还是客户版或者移动统计,可以 参考这里
• 然后根据 参考资料 的提示进行账号登录,添加站点,获取代码 的操作

• 获取代码之后,我们只要其中的一部分(下图方框的那部分)

  
  
  27
• 将获取的部分添加到博客所在文件夹中的 _includes/footer.html
  
  28
• 在博客所在文件夹下运行 jekyll s 命令

如果不运行,添加的 track_id 不能与 _site 关联起来,就算将 _site 放到了自己的云主机上,统计信息也不能被百度统计获取到

• 然后将 _site 文件上传到自己的云主机上

• 再打开百度统计,就能看到最近的访问信息了(可能会有一定时间的延迟,可以耐心等一下)

  
  
  29

这篇文章挺长的,看到这里肯定辛苦了吧,谢谢您的阅读啦 ^ _ ^

然后,然后有个厚脸皮的小小请求,您看看在我码这么多字的情况下,可不可以赏脸给个赞呢??哎呀,我知道你会同意的啦~~
在 这里啦

24

或者您通过本博文的最后面可以啦

23

彩云在远方先谢谢您啦~~