IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Hello Octopress

    imtxc发表于 2012-03-18 11:53:00
    love 0

      以前也折腾过好几个博客系统,开始使用过163等网站提供的博客,后来学习ASP,使用PJBLOG搭建了一个博客,后来学习php,也就顺便转到了wordpress,但总是不太满意,ASP和PHP的空间不好搭建,其他网站的博客又不容易定制,总有很多不想要的内容,wordpress是一个伟大的博客系统,但是依赖数据库,速度也不是很给力,后来学习编程,接触到了git和github,从github的page功能又了解到了Octopress,它的很多特色正是我所需要的,比如支持Markdown语法,使用纯静态页面,使用git做版本控制,又有着一个看起来挺酷的默认模版,支持语法高亮以及disqus、Google Analytic,最重要的是,有了在github上面搭建一个octopress的博客非常容易,这篇博客就记录我在github上面搭建octopress,以及配置JiaThis分享功能,有言评论功能以及侧边栏新浪微博的过程 。

    安装环境

    首先安装curl和git

    1
    2
    
    $ sudo apt-get install curl
    $ sudo apt-get install git-core
    

    安装rvm

    1
    
    bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )
    

    把rvm写入zshrc

    1
    2
    
    echo '[[ -s $HOME/.rvm/scripts/rvm ]] && source $HOME/.rvm/scripts/rvm' >> ~/.zshrc
    source ~/.zshrc
    

    如果使用bash的话

    1
    
    echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
    

    然后source ~/.bash_profile 或者source ~/.zshrc 使配置生效。 安装ruby1.9.2

    1
    
    rvm install 1.9.2
    

    使用ruby并设置为默认ruby并覆盖系统

    1
    
    rvm use 1.9.2 --default
    

    把淘宝的镜像加到gem的镜像列表里

    1
    2
    3
    4
    5
    
    gem sources --remove http://rubygems.org/
    gem sources -a http://ruby.taobao.org/
    gem install jekyll
    gem install rails
    gem install rake
    

    安装配置octopress

    以上就安装好了octopress所需要的环境 然后在github上创建一个名为imtxc.github.com的仓库,这里imtxc是我在github上的用户 名,现在就可以安装octopress了。

    1
    2
    3
    4
    
    git clone git://github.com/imathis/octopress.git octopress
    cd octopress
    gem install bundler
    bundle install
    

    如果提示这样的错误:

    1
    2
    3
    4
    5
    
    rake aborted!
    You have already activated rake 0.9.2.2, but your Gemfile requires rake 0.9.2.
    Using bundle exec may solve this.
    
    (See full trace by running task with --trace)
    

    就bundle update,然后rake install. 对octopress进行简单的配置,修改文件:_config.yml,按照注释修改博客名称,副标题,作者名。我打算在后面配置使用国内的weibo、有言来提供评论功能,因此这里的twitter和disqus不做修改。同时修改文件/source/_includes/custom/head.html 删除掉其中的内容。 这里的Google Analytics是google提供的统计功能,强烈建议加上,在google analytics注册并添加网站名称之后,在这里填写ID即可。 如果需要使用自己的域名比如我的www.imtxc.com,那么需要

    1
    
    echo 'www.imtxc.com' >> source/CNAME
    

    然后在域名服务商的页面添加www的CNAME指向imtxc.github.com 简单的配置完以后就可以生成博客了:

    1
    
    rake generate
    

    然后创建博客和github上仓库的连接:

    1
    
    rake setup_github_pages
    

    按照提示填入github项目网址,比如:

    1
    
    git@github.com:imtxc/imtxc.github.com.git
    

    现在就可以发布到github上面了

    1
    2
    
    rake deploy
    git push -u imtxc master
    

    然后创建一个source分支来保存博客源码:

    1
    2
    3
    4
    
    git add .
    git commit -m 'message'
    git push origin source
    ---
    

    这样就在github上搭建好了octopress博客,需要写文章的话只需要

    1
    
    rake new_post["Your Title of Your Article"]
    

    就会在/source/_post里面生成.markdown文件,使用markdown语法编辑文件然后发布:

    1
    2
    
    rake generate
    rake deploy
    

    如果需要在本地预览以后发布就在rake generate后 rake preview,这样就可一在浏览器中通过127.0.0.1:4000来预览博客。 octopress的其他配置 给octopress添加JiaThis和有言,参考了这里 这篇文章 我主要介绍一下如何配置评论和分享到微博功能。步骤如下:

    在_config.yml中增加一项:weibo_share: true,修改 source/_includes/post/sharing.html ,增加:

    1
    2
    3
    
    {% if site.weibo_share %}
    {% include post/weibo.html %}
    {% endif %}

    增加文件:source/_includes/post/weibo.html 访问 http://www.jiathis.com/ ,获取分享的代码 访问 http://uyan.cc/ ,获得评论的代码 将上面2步的代码都加入到weibo.html中即可

    在侧边栏添加新浪微博

    参考了这里,在source/_includes/asides下面创建一个weibo.html内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    {% if site.weibo_uid %}
    

    新浪微博

  • width="100%" height="450" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?width=0&height;=550&ptype;={% if site.weibo_pic %}1{% else %}0{% endif %}&speed;=0&skin;={{weibo_skin}}&isTitle;=0&noborder;=1&isWeibo;={% if site.weibo_show %}1{% else %}0{% endif %}&isFans;={{weibo_fansline}}&uid;={{site.weibo_uid}}&verifier;={{site.weibo_verifier}}"> {% endif %}

    同时,在_config.yml中加入相关设定

    1
    2
    3
    4
    5
    6
    7
    
    default_asides: [asides/recent_posts.html, asides/weibo.html, asides/github.html, asides/[Twitter][].html, asides/googleplus.html]
    weibo_uid: 1098907490
    weibo_verifier: abd54ad9
    weibo_fansline: 0 # 粉丝显示多少行
    weibo_show: true # 是否显示最近微博内容
    weibo_pic: true # 是否显示微博中的图片
    weibo_skin: 10 # 使用哪种配色风格,数字为从1开始的微博秀风格序号
    

    其中的weibo_uid和weibo_verifier是从微博秀生成的代码中取得的,其它则是显示设定。 在侧边栏添加其他内容比如about 或者版权协议,友情链接等的方法和这个一样。 在首页导航下面添加一个about页面:

    1
    2
    
    rake new_page[About]
    vim source/_includes/custom/navigation.html
    

    加入

    1
    
  • href="/About">about

    到现在为止,就完成了github上面octopress博客的安装以及配置,Just Enjoy It! 在其他计算机上使用已经部署好的octopress 在其他的系统上写博客的话,还是首先然装RVM和Ruby 1.9.2,然后

    1
    2
    3
    
    git clone -b source git@github.com:imtxc/imtxc.github.com.git octopress
    cd octopress
    git clone git@github.com:imtxc/imtxc.github.com.git _deploy
    

    安装依赖gems:

    1
    2
    
    gem install bundler # Install dependencies
    bundle install
    

    如果使用64位操作系统,需要在plugins/pygments_code.rb中添加RubyPython.configure :python_exe => 'python2.7' 就可以使用代码语法高亮了,rake deploy之后记得

    1
    2
    3
    
    git add .
    git commit -m 'initial source commit'
    git push origin source
    

    ps:这篇文章没有技术含量和原创性,主要用来练习使用Octopress和Markdown语法。 参考文章:

    1.在 Windows7 下从头开始安装部署 Octopress

    2.象写程序一样写博客:搭建基于github的博客

    3.为Octopress博客追加新浪微博侧栏



沪ICP备19023445号-2号
友情链接