在Github上搭建Jekyll博客和创建主题
在Github上搭建Jekyll博客和創(chuàng)建主題
之前本來想展開寫的，后來發(fā)現(xiàn)Jekyll官網(wǎng)的教程已經(jīng)非常完善了就沒有多寫，所以只有這篇。
但是過了這么久，發(fā)現(xiàn)很多人還是不清楚怎么搭建，所以這里打算詳細(xì)寫一下，并且把自己對圖片的解決方案以及主題的創(chuàng)建步驟也一并寫下。
本篇主要談如何搭建，不再講為什么用它們。
說明：本篇用到的代碼中，為了防止解析沖突，一律多了\這個(gè)來防止被誤解析
創(chuàng)建一個(gè)庫
在Github上新開一個(gè)庫，名字叫做username.github.io，然后當(dāng)別人在地址欄輸入相應(yīng)url的時(shí)候就可以訪問進(jìn)來了。
在這個(gè)庫中完全可以只上傳一個(gè)index.html，來講自己要寫的東西寫進(jìn)去，但是這樣會喪失很多靈活性，所以需要Jekyll的幫助來創(chuàng)建自己的博客。
設(shè)定目錄結(jié)構(gòu)
把自己的庫clone到本地來，建立如下目錄結(jié)構(gòu)：
├── CNAME ├── README.md ├── _config.yml ├── _includes │?? ├── disqus.html │?? ├── footer.html │?? ├── googleanalytics.html │?? ├── header.html │?? └── navside.html ├── _layouts │?? ├── base.html │?? ├── book.html │?? ├── page.html │?? └── post.html ├── _posts │?? ├── Book │?? ├── Life │?? ├── Resource │?? ├── Technology │?? └── Tool ├── index.html ├── pages │?? ├── about.html │?? ├── archive.html │?? └── atom.xml ├── public │?? ├── css │?? ├── fonts │?? ├── img │?? ├── js │?? └── upload └── sitemap.txt這個(gè)目錄結(jié)構(gòu)是我自己設(shè)定的，也可以有不同的目錄結(jié)構(gòu)，看官網(wǎng)。
接下來我主要解釋這里面每一個(gè)目錄的功能。
配置文件
_config.yml里寫有整個(gè)站點(diǎn)的主要配置項(xiàng)，我的如下：
permalink: /:year/:month/:day/:title.html #博文的固定鏈接 paginate: 10 #分頁時(shí)每頁博文數(shù)量 author: #自定義常亮name: 閆肅email: yansu0711@gmail.comlink: http://yansu.org title: 閆肅的博客 #自定義常量 locals: #自定義常量tags: 標(biāo)簽about: 關(guān)于 active: 技術(shù) #自定義常量 subscribe_rss: /pages/atom.xml #訂閱地址 markdown: redcarpet #markdown解釋器這里的自定義常量可以在模板中使用，以后有修改的時(shí)候就不需要跑去改代碼了。尤其是對一些私人的選項(xiàng)，可以在這里定義。現(xiàn)在我的博客中出了disqus和googleanalytics外都直接在這里設(shè)定就好了。
域名配置
CNAME這個(gè)文件寫明了這個(gè)站點(diǎn)的域名，如果不喜歡username.github.io的話，可以像我一樣改掉
yansu.org改法只要在這個(gè)文件中寫入域名就可以了。不過你需要去域名服務(wù)商那里設(shè)定域名解析規(guī)則。
只要把主機(jī)記錄為@,www的記錄值寫成username.github.io就好了。
博客存放
_posts下的所有目錄中的所有博客，都會被Jekyll處理成為靜態(tài)的html文件，然后放在_site下。我這里沒有_site目錄，是因?yàn)槲以?gitignore文件中把這個(gè)目錄屏蔽掉了，它不會上傳到Github上。
_site/ _drafts/ .DS_Store以上是我的.gitignore文件內(nèi)容。
在_posts下的符合YYYY-MM-DD-xxxxxx.md的文件，都會被Jekyll認(rèn)定為博客內(nèi)容。我在_posts下又新建了一些文件夾，主要是方便自己本地管理博客。
在上述這些文件中，必須先定義一些配置項(xiàng)，例如這篇博客的md文件中，開頭是這樣的：
layout: post #這個(gè)博客的布局文件 title: 在Github上搭建自己的Jekyll博客 #博客標(biāo)題 category: 工具 #博客分類 tags: Jekyll #博客標(biāo)簽 keywords: Jekyll,Github #自定義常量 description: #自定義常量除了自定義常量外的必須包含進(jìn)去，自定義變量在這個(gè)布局中可以訪問。
模版文件
剩余的目錄，基本都屬于模板文件了，我解釋一下各自的作用：
- _includes 可以在模板中隨時(shí)包含的文件
- _layouts 布局文件，在博客頭配置中可以選擇
- pages 站內(nèi)固定的頁面
- public 公共資源，包括js,css,img等，還有我博客中調(diào)用的圖片，我都放這里
- index.html 站點(diǎn)的首頁，整個(gè)站的入口文件
- sitemap.txt 給搜索引擎看的，如何爬取這個(gè)站
創(chuàng)建自己的主題
上面講了如何布局好站內(nèi)文件結(jié)構(gòu)，接下來主要就是如何創(chuàng)建一個(gè)自己的主題了。
布局文件是整個(gè)主題最重要的文件，這些文件告訴Jekyll如何去形成一個(gè)html頁面。
首先我說一下我最基礎(chǔ)的page.html文件，因?yàn)樗鼪Q定了入口文件index.html的布局。
layout: base<div class="row"><div class="col-md-12 aside3-title"><br><h2 id="#identifier">{\{ page.title }}</h2></div><div class="col-md-12 aside3-content"><div id="page-content">{\{ content }}</div><hr>{\% include disqus.html %}</div> </div>從這里可以看到這個(gè)文件寫起來一點(diǎn)都不復(fù)雜，但是為什么開頭還有個(gè)layout呢？因?yàn)樗膊皇亲罨镜牟季治募?#xff0c;最基本的是base.html，我們看一下它的內(nèi)容。
<!doctype html> <html> <head>{\% include header.html %} </head> <body><div class="container"><div class="row">{\% include navside.html %}<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 aside3"><div id="container"><div id="pjax">{\{ content }}</div></div></div></div></div>{\% include footer.html %}{\% include googleanalytics.html %} </body> </html>這個(gè)文件就更像一個(gè)HTML文件了，用PHP或者Python寫過web應(yīng)用的人看到{\% %}這樣的標(biāo)簽應(yīng)該不陌生，這不就是模板標(biāo)簽嘛。其實(shí)Jekyll也是借用了一下模板系統(tǒng)的，官網(wǎng)說明在這里，看到開頭第一句講的它用了Liquid了吧。如果Jekyll的文檔不能滿足你的話，可以去Liquid那里查查。
我解釋一下base.html中幾個(gè)標(biāo)簽的功能。
- {\% include header.html %} 從_includes中把header.html包含進(jìn)來放在這里
- {\% include navside.html %} 同上
- {\{ content }} 這句的作用是將繼承這個(gè)Layout的文件中的代碼，放在這里
所以再看page.html文件就很容易了，它就是把配置項(xiàng)下面的內(nèi)容，填補(bǔ)到base.html中的{\{ content }}處形成了一個(gè)文件。那么page.html中的{\{ content }}做什么用呢？因?yàn)閯e人也可以以page.html來作為自己的布局文件。
入口文件index.html就是這么干的：
layout: page title: 首頁 ...這里看到選擇了page作為布局文件，那么title干嘛用的呢？其實(shí)它是在被包含的header.html中被用到了。來看看header.html怎么寫的：
<meta charset="utf-8"> <title>{\{ page.title }} | {\{ site.title }}</title> <meta name="author" content="閆肅"> {\% if page.keywords %}<meta name="keywords" content="Jekyll,Github"> {\% endif %} {\% if page.description %}<meta name="description " content=""> {\% endif %}...這里又使用了一些新標(biāo)簽——{\{ }\}，這個(gè)標(biāo)簽就是用來書寫變量的，通過在配置處配置變量，或者使用系統(tǒng)的自定義變量，可以輕松改變頁面內(nèi)的一些元素或者內(nèi)容。
系統(tǒng)變量查詢可以去這里
其實(shí)整個(gè)主題書寫就是這么簡單，如果有不清楚的可以再看看官網(wǎng)的文檔。動(dòng)一動(dòng)手就非常明白了。
插入圖片
很多人感覺用Jekyll最不方便的就是插入圖片了，其實(shí)我也是這么覺得的。所以只能自己去想些辦法。
圖片統(tǒng)一存放
圖片我都放在了/public/upload下，所以我在插入圖片的時(shí)候只要用就可以了。
方便的圖片導(dǎo)入
導(dǎo)入圖片的方式是我將upload文件夾做了個(gè)軟連接，放到mac的dock上就行了，有圖片要用的時(shí)候直接往里面一拖。
方便的截圖
很多時(shí)候圖片都是現(xiàn)截取的，比如用QQ的截圖工具，或者系統(tǒng)的截圖工具，但是他們截取完都存放在了user/Pictures里面，來回移動(dòng)太累了。我這里介紹一個(gè)Mac下的一個(gè)工具——Trickster，看圖
這個(gè)工具可以看到剛剛修改過的圖片，而且還有一個(gè)收藏的文件夾，我每次截取完圖以后，從左邊往右邊一拖，然后在markdown中就可以繼續(xù)書寫了。一點(diǎn)都不耗時(shí)。
本地預(yù)覽及提交
本地預(yù)覽自己的修改很容易，只要進(jìn)入username.github.io目錄，執(zhí)行
jekyll serve然后訪問http://localhost:4000就OK了，安裝Jekyll的方式自行谷歌吧…
自己預(yù)覽過沒有問題以后，就提交到服務(wù)端吧，Git三步走
git add xxx git commit -m "xxx" git push其他
我覺得自己的這個(gè)主題設(shè)定的算是比較好修改和移植的了，如果大家有什么問題，可以盡管問。
另外一些特別的功能，比如三欄、評論、谷歌分析，這些都不難，相信你稍微打開Github讀一下這個(gè)主題的代碼就很快明白了。
代碼地址戳這里
from: http://yansu.org/2014/02/12/how-to-deploy-a-blog-on-github-by-jekyll.html?utm_source=tuicool&utm_medium=referral
總結(jié)
以上是生活随笔為你收集整理的在Github上搭建Jekyll博客和创建主题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于计算机视觉（随谈）
- 下一篇： 使用Github Pages建独立博客