«

与Jekyll死磕到底

在决定废了Farbox之后,我又毅然决然的决定投身到Jekyll这个Geek的建站行动中去了。

大抵是一年前,我发现了Jekyll,一心想要用其搭建一个博客。其实说来也觉得很奇怪,找个像lofter一样的地方写写字不久行了嘛,干嘛非要同代码做斗阵呢~

网上表扬Jekyll的好处基本如下:

  1. 不需要使用额外的数据库
  2. 支持markdown,liquid,以及原始的html、css
  3. 可以定义模板,并在模板上进行代码复用
  4. github对其支持,可以直接在github上搭建,可以继承github上的各种好处(版本控制,免费,无流量限制)
  5. 有很多扩展插件(但是在github上用不了,github不允许用户使用扩展插件,大概是出于安全性考虑)

这个对于非代码人员来说就云里雾里了,什么额外的数据库,什么代码复用,什么github啊,我能知道一个Markdown已经是奇迹了好么.其实用Jekyll搭建的认知成本真的很高啊,官网上写的什么三行代码一个对策解决所有问题,都是给码农看的啊,给码农啊!!!

而且Jekyll上的很多模板还没有网易Lofter好看。但是就是为了追求这一份Geek加世外桃源感(你不知道我的域名就看不到我的博客的傲娇感),我开始了这漫漫征程。

我也真是胆子大,不知道Git是何物就开始瞎弄,最终的结果当然是摆弄了Github pages好一会儿都没有整明白文章是怎么才能传上去。于是一年前的探险就这样无疾而终,转投Farbox去了。

但谁知,Farbox出问题了,我还写了一篇文章吐槽Farbox的各种问题,一开始我最最喜欢的本地文件拖拽功能现在已经失灵了,真是让人心碎,逐又想起了我的千古之谜Jekyll。于是找到了一码农,他在我的终端敲敲敲的,在我本地建了一个文档,然后告诉我,你以后要加文章就放在posts这个文件夹里,要推送到github用add ., commit, push这三条命令就可以高枕无忧了。

但是他给我的模板我不满意啊~,于是我就开始慢慢去找自己较为中意的模板,下载,重新推送,这一路不知道遇到多少九九八十一的问题,什么Jekyll本地安装问题,什么这三条终极口令到底是什么,最终我就顺带把Git给学了,这比我之前每次路过Git教程就看第一篇介绍感觉要好得多,因为我终于深刻体会到了为什么要用Git了啊,终于边学边实战并且成功了啊~。

在这漫漫征途中,我一直在不断的尼玛,因为世上没有完美的无代码Jekyll教程啊,一度绝望崩溃,各种问题层出不断,于是我心中冉冉升起了一个想要写一片为广大女性同胞准备的Jekyll搭建攻略。但是最终我只能相信世上本无完美的教程,因此你永远不知道下一秒会遇到什么问题,更别说别人遇到的问题了,所以你们就各自研究去吧~。

以下仅记录我遇到过的困难,以便要是以后换设备做提醒。

本地安装Jekyll

1.对于Mac而言先得装Ruby,对于Mac用户来说可以在终端用homebrew 安装

brew install ruby

2.装完Ruby你得去装gem,这个被墙了,因此只能另寻它法:

$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/

$ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

$ gem install rails

更多请参考RubyGems 镜像

3.然后就可以安装Jekyll啦~

gem install jekyll

Git 问题

安装Git的步骤就补啰嗦了~ ,请移步缪雪峰的git教程

纵览了一下缪老师的教程基本就能把握到git是干嘛的,就是一个管理代码迭代的版本库。其实就像是写作文改作文的时候,就可以创建Git,如想要回到之前的一个版本就可以用Git的命令,如想要再回来也是ok的,如果误删了之前的某句话,也可以通过git找回来,而Github就是存放这些代码的终极地方。

类似于,你在电脑上做完作业,然后把写好的作业放在一个文件夹里 (这就是add了,是添加到暂存区了),如果这时候你想要继续修改,那就是再打开文件修改,修改完了之后再add,那之后你要把这些修改全部都提交并放到即将要发送的邮箱里,那就相当于commit了。那当你按下发送键给到老师的时候,就是Push,所以Github就好像是老师那端,所以每次push的时候都紧张兮兮的。

