首先貼一下我的新博客地址: http://findingsea.github.io
用Octopress在GitHub上搭建博客已經不是什么新鮮事了,網上的教程也多了去了,大題的方法什么都差不多,這篇Blog就把這些資源總匯一下,然后再加幾點我遇到的問題和解決辦法。
搭建和配置
搭建的大致過程大概包括:安裝Ruby --> 安裝Octopress --> 配置Octopress --> 部署到GitHub上 --> 提交博客。我主要參考的是破船的這篇教程——《利用Octopress搭建一個Github博客》。一路按教程走下來大問題應該不會有,但是小問題可能就不斷了,這待會會講到。
其他比較推薦的教程還有,唐巧的這篇《象寫程序一樣寫博客:搭建基於github的博客》(好吧,他還把『像』寫錯了)。這里面還提到了一些提高訪問速度的技巧和介紹了一個支持微博評論的工具,都挺有用的。
另外,還有這篇《Octopress - 像黑客一樣寫博客》,介紹地非常詳細,並介紹了很多個性化配置的技巧,其中對CSS的修改我覺得非常值得學習和借鑒。
//--- 2013-09-21 update ---//
以及這篇《Octopress博客問題解決方案與技巧》,里面匯總了很多Octopress的設置技巧,在首頁輸出摘要的設置方法和zsh報錯的原因(下面會提到),我都是從這篇文章里面找到。
遇到的問題
安裝失敗問題
在運行下面這些語句的時候,終端直接就沒反應了,然后過很久報error,據說是訪問的地址可能被牆了,但是我在瀏覽器里訪問http://rubygems.org/這個地址是可以的,所以就很糾結,當時就卡在這里下不去,最后無奈就多試了幾次,結果就好了。你只能服了天朝的網絡了。(從目前情況來看,應該識沒有被牆,如果報類似could not download這種錯誤,只能多試幾次,也沒別的辦法了)
gem install bundler
rbenv rehash # If you use rbenv, rehash to be able to run the bundle command
bundle install
引號問題
根據唐巧的教程,新建文章的指令應該是:
rake new_post["title"]
然后在相應的markdown文件中頭部自動生成的信息中會有:
title: "title"
當時當我按照這個指令去執行的執行的時候,終端報錯:
zsh: no matches found: new_post[title]
我在網上找到的解決辦法是將指令改成:
rake 'new_post["title"]'
這樣創建新文章是成功了,但是立馬引發了另一個問題。生成好文章之后,執行rake generate
指令,終端報錯:
/Users/findingsea/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/1.9.1/psych.rb:203:in `parse': (<unknown>): did not find expected key while parsing a block mapping at line 2 column 1 (Psych::SyntaxError)
from /Users/findingsea/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/1.9.1/psych.rb:203:in `parse_stream'
from /Users/findingsea/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/1.9.1/psych.rb:151:in `parse'
from /Users/findingsea/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/1.9.1/psych.rb:127:in `load'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/lib/jekyll/convertible.rb:33:in `read_yaml'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/lib/jekyll/post.rb:39:in `initialize'
from /Users/findingsea/Workspace/Github/octopress/plugins/preview_unpublished.rb:23:in `new'
from /Users/findingsea/Workspace/Github/octopress/plugins/preview_unpublished.rb:23:in `block in read_posts'
from /Users/findingsea/Workspace/Github/octopress/plugins/preview_unpublished.rb:21:in `each'
from /Users/findingsea/Workspace/Github/octopress/plugins/preview_unpublished.rb:21:in `read_posts'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/lib/jekyll/site.rb:128:in `read_directories'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/lib/jekyll/site.rb:98:in `read'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/lib/jekyll/site.rb:38:in `process'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/gems/jekyll-0.11.2/bin/jekyll:250:in `<top (required)>'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/bin/jekyll:23:in `load'
from /Users/findingsea/.rvm/gems/ruby-1.9.3-p448/bin/jekyll:23:in `<main>'
當時差點沒嚇死,以為怎么了,把關鍵錯誤描述上網搜了下,找到了這篇《Linked List Posts: From Movable Type to Octopress》這個老兄(暫且認為是男的吧)和我遇到了一樣的錯誤,他新建的markdown文件里title的內容里,出現雙引號嵌套雙引號,這違反了markdown的語法規則,所以解析出錯了。我立馬查看了我新建的問題,果然如此:
title: ""title""
着就相當於中間的title不包含在任何引號中,所以生成的時候會報錯。最后我把指令改成如下所示,就一切正常了。
rake 'new_post[title]'
至於原因現在還不是很清楚,我懷疑很有可能是shell造成的,我用的zsh,而教程上一般用bash的比較多。
//--- 2013-09-21 update ---//
上面提到的問題已在《Octopress博客問題解決方案與技巧》中找打,的確是shell引起的問題,用zsh的同學可以借鑒下。
字體問題
由於對字體方面有潔癖,所以在這上面耗費了很久,看了很多博客采用的字體方案,其中Aiur最讓我喜歡,尤其是正文的英文字體,所以我立馬留言向博主詢問他采用的是哪種字體,最后得知是Google的開源字體Open Sans。
Octopress字體的設置文件是:sass/custom/_fonts.scss,其中$heading-font-family
定義的是文章標題的字體,$header-title-font-family
定義的是博客標題的字體,$header-subtitle-font-family
定義的是博客子標題的字體,$sans
和$serif
定義的是正文的字體,$mono
定義的是代碼的字體。這里需要注意的是,/sass/custom/_style.scss里定義的樣式會覆蓋其他地方定義的樣式,但唯獨_font.scss里的這幾個值不會被覆蓋,也就說如果你在_fonts.scss里已經定義了$mono
的值,還想在_style.scss中修改<code></code>
的字體樣式是不行的,最后渲染出的結果還是$mono
的字體。(一開始我不知道這一點,在_style.scss里折騰了好久)。
特別說明的是我對編程字體尤其在意,我最喜歡的是Adobe的開源字體Source Code Pro,而且是跨平台的,不過這在很多機器上不一定有裝,而且貌似GoogleFonts沒有收錄這個字體,所以我依次補充了Mac上最適宜的編程字體Monaco,Windows上最適宜的編程字體Consolas,和Ubuntu上最適宜的編程字體Ubuntu Mono,這里的設置是依次序尋找到第一個可以使用的字體。(也就說瀏覽器會先尋找本機是否裝有Source Code Pro,如果沒有就尋找下一個Monaco,以此類推,直到找到一個可用的字體進行渲染,另外,我所選的三款字體都是三個平台默認安裝的,這樣可以最大程度地保證代碼閱讀質量)
下面是我的_fonts.scss文件中的定義:
$sans: Open Sans;
$serif: Open Sans;
$mono: Soure Code Pro, Monaco, Consolas, Ubuntu Mono;
$heading-font-family: "PT Serif",Georgia,"STHeiti","SimHei","Helvetica Neue",Arial,sans-serif;
$header-title-font-family: "Futura", sans-serif;
$header-subtitle-font-family: "Futura", sans-serif;
最后說一點,在上文中提到的唐巧的《象寫程序一樣寫博客:搭建基於github的博客》中,他提到了一個優化博客load速度的方法是:刪除/source/_includes/custom/head.html文件中的谷歌字體,因為GFW的關系,這部分載入會特別慢。但這會引發一個問題就是你無法使用PT Serif和Open Sans這些優質的谷歌字體了,解決方法是可以講他們下載到本地,然后在/sass/custom/_style.scss中添加:
css @font-face { font-family: Open Sans; src: url(fonts/OpenSans-Regular.ttf) }
不過這種方法的弊端在於需要把你用到的每個本地可能沒有安裝的字體都下載下來,我嫌太麻煩,就沒有按這種方法,而且英文字體庫不像中文字體庫動輒上M,基本都維持在K這個級別,速度慢了這么一點還是可以忍受的。