博客落成有感

(此篇博客为旧版Jekyll系统的部署事项,对本博客新的Hexo系统不适用,已不再更新)

在和Jekyllhuxblog-boilerplate苦苦纠缠了两天半之后… …我的博客 终!于!落!成! 了!喜大普奔啊!
咳咳… …所以我稍稍谈谈用 该死的 Jekyll在gthub pages建博客时的注意事项… …都是经过痛苦调试换来的经验呀。

一些小提醒

  1. 强烈先在本地配置个Jekyll的环境,具体可以参考这个网站,不然每次push之后再调试会非常麻烦。
  2. 必须使用bundle运行环境,不然会报错。
  3. 布吉岛为啥,我这运行的时候加--watch似乎并不能实现修改后自动重新生成站点的功能… …所以如果你的情况跟我一样,我还是建议你写个bat,然后这个batcd /d到网站目录,删除_site文件夹再用bundle执行jeskyll指令,再弄个快捷方式搁桌面,设置一下快捷键,用快捷键来控制它。这样效率会高不少。
  4. Girhub Pages目录和本地调试目录最好是同一个,这样调试方便。
  5. 善用浏览器的开发者模式… …(捂脸)

关于_config.yml的配置

特别重要的一点是,很多博客都喜欢在这个配置文件里写个baseurl,然后旁边在好心地写个Example: /blog但在我决定不动这里,打开网站一看之后,我滴妈呀,咋变白底蓝字了嘞?!?!弄了半天,突然在另一个主题的文档上看见如果在girhub pages上建站,这个啥啥baseurl必须留空,不然CSS就没法工作… …诶,弄完果然正常了,害得我差点换主题。所以,这个baseurl万!万!不!能 写东西!必须留空!就连/之类的都不行,必须像下面这样:

Baseurl: ""

所以LessOrMore主题真是挺好的呢。

关于有些支持多说的主题的设置

有些支持多说评论的主题(比如我这个),喜欢在_config. yml下面放个short-name:我当时以为是填用户名,结果一渲染,诶,咋成了超链接了呢?后来我开发者模式一看,多说组件没有加载好… …于是机智的我赶紧看了看多说官网,突然发现原来这个short-name是指多说的空间名,于是赶紧开个空间,问题解决。

找了我好久… …多说的官网咋连个搜索框都没呢。

关于CSS无法加载的问题

有次我打开主页,进到开发者模式,突然发现浏览器报了一条错误,说这是 https:// 网站,不接受 http://CSS返回,于是我本着不会就Bing(别问我微软给了多少钱)的精神,果真找到了提供https:// CSS这个网站。于是我就把全站的CSS连接都用这个网站提供的安全链接替换了一遍,重新渲染果然没报错,问题解决。

所以https大法好!

关于网站加速

Jekyll是遵守Liquid语法的,文档请见[这里](http://ju.outofmemory.cn/entry/149459)。

由于我这个主题本来图就比较多,再加上Github Pages国外服务器那让人落泪的访问速度,必须使用国内CDN加速才行。

该死的七牛云存储,实名就算了,还要账户余额和备案… …

所以,经过我的选择和比较,我还是选择使用了七牛云存储的对象存储服务用于站点的图片CDN加速 (全站就算了,没备案呐)。关于如何弄到七牛的免费对象存储服务我就不在这说了,这已经超出了本文的范畴。

就是有一点要注意的:由于浏览器处于安全考虑,不接受从 http 协议返回的图片渲染到 https 网页中,因此需使用 https 协议的加速链接 !!!

所以,我简单介绍一下如何在类似huxblog-boilerplate这种 高大上 的主题中使用七牛CDN进行加速:

首先,通过官方文档我们可以知道,在这个_layouts文件夹中存放的就是博客主题的模版文件,我们可以再博客中使用layout: page/post/...来指定使用哪个模版。而我这个主题还有一个header-img:的参数用来指定封面图,因此,我们可以猜出来这玩意就是在_layouts里面处理的!
知道了目标以后,就要着手分析文件了。首先打开_layouts文件夹,我这个主题不算复杂,它提供了四种模版:

目录结构

我们逐个打开看看,可以发现在page.htmlpost.html里,它提供了两段 基本 相同的处理语句:

1
background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')

再次通过翻阅官方文档,我们可以知道在所有site.{CONFIG}表示的设置项都是在_config.yml中给出的设置项。

听不懂?
意思就是说比如你在``_config.yml``里面写了个``myConfig: "Eldath最可爱"``那么你在博库中的 **任意** 部分都可以通过``{{site.myConfig}}``来指代这个这个设置项,这样你只需修改``_config.yml``,就可以同时修改所有的引用处。

所以,为了以后的方便,我又在_config.yml里面加上了:

1
2
# CDN setting
image-cdn: "http://ray-eldath.is.the.most.lovely.so.does.ice1000/"

然后,我们就可以愉快的修改博客模版啦!由于在image-cdn中我们指定的路径最后已经包括了一个/,所以修改模版的时候只需直接改为:

1
"background-image: url('{% if page.header-img %}{{ site.image-cdn }}{{ page.header-img }}{% else %}{{ site.image-cdn }}{{ site.header-img }}{% endif %}')"

注意:这里千万不能换行!!不要为了美观换行写!

这样,再配置一下七牛提供的自动同步工具,设置Git每次自动调用它,再在_config.yml里面的image-cdn中指定一下CDN的地址,我们就可以在header-img里面直接写header-img: "Eldath.png"来使用CDN加速了!

最后一点:该死的Firefox不支.png渲染,逼我写了个网页禁止低版本浏览器和 垃圾 火狐的访问。

就这些了

补遗于2016-11-27。

=。=
0%