Jekyll博客搭建

因爲博客已經換了搭建平臺和主題，以前文章的評論已丟失，在這裏對那些作過評論的網友說聲抱歉。

把博客平臺換成Jekyll，主要緣由是這款令我滿意的主題，並且Jekyll搭建和操做也很是簡單。下面介紹在Mac OS X環境下如何經過Jekyll搭建本身的我的博客。

搭建環境

首先安裝必要工具

• Ruby：Mac OS X 10.5以上都自帶

• RubyGems：Mac OS X 10.5以上都自帶

• NodeJS：命令行輸入node -v檢查是否已安裝，下載地址：http://nodejs.org/

• Xcode Command-Line Tools： 安裝Xcode會自動安裝，檢查Preferences → Downloads → Components是否有Command-Line Tools這項提供下載，若是沒有說明已安裝

• git：命令行輸入git --version檢查是否已安裝，下載地址：http://sourceforge.net/projec...

因爲國內網絡問題，必需要替換下gem鏡像源，除非你有其餘安全上網的方法

// 移除官方鏡像源
gem sources --remove https://rubygems.org/
// 添加淘寶鏡像源，或者其餘鏡像地址
gem sources -a http://ruby.taobao.org/

驗證是否替換成功gem sources -l

*** CURRENT SOURCES ***
http://ruby.taobao.org/

而後先更新下 gem

sudo gem update --system
// MAC 系統版本若是是 El Capitan 使用下面這個命令
sudo gem update -n /usr/local/bin --system

安裝Jekyll

sudo gem install jekyll
// MAC 系統版本若是是 El Capitan 使用下面這個命令
sudo gem install -n /usr/local/bin jekyll

若是你在後續預覽 jekyll server 博客的發生

Deprecation: Collection#map should be called on the #docs array directly.
                    Called by /Users//Documents/blog/_plugins/rssgenerator.rb:46:in `block in generate'.

相似的錯誤，請安裝低於 3.0版本的 jeykll

sudo gem install jekyll -v '<3.0.0'
// MAC 系統版本若是是 El Capitan 使用下面這個命令
sudo gem install -n /usr/local/bin jekyll -v '<3.0.0'

安裝主題

1. Fork我使用的這款主題 kasper

2. 把fork後的項目名改成：xxxxxx.github.ioxxxx爲你的github用戶名，好比個人用戶名是bawn，那麼就須要修改爲bawn.github.io，這個也正是你博客的地址。
   點擊項目右側 settings 菜單，進入後修改 Repository name就是了。

完成這兩步以後，在你的瀏覽器上輸入xxxxxx.github.io或者xxxxxx.github.com，就會出現你我的博客的頁面(可能須要等待幾分鐘)，這時候你的博客上 應該有一篇主題做者的默認文章叫作Welcome to Jekyll!

發表文章

// 進入主題須要放置的目錄
cd Documents
// 克隆剛纔fork的主題
git clone https://github.com/xxxx/xxxxx.github.io

完成以後你的Documents目錄下應該有個xxxxx.github.io的文件夾（稱之爲博客目錄），_posts文件夾中的markdown文件就是所發表的文章的源文件。

新建一篇文章的命名規則是xxxx-xxx-xx-xxxxxxx.md，好比我這篇文章的命名是2015-01-23-bolgSetUp，裏面內容也須要必定的規則，下面是這篇文章的頭部的寫法

---
layout: post
title: "Jekyll博客搭建"
date: 2015-01-23
comments: true
categories: iOS
tags: [Jekyll]
keywords: Jekyll blog
description: Jekyll博客搭建
---

因爲博客已經換了搭建平臺和主題，以前文章的評論已丟失，在這裏對那些作過評論的網友說聲抱歉。

Jekyll 官方文檔比較坑，推薦的是用Liquid方式的markdown解析語法來寫代碼塊，好比是這樣的：

其實Jekyll還支持redcarpet解析器，因此使用 markdown GFM fenced code 代碼塊寫法也能夠:

def foo
  puts 'foo'
end

固然若是你用的是Objective-C代碼，那麼應該就是這樣的

AppDelegate *appDeleagte = [UIApplication sharedApplication].delegate;

本地預覽

命令行進入博客目錄，執行：

jekyll server // 簡寫 jekyll s

在瀏覽器地址欄中輸入：http://localhost:4000/ 就能夠進行本地預覽。新增、修改、刪除文章均可以實時的看到，只須要刷新頁面，能夠試着修改默認那篇文章看看效果。

發佈文章

發佈文章和提交git項目修改同樣，基本流程大概是這樣的，博客目錄下執行

git add .
git commit -m 'xxxxx'
git push origin master

完成以後應該就能看到新的文章已經在你的我的博客主頁上了。

替換谷歌字體庫

網站打開慢？剛搭完博客我也在鬱悶這個事，而後經過google的網站分析發現是JS加載google的字體庫形成找到/_layouts/default.html，把下面代碼中的Google免費字體庫的域名googleapis替換成360提供的代理useso的

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
// 替換後
<link rel="stylesheet" type="text/css" href="//fonts.useso.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

配置博客的相關信息

在_config.yml文件中修改，好比個人配置以下

name: Bawn
description: Blogging about stuffs
meta_description: "Bawn's Blog"

markdown: redcarpet
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]

highlighter: pygments
logo: false
paginate: 20
baseurl: /
domain_name: 'http://bawn.github.io/'
google_analytics: 'UA-XXXXXXXX-X'

# Details for the RSS feed generator
url:            '/rss.xml'
author:         'Bawn'

添加多說評論

將 _layouts/post.html 中的 <footer class="post-footer"> 到 </footer>之間的內容替換爲多說的評論代碼，好比我替換後是這樣的:

不過多說代碼中的data-thread-key 目前不知道怎麼賦值。

自定義代碼高亮

若是不滿意這個主題的代碼高亮，也能夠輕鬆定製，好比配置我如今用的高亮樣式

1. 在Bootstrap中文網 提供的 CDN 連接找到你喜歡的樣式連接，好比我用的是樣式是hopscotch對應的是相應的樣式效果能夠到highlightjs網站查看，而後點擊複製<link>標籤

2. 找到_layouts/default.html並編輯，找到<!-- Customisation -->代碼，直接在下面粘貼剛纔複製的代碼，而後head裏面看上去會是這樣

3. 仍是在_layouts/default.html，找到<script type="text/javascript" src="/assets/js/index.js"></script>在下方添加如下代碼

   <script type="text/javascript" src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
       <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
       <style type='text/css'>
       .hljs {
         white-space: pre;
         word-wrap: normal;
         overflow-x: auto;
       }
       </style>

最後

若是直接fork個人項目進行修改，那麼自定的這些樣式也會被保留，不用折騰替換谷歌字體庫、自定義代碼高亮之類的事情，可是必須注意如下幾點

1. 在 _layouts/default.html底部有個人百度統計代碼，請自行配置你本身的代碼

2. 在 _layouts/post.html底部有個人disqus插件代碼，請自行配置你本身的代碼或者使用多說評論

3. 刪除_posts文件下的全部文件

4. 修改about.html