目錄###
1. 什么是Jekyll 噪径？
2. 使用靜態(tài)網(wǎng)站生成器的好處
3. 環(huán)境搭建
4. 主題
1. 什么是Jekyll ?
- Jekyll 是目前非常流行的靜態(tài)網(wǎng)站生成器(static website generator)。靜態(tài)網(wǎng)站即只包含HTML, CSS 和 Javascript
Jekyll(raw_text_files, templates)
{
return Beautiful_web_pages;
}
- 不同于WordPress, Ruby on Rails, CakePHP, Flask等這些需要web server的復(fù)雜應(yīng)用程序数初。Jekyll不依賴于數(shù)據(jù)庫或CMS找爱。所以最適合用來建立個(gè)人博客，個(gè)人portfolio等等
- Github Pages即靠Jekyll實(shí)現(xiàn)的
2. 使用靜態(tài)網(wǎng)站生成器的好處
- 輕量級(jí)網(wǎng)站泡孩，響應(yīng)速度快
- 網(wǎng)站更安全窿吩，無數(shù)據(jù)庫介时，無動(dòng)態(tài)數(shù)據(jù)
- 無需通入過多精力維護(hù)
3. 環(huán)境搭建
本文只說明在Mac上的實(shí)現(xiàn)過程
第一步 安裝 Jekyll
- 首先打開terminal榛搔，輸入
jason: ~ $ gem install jekyll
- 如果提示錯(cuò)誤鹰服，一般是讀寫權(quán)限問題，可嘗試
sudo眼俊，然后根據(jù)提示輸入密碼
jason: ~ $ sudo gem install jekyll
- 輸入
jekyll -v意狠，確認(rèn)安裝成功。若成功會(huì)提示版本信息泵琳，例如
jekyll 2.5.3
第二步 創(chuàng)建 Jekyll 項(xiàng)目
- 首先cd到你想創(chuàng)建項(xiàng)目的目錄下摄职，比如我想在桌面創(chuàng)建
jason: ~ $ cd Desktop
- 例如我想創(chuàng)建一個(gè)項(xiàng)目誊役，叫
Jason_Blog
jason: ~/Desktop $ jekyll new Jason_Blog
- 成功會(huì)收到提示信息
New jekyll site installed in /Users/boyuan/Desktop/Jason_Blog.
-
Jason_Blog文件夾內(nèi)容如下
Jason_Blog _config.yml 是配置文件获列，最為重要，包含了所有配置信息
_includes 文件夾包含了將被反復(fù)利用的文件蛔垢，比如footer击孩，header
_layouts 文件夾包含了主頁面的排版布局
_posts 文件夾將包含所有的日志文件，Markdown格式
Jekyll為我們提供了一篇默認(rèn)博客鹏漆，我們可以通過運(yùn)行下面的命令巩梢，然后再本地查看
boyuan: ~/Desktop $ cd Jason_Blog_2/
boyuan: ~/Desktop/Jason_Blog $ jekyll serve
注意：此時(shí)Jason_Blog文件夾中會(huì)增加_site文件夾创泄，包含了生成網(wǎng)站的所有結(jié)構(gòu)。同時(shí)括蝠，原來文件夾中開頭沒有下劃線的文件夾會(huì)被復(fù)制到_site文件夾中鞠抑，比如CSS文件夾
- 停止本地運(yùn)行，敲擊
CTR+C
第三步 更改配置文件_config.yml
詳細(xì)內(nèi)容參考官網(wǎng) - Jekyll configuration
想了解更多YAML文件 - YAML
打開
_config.yml文件忌警，可以看到一些基礎(chǔ)設(shè)置更改URL顯示
原始URL:http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll.html
# Build settings
markdown: kramdown
permalink: pretty
URL變更為：http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll/
# Build settings
markdown: kramdown
permalink: /:title
URL變更為：http://127.0.0.1:4000/welcome-to-jekyll/
第四步 深入了解Jekyll模板
Jekyll實(shí)際使用的是模板語言Liquid來操作模板和輸出文件的搁拙。Liquid現(xiàn)在是Github上的開源項(xiàng)目，有興趣可以多了解一下法绵，很簡單
- 在每一個(gè)
_post文件夾的post文件中箕速，在---中間的內(nèi)容叫做YAML Front Matter，Liquid可以將這里的數(shù)據(jù)傳送到模板中相應(yīng)的位置朋譬。
---
layout: post // 表示選擇post模板
title: "Welcome to Jekyll!" // 博客的標(biāo)題
date: 2015-06-23 01:54:33 // 博客日期
author: Jason // 作者
categories: jekyll update // 添加類別盐茎，空格分開
permalink: "Welcome to Jekyll" // 確定顯示的URL
---
注：反復(fù)使用的變量，比如layout, author等可以移到_config.yml中
- 從下面這張圖我們可以看到徙赢，Jekyll中模板相關(guān)的文件在紅框中字柠，我們具體以
default.html簡述一下
- 首先是Liquid的兩種格式
// 格式一 output markup
{% include head.html %}
// 格式二 tag markup
{{ content }}
第一個(gè)的意思就是把
head.html文件添加到相應(yīng)位置，同理header.html和footer.html狡赐。第二個(gè)的意思就是具體某個(gè)post的內(nèi)容會(huì)添加到相應(yīng)位置募谎，當(dāng)然在相應(yīng)的post中我們要指定layout是什么，比如下面就是指定layout為default阴汇。這個(gè)post的內(nèi)容會(huì)添加到
{{ content }}的位置数冬。
其實(shí)上述內(nèi)容與ASP.NET 中的Razor布局很像 - ASP.NET Razor 簡介-
下面這張圖我們可以看到我們指定了這個(gè)post使用default，同時(shí)注意到
{{ page.title }}搀庶，title數(shù)據(jù)就來自于上面第一點(diǎn)說的YAML Front Matter
post.html 說完了post拐纱，我們?cè)僬f說怎么增加新頁面，比如About, Contact......
新頁面直接添加在項(xiàng)目根目錄下哥倔，前面沒有下劃線秸架，比如新建contact.md
// 下面是about.md 中的 YAML Front Matter
---
layout: page // 表示選擇post模板
title: About // 標(biāo)題為About
permalink: /about/ //about后面添加一個(gè) "/" 可是_site中生成同名文件夾
---
- 在項(xiàng)目根目錄下可以創(chuàng)建文件夾
_drafts，然后再其中添加草稿咆蒿，預(yù)覽可輸入
boyuan: ~/Desktop/Jason_Blog $ jekyll serve --drafts
4. 主題
有了上面的了解东抹，網(wǎng)絡(luò)上有一大波主題在等著你，直接下個(gè)主題沃测，輕松簡單缭黔。
最后，發(fā)布到Github吧蒂破， Free Free Free
請(qǐng)戳 => 如何使用Github Pages免費(fèi)搭建網(wǎng)站
