独立博客Jekyll进阶技巧

本文介绍了一些与使用 Jekyll 搭建博客的进阶技巧,帮助你能了解自定义 Jekyll Pages 的方法。主要介绍了生成摘要和图床相关的方法,读者可以逐类旁通,弄出一些更加 awesome 的功能。

读这篇文章之前,建议看看手把手教你用github pages搭建博客 这里面有详细的使用 Github Pages 进行博客搭建的步骤。接下来我们看看 Jekyll 的一些进阶技巧,这些技巧可以使得你能进行自定义的优化和改进,以期博客能够更好的表达你的观点,让世界看见你。

house_in_the_forest-01.jpg

了解 Jekyll

在讲解一些技巧前,先来了解下 Jekyll 是如何工作的。首先 Jekyll 是一个博客工具,它所完成的工作是将具有特定格式的 Markdown 文件转换成特定目录下的 HTML 文件。例如 2016-05-15-blog-seo-baidu.md 经过 Jekyll 系统的编译后,会生成 2016/05/15/blog-seo-baidu.html的文件,而我们实际在网站上访问的结果也就是这个 HTML 文件,而不是对应的的 Markdown 文件。

运行环境

既然可以进行编译,那么就必须依附于相应的系统,这里可供选择的就是 nodejs, python, ruby等等,另一个知名的博客系统 Hexo 正是依赖于 nodejs, 而 Jekyll 依赖于的则是 ruby。如果大家对 ruby 有一定了解的话,一定知道 Gem, Gem 就是 ruby 下的包管理器,类似于 apk-get 或者 mac 下的 homebrew.

Gem 包依赖可以通过在根目录下生成 Gemfile 文件,或者 在 _config.yml 指定即可。下面是 Gemfile 的示例。

source "https://rubygems.org"

gem 'jekyll'
gem 'jekyll-paginate'
gem 'jekyll-coffeescript'
gem 'jekyll-feed'
gem 'jekyll-sitemap'
gem 'therubyracer'
gem 'execjs'

yml 标记语言

为了更好地表征 Jekyll 相应的配置,需要通过某种标记语言来说明,常见的就是 Json、xml 等等。而这里采用的是 yml 标记语言。

yml 使用 -- 作为表示文档开始,...是结束的标志,例如下面的片段表示一个文档。

---
# A list of tasty fruits
fruits:
    - Apple
    - Orange
    - Strawberry
    - Mango
...

任何一个缩进的表格,表示从属关系,- 则表示同级别的列表关系。

# Employee records
-  martin:
    name: Martin D'vloper
    job: Developer
    skills:
      - python
      - perl
      - pascal
-  tabitha:
    name: Tabitha Bitumen
    job: Developer
    skills:
      - lisp
      - fortran
      - erlang

那么 Jekyll 有哪些功能?我们又是如何对其进行配置的了?Jekyll 使用了 _config.yml 作为其配置文件,也就是说,在执行 Jekyll 编译命令时,Jekyll 会通过 _config.yml 来加载相应的配置,并通过这些配置来生成相应的目录和文件。例如我们使用的分页,jekyll-paginate 插件,会在项目的目录中生成 page{num} 目录,并在其中放置相应的 index.html 文件,这样一来,读者可以通过 woaitqs.cc/page2 访问到第二页的内容。

jekyll 总结

总结一下就是,Jekyll 运行在 ruby 上,通过 Gem 进行包管理,并最终生成相应的 HTML 文件,而最终浏览器展示的正是这些 HTML 文件。

Jekyll 的摘要问题

我使用的是 jekyll-bootstrap 的系列主题,其每一篇文章都是完全显示,这实在是有些坑爹,完全剥夺了读者通过摘要来判断是否要继续阅读文章的权利。那么怎么实现如下图的的功能。

article_read_more

官方并没有提供对摘要功能的支持,因而可以通过人为干预的方式来实现。Jekyll 在语法上是支持管道的,{{ post.content || split:'' | first }} 的意思是,对 进行分割,取其中的第一部分,如果我们在合适的位置 插入 不就是我们想要的摘要了吗?

{% for post in paginator.posts %}
  <h1><a href="{{ post.url }}.html">{{ post.title }}</a></h1>
  <div class="content">
    {{ post.content  || split:'<!--break-->' | first }}
    <footer>
      <a class="morebox" href="{{ post.url }}.html">Read More →</a>
      <hr size="6px" color="#4285F4">
    </footer>
  </div>
{% endfor %}

因而 我们可以在对应的 markdown 文件中插入 就可以,而 本身作为注释,不会影响 markdown 的显示。

图床技巧

写博客免不了使用图片,图片使用外链的话,可用性不能保证,万一外链挂了,图片找回成本就会很大。

先说说我采用过的几个方案:

  1. sm.ms 最开始使用的是这个网站,界面简介大方,落落有致。在绝大多数时候,这个网站都能解决我的问题,知道最近出现了一些不寻常的波动,经常导致图片挂掉,因为决定弃用这个网站。

  2. tuchang.org 国内的一个图床网站,还没有发现挂掉的问题,不过界面有些操作不方便,也担心其服务挂掉,因而选择弃用。

  3. 最终采用了七牛的解决方案,作为国内老牌的 CDN 服务,受到了一定程度的好评,使用 10 块钱,成为标准用户后,这样可以免费的 10G 流量。目前而言 10G 流量对我来说绰绰有余,如果有一天这流量不够用了,那说明博客的访问人数到了一定的量级,这也是值得开心的事情。

如果使用的是 Mac 系统,那么有超级方便的工具,可以让你去使用 Dropzone, 当你拖拽图片的时候,通过七牛的插件,可以一键上传图片。在图片上传完成后,点击弹出的通知,即可将图片外链复制到剪切板中,如下图所示。

dropzone qiniu

一点感悟

无意中发现了这篇 国内搞独立域名个人博客并更新的还有多少人?有前途吗? 文章,心里还是有些唏嘘,不知道在另一个四年后,我是否还是继续坚持写作了?想到这里实在有些诚惶诚恐。

在现在微信公众号、头条号,知乎和微博等等各种自媒体,充斥着我们的生活,在这种情况下,是否还是值得写独立博客了?选择了独立博客,往往就意味着孤独和独立,相较于其他自媒体而言,实在有些冷清,毕竟成名的博客只有屈指可数的那么多。

不过即便在这种情况下,仍然相信独立博客,值得我们继续写下去!

任何事情都贵在坚持!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容