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