在github上为自己搭个窝


——用jekyll-bootstrap建立博客过程记录

本文为原创博文,如有转载,请注明出处及作者。
——by realasking

由于前段时间在百度贴吧的帐号无故被封,就决定将博客也从百度搬走了,早就听说github的博客功能不错,实现起来比较自由,苦于了解不足,加之没有时间,直到最近两天才动手,今天终于将环境调整完毕,故写作此帖以作记录,也供其它朋友参考。

这个博客,使用的是jekyll-bootstrap模板的the-program主题来进行搭建,在博客搭建过程中调整了布局,实现了图片外链、图片大小自动缩放

软件环境的安装

ruby的安装

$yaourt -S ruby 

github的注册

访问github,完成注册之后,点击Creat new repo按钮,创建一个名为用户名.github.com的repo,建立repo的时候初始化一个README.md。

git的安装

1
2
3
$yaourt -S git openssh
$ssh-keygen -t rsa -C "你的邮件地址"
$xclip -sel clip < ~/.ssh/id_rsa.pub

访问github,点击Account Settings按钮,点击SSH Keys,点击Add SSH Key,然后完成粘贴,再点击Add Key,并验证密码,然后执行以下命令进行测试:

$ssh -T git@github.com

git的环境配置

1
2
3
4
5
6
$git config --global user.name "用户名"
$git config --global user.email "你的邮件地址"
$mkdir 用户名.github.com && cd 用户名.github.com
$git init 
$git remote add origin https://github.com/用户名/用户名.github.com.git
$git pull origin master

所需gem包的安装

$gem install bigdecimal classifier colorator commander directory_watcher exifr fast-stemmer highline io-console jekyll json liquid minitest nil posix-spawn psych pygments.rb rake rdoc redcarpet RedCloth safe_yaml syntax test-unit trollop yajl-ruby

下载jekyll-bootstrap并安装the-program脚本

1
2
3
4
$git clone https://github.com/plusjade/jekyll-bootstrap.git ../用户名.github.com
$git remote set-url origin git@github.com:用户名/用户名.github.com.git
$rake theme:install git="https://github.com/jekyllbootstrap/theme-the-program.git"
$rake theme:switch name="the-program"

博客细节的调整

主页调整

编辑index.md,修改title,并在最后添加一行:

[更多文章](categories.html)

站点信息配置

编辑_config.ymlmarkdown: kramdown修改为markdown: redcarpettitle填上博客名字,个人信息往后填即可,不需要的注释掉。production_url :后的链接改成http://用户名.github.io;comments :是评论功能设置,provider : disqusshort name设置为用户名,这个需要稍后去disqus注册;analytics是网站运行情况分析,选google的就可以,tracking_id要换成在Google Analytics注册后给出的。

网站框架的调整

编辑assets/themes/the-program/css/style.css,调整了.body.unit-body.unit-foot的属性,固定右侧宽度,左侧自适应,并新建.unit-footb给真正的footer使用,也新建了.bodyb.unit-bodyb作为真正的页面主体对象,其中,.body.unit-body左浮动,.unit-foot右浮动,使用时要调整_includes/themes/the-program/default.html,在<div class="body">的作用范围内添加<div class="bodyb">的范围、在<div class="unit-body">内添加<div class="unit-bodyb">,这一部分特别感谢百度linux吧吧主8pm兄的指点,另外,一篇网文的帮助也很巨大。

此外,在8pm兄指点下还调整了网页字体设置,凡等宽字体的font-family均如下设置:

 font-family: 'Droid Sans Mono', 'DejaVu Sans Mono', 'Ubuntu Mono', Monaco, monospace, serif;

对于页面配色,将原来的黄色的字体,均调整为浅灰:#b6c3cd,相应的突出显示的黑色字体均调整为深灰:#495862,超级链接色彩由酒红色调整为三种色:#495862#8b959d#cadadc,然后<code><pre>环境均通过添加border-radius: 4px;进行圆角处理。

在该css文件中,加入了如下内容,以实现图片随网页大小自动缩放:

img {
    max-width: 100%;
    height: auto;
    width: auto\9;
    }

assets下新建了picsjss目录,用来存放网页图片和外部引入的javascript脚本。

博客功能的增强

