用Octopress写博客

从昨天晚上折腾到现在终于把Octopress的环境搭好了,网上有很多搭建环境的例子,无奈有些说的不是很明确,东拼西凑了一些教程,这些都非本人原创,把我的经历给大家分享下,让大家少走弯路。

最近产生了写博客的想法,一方面想把自己的开发经历和技术经验分享出来,另一方面也希望在写作的过程中能加深自己的了解。个人比较喜欢喵神唐巧的技术博客的风格,喵神的Blog模板没有尝试,主要参考唐巧的文章,完成了本文的写作环境的搭建。

搭建

搭建环境主要参考这里http://blog.devtang.com/blog/2012/02/10/setup-blog-based-on-github/,大家直接跳过去看就好了。主要说说我的经验,ruby的环境不需要1.9.3的,Yosemite默认的2.0是Ok的,所以没必要纠结地去装gcc 4.2,直接装Octopress就行。gem install bundler相当地慢,曾经就因为这个放弃了一次,这个没被墙,就是慢,耐心等一下。

文章里漏掉的一点就是设置octopress与github-pages的连接,第一次发布,在执行rake deploy之前,要先执行rake setup_github_pages,在输入提示中输入你的github-pages地址,比如我的git@github.com:wuwen1030/wuwen1030.github.io.git。大家在配置好,最好就不要手动去改github-pages的内容啦,这可能会导致发布失败噢,原因就是octopress的发布内容和github服务端的内容不一致造成的,deploy 时明明看到 git pull… 了,没搞懂,大家如果知道请指教一下。

deploy之后,发现和大神的Blog还是很不一样嘛,不知道从哪儿窜出来的各种英文,现在需要配置一下,定制自己的模板啦。

配置

唐巧的文章配置这块写的不是太细,谷歌,DuckDuckGo被各种屏蔽,只好求助度娘,配置主要是参考http://www.cnblogs.com/oec2003/archive/2013/05/31/3109577.html。大家自行阅读吧,写的很细了。配置这块还有很多可研究的,待以后深入研究再补充上来。

至此,你已经得到了一个看起来很酷的blog模板了,可以拿出来装一装了(Octopress号称就是给Hacker用的么),唯一的问题就是访问速度很慢,不过没关系,已经有解决方案了,拿来主义的博主再次发出链接大招http://blog.devtang.com/blog/2014/06/02/use-gitcafe-to-host-blog/,一步步按照文章里的来,像我这样的小白也能搞好。感谢方校长的GFW成功阻击境外反动势力对我国的渗透,即使切到GitCafe你的Blog访问速度依然很慢,查看你主页的源码,你会看到这个:

1
2
3
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

问题就在这里,替换掉Google的jquery和font链接,打开/source/index.html,做如下替换:

1
2
<!-- 替换jquery ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js-->
<script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

打开 source/_includes/custom/head.html,替换成如下代码:

1
2
3
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.useso.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.useso.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

后话

完成这些之后,你就可以像博主一样使用优雅的Markdown在这写作,推荐一个不错的Mac开源Markdown编辑工具