Jekyll 折腾记录

动机
步骤
- 1) 在本机上安装Jekyll（顺便鄙视一下某社比 GFW 还要变态的网络代理）
- 2) 从 http://jekyllthemes.org上clone一个自己喜欢的Jekyll模板并重命名
- 3) 将上述仓库推到自己的GitHub Page上
- 4) 略加修改
- 5) 查看结果
主要参考资料
脚注

动机

整理自己的技术经验（每次搭建/配置/调试都很费劲，总结一下方便以后看）
提供一个让自己坚持使用Github的理由

步骤

1) 在本机上安装Jekyll（顺便鄙视一下某社比 GFW 还要变态的网络代理）

sudo gem install -n /usr/local/bin --http-proxy=http://proxy.xxx.co.jp:8080 jekyll

可能不需要sudo
Mac OSX EI Caption (10.11.2)以上版本引入了“rootless”的概念，禁止对一部分系统目录的读写（即使sudo也不行）；可以禁用该属性或者通过-n /usr/local/bin的方法来将软件安装到非关键区域¹
如果公司的网络要走http代理的话，记得加上--http-proxy选项

2) 从http://jekyllthemes.org上clone一个自己喜欢的Jekyll模板并重命名

cd ~/learn/
git clone git@github.com:streetturtle/jekyll-clean-dark.git koyo922.github.io

这篇博客写完之后，我又换了一个更好看/更符合中文习惯的模板
来自于黄玄的Github https://github.com/Huxpro/huxblog-boilerplate

3) 将上述仓库推到自己的GitHub Page上

在自己的GitHub上建立一个名为<username>.github.io的仓库，并将上述模板push到该仓库

cd koyo922.github.io/
git remote set-url origin git@github.com:koyo922/koyo922.github.io.git
git push

用于发布GitHub Pages的仓库名称必须是 <username>.github.io
必须用master分支，而非gh-pages

4) 略加修改

首先是 vi _config.yml² ³

# Site settings
baseurl: ""        # for example, '/blog' if your blog hosted on 'host/blog'
timezone: +0900
future: true

# SNS settings
weibo_username:     2045173904  # caution, non-VIP users maybe using number-ids
zhihu_username:     qian-wei-shuo
github_username:    koyo922
facebook_username:  100005178853657

# Build settings
highlighter: rouge
gems: [jekyll-paginate, jemoji]

# Markdown settings
markdown: kramdown
kramdown:
  input: GFM        # use Github Flavored Markdown !important
  syntax_highlighter: rouge
  default_lang: bash

# Disqus settings
#disqus_username: _your_disqus_short_name_

# Duoshuo settings
duoshuo_username: koyo922

# Analytics settings
# Baidu Analytics
ba_track_id: a2bb43ef451f25a0f65288a7a1189357
# Google Analytics
ga_track_id: 'UA-73383919-2'
ga_domain: koyo922.github.io

defaults:
    -
      scope:
          path: ""
          type: "posts"
      values:
          css: "koyo-markdown"
          author: "koyo"
          layout: "post"

“多说”是个比较好用的评论系统，但是其官网文档极其隐蔽，根本没告诉你在哪里注册。参考了网上的文章⁴，找到注册入口 http://duoshuo.com/create-site/
百度分析要专门注册百度推广/百度联盟帐号，谷歌分析直接用Google帐号即可登录；两者都非必须。
/_include/footer.html中有涉及highlight.js的内容；删掉，不然css代码的渲染会很丑（折叠起来）
timezone(时区设置)比较坑爹，官网说可以用 IANA TimeZone Database 中定义的时间名称；但是在本机实测只能用类似+0900这样的数字串

然后是 vi css/koyo-markdown.css (html中默认的<em>标签只是斜体，不醒目)

em {
	color: darkorange;
	font-style: normal;
}
img.emoji {
	box-shadow: none;
	background-color: transparent;
	display: inline-block;
	margin: 2px;
}
.footnotes p {
	margin-bottom: 0;
}
.highlight > pre > code pre {
	color: #ddd; // GitHub上渲染的代码结构跟本地略有不同，如果不改这里，可能看不到部分颜色的代码
}
a.footnote {
	padding-left: 0.3em;
	color: dodgerblue;
}
a.footnote:before {
	content: "[";
}
a.footnote:after {
	content: "]";
}

.note {
	color:brown;
	border-left: 12px solid #dc0;
	background-color: #ffa;
	padding: 8px;
	margin: 0;
}
.note:before {
	content: "注意:";
	display: block;
	font-weight: bold;
}
ol.note, ul.note {
	padding-left: 30px;
}

.markdown-toc {
	padding-bottom: 80px;
}

vi _posts/2016-02-04-config-jekyll.md, 在Front Matter中写上要嵌入的css(见第3行)，不带后缀名

---
layout: post
css: koyo-markdown
title: "Jekyll折腾记录"
date: 2016-02-04 22:20:00
tags: Jekyll config markdown
description: 花了两天时间，总算用Jekyll搭建好了个人博客；
本地和Github都能用；代码高亮，有行号(本地支持不太好)，支持高级Markdown扩展。
---
\{::options parse_block_html="true" /}
\{\::\nomarkdown}</ol>\{\:/}
\{\% capture m %}I want this to be in *Markdown*!\{\% endcapture %}\{\{ m | markdownify }}

上述反斜框（\）不是正确的Liquid语法，是我为了转义加在这里的。
关于nomarkdown的用法，见此http://kramdown.gettalong.org/quickref.html#extensions
关于capture的用法，见此http://stackoverflow.com/questions/16517735/rdiscount-enable-parsing-markdown-within-block-html#answer-16533635

vi _layouts/post.html, 根据文章的Front Matter中的css属性来嵌入样式⁵

{% include header.html %}
<!-- koyo -->
{% if page && page.css %}
  <link rel='stylesheet' href='{{site.baseurl | prepend:site.url}}/css/{{ page.css }}.css' /> 
{% endif %}
<!-- koyo -->

5) 查看结果

执行 rm -rf _site/ && jekyll serve --watch --host 0.0.0.0
在Chrome中分别观察本地和GitHub Page⁶

主要参考资料

阮一峰的文章(原理讲得很清晰，照着做一遍差不多就理解了 )
http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
Markdown Cheatsheet https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Kramdown语法(Jekyll对此支持并不完整) http://kramdown.gettalong.org/syntax.html

脚注

MaxOS 10.11上的rootless属性问题及解决方案 http://tex.stackexchange.com/questions/249966/install-latex-on-mac-os-x-el-capitan-10-11#answer-249967 ↩
要先执行sudo gem install jemoji，见 GitHub/jekyll/jemoji ↩
Emoji代码表 http://www.emoji-cheat-sheet.com/ ↩
感谢网友文章 http://blog.lessfun.com/blog/2013/11/27/create-blog-in-github-page-using-octopress-and-binding-domain ↩
Liquid模板语言中的{% ... %}需要用小写的{% RAW %}和{% ENDRAW %}括起来转义
详见 http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags ↩
如果做了在仓库根下放了CNAME文件（里面写blog.koyo.xyz）之类的话，会自动跳转到相应的URL（内容一样） ↩

目录

动机

步骤