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