受到野子Joey的文章的啟發(fā)，我也開始研究Jekyll了!
作為前端開發(fā)新手,在研究過程中遇到了不少問題，但是在折騰的過程中也鍛煉了前端開發(fā)能力如绸，而且看著自己的博客一點(diǎn)一點(diǎn)成型嘱朽，最后運(yùn)行在github上，確實(shí)很有成就感!怔接。
目前初步建立了自己的Jekyll博客,研究了好幾天Jkeyll如何運(yùn)作以及如何進(jìn)行各種個(gè)性化設(shè)置搪泳。
個(gè)人博客地址
在里面也可以找到本篇文章
首先是安裝
這一步很簡單,只需在終端輸入:
$ sudo gem install jekyll
創(chuàng)建一個(gè)簡單的博客并運(yùn)行:
$ jekyll new helloJekyll
$ cd helloJkeyll
$ jekyll serve
serve 還可以加上參數(shù) -w 這樣修改網(wǎng)站后可以自動(dòng)更改，刷新后反映到瀏覽器中
在瀏覽器中輸入<strong>localhost:4000</strong>即可觀看效果:
關(guān)于如何建立
github的網(wǎng)站扼脐，可以參照我開頭提到的文章
我們來看一眼基本的Jekyll的一般目錄結(jié)構(gòu):
.
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── css
|── images
├── _site
└── index.html
- _config.yml用來保存一些配置數(shù)據(jù);
-
_drafts目錄用來存儲(chǔ)草稿岸军，與已經(jīng)發(fā)布的文章不同，這是沒有日期的文章瓦侮，在運(yùn)行
jekyll serve會(huì)自動(dòng)賦予當(dāng)前日期艰赞。已經(jīng)發(fā)布的文章在_posts目錄下。 -
_includes目錄中包含的html文件可以作為模塊來加載,比如加載
footer.html可以使用標(biāo)簽{``%%``}將代碼include footer.html包裹其中來加載,這些代碼被稱作Liquid代碼肚吏，在Jekyll中大量使用這種語法 - 正如上面所說_posts中放的是發(fā)布的文章方妖，不過格式一定要符合
年-月-日-標(biāo)題.md否則會(huì)有錯(cuò)誤。 -
_layouts這里存放文章的模板,default.html是整個(gè)網(wǎng)站的框架罚攀，post.html則是單個(gè)文章的模板党觅。
剩下兩個(gè)就很好理解，整個(gè)網(wǎng)頁的css樣式表斋泄，和圖片資源杯瞻，如果需要，你還可以加上js文件夾等等炫掐，無論你加上多少文件夾魁莉，到最后Jekyll都會(huì)自動(dòng)對他們進(jìn)行轉(zhuǎn)換，最后生成完整的網(wǎng)站到_site文件夾中卒废。
所以在修改網(wǎng)站內(nèi)容的時(shí)候沛厨，不要去修改_site文件夾里的內(nèi)容宙地，否則一旦網(wǎng)站運(yùn)行起來摔认，Jekyll會(huì)更新_site文件夾，修改會(huì)被重置宅粥。
關(guān)于配置文件
# Site settings
title: "codeGlider's blog"
description: "Do not go gentle into that good night..."
baseurl: ""
url: "http://ShyHornet.github.io"
# Build settings
markdown: redcarpet
permalink: pretty
highlighter: pygments
paginate: 3
# Links
links:
- title: "Home"
url: /
- title: "About"
url: /about
- title: "簡書"
url: http://www.reibang.com/users/3007ce57abd3/latest_articles
- title: "github"
url: http://github.com/ShyHornet
- title: "訂閱"
url: /feed.xml
這是我的配置文件参袱，實(shí)際上這些都是可以自己定義的全局變量，然后你在網(wǎng)站的各個(gè)地方都可以使用上面所提到的Liquid代碼引用,所有該文件中定義的變量都可以使用site.#的形式來引用秽梅。
像下面這樣:
<div class="pageTitle center">
<a style="color: #000;" href="`{``{` site.baseurl `}``}`/">`{``{ site.title `}`}`</a>
</div>
<p class="sub-title">
`{``{` site.description `}``}`
</p>
代碼取自本站源碼,
{都被我用``包了起來抹蚀，否則就會(huì)渲染出這些變量的值了
注意到Links，個(gè)人理解相當(dāng)于定義一個(gè)數(shù)組企垦，數(shù)組元素是結(jié)構(gòu)體环壤，可以通過內(nèi)嵌for循環(huán)來得到他們的值:
`{``%` for link in site.links `%``}`
<li>
<a class="page-link" href="`{``{` link.url | prepend: site.baseurl `}``}`">`{``{` link.title `}``}`</a>
</li>
`{``%` endfor `%``}`
渲染后:
{% for link in site.links %}
<li>
<a class="page-link" href="{{ link.url | prepend: site.baseurl }}">{{ link.title }}</a>
</li>
{% endfor %}
這其實(shí)就是網(wǎng)站的導(dǎo)航部分,源碼地址。
關(guān)于寫文章
所有文章的markdown文件存儲(chǔ)在_posts文件夾下钞诡，只要將要發(fā)布文章的文章拖入這個(gè)文件夾就可以了郑现，刷新網(wǎng)頁之后你的文章就會(huì)出現(xiàn)湃崩，如上面所述，文件名要符合年-月-日-標(biāo)題.md的格式接箫。
但是在寫作的時(shí)候感覺到很不適應(yīng)攒读，因?yàn)槠鋗arkdown語法和github，或簡書上的markdown語法很不一樣辛友，比如代碼高亮部分只能用以下形式:
`{``%` highlight language `%``}`
your code....
`{``%` endhighlight `%``}`
這是因?yàn)?code>Jekyll使用的markdown解析器不太一樣薄扁，默認(rèn)使用kramdown作為markdown解析器。不過可以改成我們需要的markdown解析器废累，在_config.yml文件中可以指定markdown解析器
在
Jekyll中邓梅，默認(rèn)有三種markdown解析器:kramdown,redcarpet,rdiscount。
我發(fā)現(xiàn)redcarpet比較符合github和簡書的markdown語法邑滨，在_config.yml文件中將
markdown:kramdown
改為
markdown:redcarpet
工作還不算完震放，因?yàn)?code>redcarpet的markdown格式還是有一些地方與github風(fēng)格的markdown不相符,那么如何解決呢？別急驼修，Jekyll已經(jīng)為我們想到了:
可以為redcarpet增加一些擴(kuò)展,具體的擴(kuò)展列表在redcarpet的官方文檔中殿遂。
在配置文件中增加如下代碼:
redcarpet:
extensions: [ "hard_wrap","autolink", "tables", "strikethrough", "superscript", "with_toc_data", "highlight", "prettify","no_intra_emphasis"]
現(xiàn)在，Jekyll的markdown格式就基本和github和簡書中的markdown格式相同了,經(jīng)過測試乙各，本篇文章完全在Jekyll和簡書之間通用墨礁！
代碼高亮自定義
代碼高亮部分也是可以自定義，本網(wǎng)站使用的是pygments作為代碼高亮器,其實(shí)這和github上使用的代碼高亮器是相同的耳峦，它的風(fēng)格可以選擇恩静，不過因?yàn)樗?code>python編寫的，需要用python的管理工具pip進(jìn)行安裝蹲坷。
以Mac(OSX10.11)為例驶乾，雖然本身自帶python，但是并沒有安裝pip循签，所以要去手動(dòng)下載安裝:
下載地址
下載后直接解壓縮,打開終端將當(dāng)前目錄切換到解壓縮后的文件夾中,然后輸入:
$ python setup.py install
輸入pip看看有沒有反應(yīng),如果顯示出pip命令的幫助就說明安裝成功级乐。
然后輸入:
$ pip install pygments
自定義代碼高亮風(fēng)格很簡單，在css文件夾中建立一個(gè)新的css文件pygments.css县匠，用來放置代碼高亮樣式风科。
然后用以下命令生成pygments的css樣式表:
$ pygmentize -S default -f html > your/path/pygments.css
這樣是將默認(rèn)風(fēng)格的代碼高亮風(fēng)格注入到了我們新建的css文件中，這里也可以指定其他自帶代碼高亮樣式.
所有自帶代碼樣式的列表可以通過輸入python命令得到:
首先輸入python進(jìn)入python命令行模式:
$ python
然后打印所有代碼風(fēng)格:
>>> from pygments.styles import STYLE_MAP
>>> STYLE_MAP.keys()
['manni', 'igor', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'paraiso-light', 'trac', 'default', 'fruity']
可以用其中任何一個(gè)名稱代替上面代碼中的default乞旦。
比如xcode風(fēng)格:
borland風(fēng)格:
colorful風(fēng)格:
