2015-05-09

基于octopress与github搭建个人博客

阅读次数:次

以下感谢胡杰的技术博客和 812lcl的博客的技术支持！

安装Ruby
首先要在本地安装好Ruby环境，幸运的是OS X系统默认的已经可以运行Ruby了，因此我们只需要执行以下命令查看当前Ruby的版本.（如果未安装请参考ruby）

ruby –version

安装git
确保电脑安装有git,在终端输入如下命令。（如果未安装请参考git）

git –version

安装Octopress
在终端输入如下命令

git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler
bundle install

安装Octopress默认主题

rake install

如果不想安装默认主题，可以设置其他主题

安装其他主题

首先找到这个主题的github地址，比如我这个博客用的主题是https://github.com/bkutil/bootstrap-theme.git,然后用git的clone方法把它下载到你本地博客的根目录的.themes文件夹中：

git clone https://github.com/bkutil/bootstrap-theme.git ./.themes/bootstrap-theme

下完之后你会发现在.themes文件夹下多了一个bootstrap-theme文件夹，这就是主题，然后进行安装，执行

rake install ['bootstrap-theme']

部署到github
配置github

首先需要在GitHub上创建一个仓库，并将仓库名称按照这样的方式进行命名：your_username.github.io。然后在终端输入如下命令，期间会要求你输入仓库的url，根据提示输入即可，格式如:git@github.com:your_username/your_username.github.io.git

rake setup_github_pages

生成html静态网页
在终端输入如下命令.

rake generate

部署到github服务器
在终端输入如下命令.

rake deploy

部署到gitcafe
-

对于Octopress，我们只需要每次提交网站内容时，执行完 rake deploy之后，再执行以下脚本即可（你可以将该脚本中的代码仓库地址换成你的，然后将其保存成一个脚本文件，需要时执行一下即可）：

cd _deploy

添加 gitcafe 源

git remote add gitcafe git@gitcafe.com:vence/vence.git >> /dev/null 2>&1

提交博客内容

echo "### Pushing to GitCafe..."
git push -u gitcafe master:gitcafe-pages
echo "### Done"%

大概解释一下以上内容，Octopress在发布时会将自己的 _delpoy目录切换到master分支，然后将生成的博客内容放到_delpoy目录中，然后执行git push操作。正常情况下，默认内容是push到github上的。我们执行的以上脚本，就是为该项目增加了一个名为gitcafe的远程仓库，然后将master分支push到gitcafe的gitcafe-pages分支。

写博客
Octopress为我们提供了一些task来创建博文和页面。博文必须存储在source/_posts目录下，并且需要按照Jekyll的命名规范对文章进行命名：YYYY-MM-DD-post-title.markdown。文章的名字会被当做url的一部分，而其中的日期用于对博文的区分和排序。

rake new_post[“title”]
rake generate
rake deploy

插件
评论和分享：友言和加网

octopress内置了disqus评论系统，不适合我国基本国情，所以需要用一些国内的第三方评论系统，如友言、多说，可以以微博、人人、QQ等账号登陆发表评论，网站通过验证后可以对评论进行分析，管理。

多说评论系统可参见为 Octopress 添加多说评论系统，不多做介绍。

我主要使用的是友言的一套评论系统及插件]，分享使用的是加网JiaThis。首先注册友言账号，否则无法进行后台管理。注册之后获得代码，添加到source/_includes/post/share_comment.html。加网点击这里，定制自己喜欢的样式，获得代码也添加到上述文件中。

share_comment.html文件中代码如下（每个人不同）：

<!-- JiaThis BEGIN -->
<div class="jiathis_style_32x32">
        <a class="jiathis_button_qzone"></a>
        <a class="jiathis_button_tsina"></a>
        <a class="jiathis_button_tqq"></a>
        <a class="jiathis_button_weixin"></a>
        <a class="jiathis_button_renren"></a>
        <a href="http://www.jiathis.com/share?uid=1850190" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
        <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1361705530382241" charset="utf-8"></script>
<!-- JiaThis END -->

<!-- Baidu Button BEGIN 
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare">
        <a class="bds_tsina"></a>
        <a class="bds_qzone"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_t163"></a>
        <a class="bds_hi"></a>
        <span class="bds_more"></span>
        <a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6839808" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
 Baidu Button END -->

<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1850190"></script>
<!-- UY END -->

其中有一段代码注释掉了，那是曾经添加的百度分享的代码，如果使用其他分享或评论，代码也可以添加到这。

现在功能代码在share_comment.html中了，下面需要使其显示到博文的底部。

首先在_config.yml中添加开关：

# comment and share
comment_share: true

然后在source/_includes/post/sharing.html中添加如下代码(请自行将下列代码中的”{“ 和 “}” 改成半角)：

｛% if site.comment_share %｝
    ｛% include post/share_comment.html %｝      
｛% endif %｝

最后需要使你的网站通过友言的验证，才可以进行后台管理，后台可以进行评论管理、社交影响力分析、和评论栏的风格功能设置。

其余插件请参考原文http://812lcl.com/blog/2013/10/26/octopressce-bian-lan-ji-ping-lun-xi-tong-ding-zhi/,在此感谢博主812lcl的博客