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

    基于Github和Octopress搭建属于自己的博客

    ChengYinZju发表于 2014-04-11 14:10:07
    love 0

    前言

    从小我就相信“好记性不如烂笔头”这句谚语,所以搭Blog想法在我的脑海中已经酝酿了很久。刚工作那会就想利用Blog来记录工作中所积累的知识,对此我也进行了一些尝试,但最终因为国内的一些博客站点糟糕的排版、设计、代码高亮等等各种原因而放弃了。之后的一段时间由于工作忙碌、其他各种事情以及犯懒的缘故一直没有把这件事情落实下来。最近在项目进行的过程中发现自己对之前碰到过的一些技术问题的记忆逐渐变得模糊起来,于是才把搭建Blog这件事情重新提上了日程。经过一番Google之后我发现现在的程序猿们都偏向于Octopress这个开源的框架加上Github Pages服务来搭建Blog,看上非常的高大上,排版、代码高亮都做得非常棒,以Markdown写Blog的方式也非常符合我的日常工作习惯,于是决定立马付诸行动。


    安装Octopress

    这里是Octopress的官方指南,各位可以按照其中的步骤进行安装,下面的文字只是记录了我个人的安装过程,可以为大家提供一些参考。

    由于Octopress的使用需要Ruby,于是搭环境就这条路上的第一只拦路虎。Ruby版本繁多并且版本之间向下兼容做的不好,所以基于Ruby所做的框架大多要求特定版本的Ruby才能正常运行。

    Octopress要求的是Ruby1.9.3,MacOSX自带的Ruby版本是2.x的,所以需要利用一些工具来安装低版本的Ruby。Octopress的官方指南推荐使用的是RVM和rbenv。在安装的过程中我受限使用了RVM,但碰到了一些莫名的问题无法解决,最后还是使用了rbenv。

    安装rbenv

    这里我使用Homebrew来安装rbenv,如果你没有Homebrew,打开终端,使用以下命令安装吧。

    1
    
    $ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

    有了Homebrew就可以安装rbenv了

    1
    2
    3
    
    $ brew update
    $ brew install rbenv
    $ brew install ruby-build

    安装Ruby

    使用rbenv安装1.9.3版本的ruby,一开始我安装的是1.9.3-p0的版本,但出现了一些错误,在搜素如何结果过程中发现@Peter潘在blog中写到可以尝试用1.9.3-p125,经过尝试成功的安装上了Ruby1.9.3-p125

    1
    2
    3
    4
    
    $ rbenv install 1.9.3-p125
    $ rbenv local 1.9.3-p125
    $ rbenv rehash
    $ ruby --version #ruby 1.9.3p125 (2012-02-16 revision 34643)

    安装完成后可以用ruby —version进行验证

    安装Octopress

    安装Ruby完成后就按照官方指南安装Octpress

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #clone octopress
    $ git clone git://github.com/imathis/octopress.git octopress
    $ cd octopress
    
    #安装依赖
    $ gem install bundler
    $ rbenv rehash
    $ bundle install
    
    #安装octopress默认主题
    $ rake install

    部署

    接下来需要把Blog部署到github上去,第一步要做的是去github创建一个username.github.io的repo,比如我的就叫msching.github.io。

    然后运行以下命令,并依照提示完成github和Octopress的关联

    1
    
    $ rake setup_github_pages

    创建博客

    生成博客

    1
    2
    
    $ rake generate
    $ rake deploy

    把生成后的代码上传到github

    1
    2
    3
    
    $ git add .
    $ git commit -m 'create blog'
    $ git push origin source

    完成后等待一段时间后就能访问http://username.github.io看到自己的博客了

    修改配置

    配置文件路径为~/octopress/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    url:                # For rewriting urls for RSS, etc
    title:              # Used in the header and title tags
    subtitle:           # A description used in the header
    author:             # Your name, for RSS, Copyright, Metadata
    simple_search:      # Search engine for simple site search
    description:        # A default meta description for your site
    date_format:        # Format dates using Ruby's date strftime syntax
    subscribe_rss:      # Url for your blog's feed, defauts to /atom.xml
    subscribe_email:    # Url to subscribe by email (service required)
    category_feeds:     # Enable per category RSS feeds (defaults to false in 2.1)
    email:              # Email address for the RSS feed if you want it.

    编辑完成后

    1
    2
    3
    4
    5
    6
    7
    
    $ rake generate
    
    $ git add .
    $ git commit -m "settings" 
    $ git push origin source
    
    $ rake deploy

    安装第三方主题

    Octopress有许多第三方主题可以选择,首先在这里上寻找喜欢的主题,点击进入对应主题的git,一般在readme上都会有安装流程

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    #这里以安装allenhsu定制的greyshade主题为例,原作者是shashankmehta
    $ git clone git@github.com:allenhsu/greyshade.git .themes/greyshade
    
    #Substitue 'color' with your highlight color
    $ echo "\$greyshade: color;" >> sass/custom/_colors.scss 
    
    $ rake "install[greyshade]"
    $ rake generate
    
    $ git add .
    $ git commit -m "theme" 
    $ git push origin source
    
    $ rake deploy

    定制第三方主题

    使用第三方主题也并非是一个“拎包入住”的过程,其中必然会有一些需要定制的地方。定制的过程中会涉及一些web相关的知识,但对于各位来说应该都并非难事。

    例如刚安装完greyshade之后我们会发现左边navigation上的About me是指向作者的个人主页,我们需要把这个文字连接定向到自己的个人主页上。

    这个aboutme对应的html为/source/_includes/custom/navigation.html

    1
    2
    3
    
  • Blog
  • About
  • Archives
  • 把其中的http://about.me/shashankmehta替换成需要的url,替换完之后

    1
    2
    3
    4
    5
    6
    7
    
    $ rake generate
    
    $ git add .
    $ git commit -m "theme" 
    $ git push origin source
    
    $ rake deploy

    支持中文标签

    目前版本的Octopress会在/source/blog/categories下创建一个index.markdown来作为分类的首页,但这个首页在标签有中文时会出现无法跳转的情况,原因是因为在出现中文标签时Octopress会把文件的路径中的中文转换成拼音,而在Category跳转时是直接写了中文路径,结果自然是404。解决方法是自己实现一个分类首页并处理中文。

    首先按照这里的方法实现index.html

    将plugins/category_list_tag.rb中的

    1
    
    category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)

    替换成

    1
    
    category_url = File.join(category_dir, category.to_url.downcase)

    这样你的博客就可以支持中文标签的跳转了。


    写博客

    经过上面几部后,博客已经成功搭建,现在就可以开始写博文了。

    创建博文

    1
    2
    3
    4
    5
    6
    7
    
    #如果用的是终端
    $ rake new_post['title']
    
    #如果用的是ZSH
    $ rake "new_post[title]"
    #或者
    $ rake new_post\['title'\]

    生成的文件在~/source/_posts目录下

    编辑博文

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #...markdown写博文
    
    $ rake preview #localhost:4000
    
    $ rake generate
    
    $ git add .
    $ git commit -m "comment" 
    $ git push origin source
    
    $ rake deploy

    参考资料

    • http://octopress.org/
    • http://blog.devtang.com/blog/2012/02/10/setup-blog-based-on-github/
    • http://www.cnblogs.com/peterpan507/p/3538057.html
    • http://biaobiaoqi.me/blog/2013/03/21/building-octopress-in-github-mac/
    • http://biaobiaoqi.me/blog/2013/07/10/decorate-octopress/
    • http://yanping.me/cn/blog/2012/01/07/theming-and-customization/


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