github+jekyll虽然是一个不错的博客系统,但是要实际使用的话,其自带的东西还是远远不够的,需要进行一些调整和增强。

外链图片

github提供的免费空间有限,如果存储一些照片,是不够使用的,为了解决这个问题,需要使用外链图片。目前支持图片外链、且在linux下能正常使用的网站基本上都是外国的,特别是美国以及东欧一些小国的,经过试验,发现美国的photobucket网站不错,它提供2GB的免费存储空间和每月10GB的免费外链流量,速度很快,连通性很好,上传图片后直接点击share和复制链接的按钮即可拷贝外链,而且也没有语言障碍。当拷贝了外链之后,可以在新建的md文件中以如下方式贴图:

1
2
3
<div style="max-width:700px;">
   <img src="图片链接" alt="图片一" title="图片测试一" width="640" />
</div>

Feed订阅

我选用的是Atom,因此需要编辑default.html文件,将关于下的rss里的内容替换成如下内容:

 <li class="rss"><a href="http://用户名.github.io/atom.xml"><img src="http://用户名.github.io/assets/pics/Feed-icon.svg.png" alt="订阅" title="Feed" width="12" style="vertical-align:-21px"/>&nbsp订阅本站</a></li>

Feed-icon.svg.png是在网上找的一个Feed的图片文件。

农历显示

可以采用javascript的脚本来实现,在网上找到了一个脚本,显示效果刚好可以放在页面右上角,于是就做了一些修改,比如将脚本存放到jss下、调整了输出颜色、显示输出的语句放到了脚本的末尾,然后将在网页中引用它的语句放在3rd下,再用如下语句在default.html中加以引用:

1
2
3
  <div style="float:right" valign=bottom > 
     {% include 3rd/lunar %} 
  </div>

访问计数器

访问计数在一定程度上说明了博客的使用情况,是比较有用的工具,在本博客中,使用的是hitwebhunter所提供的,直接访问它们的网站,然后填写表单,就能获得一堆js语句,直接粘贴到博客模板中相应位置即可,在本博客中,采用了同农历脚本一样的处理办法,由include语句来引用。

站内搜索

站内搜索我选择的是Google Custom Search Engine,它的使用办法是:先注册Google邮箱,然后以自己的博客/站点注册Google分析,再注册Google CSE,注册之后,复制出V1版本的代码拷贝到default.html的对应位置,并调整.gsc-control-cseborder-colorbackground-colortransparent,然后要在Google CSE的设置页面上编入索引,会先弹出要求进行网站验证,由于前面已经注册了Google分析,所以验证很容易通过,通过验证后,点击特定网址,输入后,点击立即编入索引即可,还是有一定的延迟,不过会好很多。

另一个站内搜索的选择是Tapir,是用Atom/Rss Feed来进行搜索的,网上有人对此有详细介绍

公式支持

添加如下内容至default.html的头部:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

副标题支持

添加如下内容至post.html中第7行之后:

    <h4>{{ page.description }}</h4>

此后,凡文章写有description的,则该内容即为副标题显示。

针对IE的兼容性支持

使用了html5shiv,在该网站上按说明下载js文件,再放到合理位置,并修改default.html最前方内容为:

1
2
3
4
5
<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://用户名.github.io/js文件存放目录/html5shiv.js">
<![endif]-->
<html lang="zh_CN">

这里还是非常感谢8pm兄的建议和帮助。

写新博客和博客的发布

根据markdown语法规则在_posts下按年-月-日-名称.md规则写就是了,写好之后,执行jekyll serve,并用浏览器在localhost:4000地址预览,如果没问题,就用如下命令发布即可:

$git push origin master

题外话:令人抓狂的liquid代码高亮的写法

下面这个显示效果:

  <h4>{{ page.description }}</h4>

实际上要这么写才出得来:

 <h4>{{ “{{page.description “}}}}</h4>

详见第14条参考链接。

参考链接

1.github帮助
2.jekll-bootstrap
3.Disqus 我的评论我做主
4.Google Analytics
5.老生长谈:css实现右侧固定宽度,左侧宽度自适应
6.农历脚本
7.hitwebhunter
8.Google CSE
9.Tapir
10.使用Tapir实现jekyll的站内搜索功能
11.Mathjax
12.html5shiv
13.markdown
14.liquid tags

Published: July 15 2013

blog comments powered by Disqus