.gitignore – 忽略不需要上传的文件

在用Jekyll serve的时候会遇到一个问题那就是Jekyll帮你在本地的文件夹里自动生成了一个_site的文件夹,在研究别人的代码的时候我都发现没有一个人在Github上有_site这个目录,而且打开目录后显示的基本都是原本文件的副本,而Posts里面本事.md的文件都变成了html。

后来我看到说在提交的时候不要将_site提交到github上去。要建立一个.gitignore的文件,然后将 _site放到里面去。这样一来,git再push的时候就不会将 _site这个文件夹上传到github上去。

学习.gitignore的时候,我看到的是英文

When Jekyll is running and you save one of your files it will be copied to the _site folder. The _site folder is completely temporary, but is also the final, compiled version of your website.

然后我很天真的在文件夹下建立一个.gitignore的文件夹,结果违反命名规定不能建,我就懵了。 于是看到中文教程说:

不需要从头写.gitignore文件,GitHub已经为我们准备了各种配置文件,只需要组合一下就可以使用了。

然后我就又懵了,什么还要怎么写,不是放进去就好了么?这个.gitignore到底是word还是excel到底尼玛是什么文件啊,当然,最后我顿悟了,在sublime里面建立了.gitignore,然后写上了 _site

原来是文件不是文件夹,是file不是directory啊~ 看来中文没没写好,英文也没写好。

但是新的问题又来了…这次再push到github上的时候,_site 还在,但是之后更新的东西没有在 _site里面体现出来。

删除文件夹

于是我就得想办法把 _site在Github上给删除了啊~, 我采取的第一个笨办法是把整个repository在Github给删了,然后重新,add, commit, push,结果这个顽固的 _site还在,于是我就意识到了,这不是github的问题,是git的问题,现在 _site文件夹在push的时候已经不会更新了,因此只要在git里面把原本的 _site给删除就ok了。

删除文件的方法一般的教程上都有写:

git rm test.txt

但是没有人曾告诉我怎么把文件夹给删了啊~,要我手动的一个个删 _site里面的文件这不笨死了。这时候就得乖乖google~~~~

How to remove a directory in my github repository

下面的这行代码不仅帮我解决了在git上删除_site,还帮我在文件夹里保留了_site。

git rm -r --cached myFolder

git commit -m "Remove duplicated directory"

git push origin master

Pagination – 分页功能

我千找万找,找到了一个还算满意的Theme,于是就下载下来用起来了,但谁知这个坑爹的主题它没有分页。。。,虽然它又Piginaiton.html但是在博客上毫无显现。

于是又得去研究。

1.在 _conig.yml文件中加入分页设置

paginate: 4

paginate_path: "blog/page:num"

gems: [jekyll-paginate]

2.在 index.html 文件中将:for posts in site.posts 改为: for posts in pagination.posts.

如果你的模板里连pigination.html也没有的话,就按照Jekyll官网的指导一步步添加~ 可能会给到一个比较简易的样式,如果要好看的只能继续自己折腾啦~ 。

参考: Setting up Jekyll Pagination

当然我的pagination分页问题还没完全整完,虽然能用了,也有了样式,但是这个样式怎么啦么奇怪,位置明显不对。需要继续研究。

gh-pages分支问题

当然还有一个严肃的问题那就是,我的Blog是建立在Master这个分支上,但是我看到说github规定要建在gh-pages这个分支上。我不明原因,但是也做了尝试,在终端建立了git check out -b gh-pages但是最终推送到github后网站不能打开变成404了。 再推送会Master之后居然又能打开了。

我推测可能是我之前没有设SSH key 的缘故.

anyway,先用起来再说。


网上的很多的教程其实都是包含了重头创建jekyll的步骤,他会叫你自己写一个config, 弄一个html,但是要学会这么多前端代码并非一朝一日,更何况你还希望有个好看的网站,于是拿来主义这时候是最好不过的。因此这些教程里很多的代码需要忽略,找到你真正要用的代码。

终于在一年之后秉持着不抛弃不放弃的理念,终于把Jekyll给死磕出来啦~ 。

鼓掌!!! 🎉🎉🎉


哦哦,最后的最后,记录一下扶持过我的好教程啦~

Share Comment on Twitter