Create Blog Use Octopress and GitHub

注:本博文來作者的其他博客GeekerProbe,但是均爲原創,要獲得最佳閱讀效果請移步至GeekerProbe



介紹

現下大概每一個搞技術的人都會有一個技術博客,而GitHub又是廣大搞程序的人都知道的一個著名代碼託管網站,它的優點衆多,其中之一就是GitHub Pages,他是用來給當前的project作介紹說明之用的,鑑於此我們可以將自己blog放置上去,代碼交由GitHub託管,每次我們只需要發博文上去就好,對我們來說這是一件多麼爽快人心的事啊。Octopress就是這樣一款framework,它能部署在Github上,而且很方便使用,當把它配置好之後,幾條命令就可以將博文發佈上去,正如官網介紹的一樣A blogging framework for hackers.,像駭客一樣的寫博客,這很不錯我很喜歡,具體的介紹可以去官網看。

這兩者一結合就有了我現在的這個blog了,用它來記錄和分享我的學習之路上點點滴滴。網絡上有很多介紹安裝與配置方法的文章,官網的Documentation寫的也很好,推薦E文好的直接去官網。我在安裝與配置中也遇到了各種問題,不過在Google的幫助下都一一解決了,你需要懂一些ruby(jekyll),並且會使用git命令,還要使用markdown來書寫博文,這會讓你覺得是在寫代碼而不是在寫博文。不多說了現在記錄下我自己安裝與配置過程,供新手與日後自己需要時參考。

我主要參考的文章:

Octopress Documentation

http://ishalou.com/blog/2012/10/15/how-to-use-octopress/

http://mrzhang.me/blog/blog-equals-github-plus-octopress.html

git 簡易指南

安裝前準備工作

  1. 你需要一個GitHub的賬號,註冊不說了,已有的跳過。

  2. 你需要在你的機器上安裝並配置git官方文檔說的很清楚,這要用到terminal,也就是命令行,懶的人可以安裝可視化工具GitHub,我建議還是使用命令行,以爲之後衆多操作都是必須使用命令行來完成的,而且這對於hacker們來說也不是什麼難事。

  3. 爲GitHub創建SSH Keys,官方文檔,這一步很重要,不然之後使用rake deploy命令時會出現如下錯誤:


## Pushing generated _deploy website
Permission denied (publickey).


由於我使用GitHub比較早,這個SSH Key早就生成添加到了GitHub上,但是沒有使用默認的名字,始終都是Permission denied。直到在GitHub上的文檔中爬了很久才找到解決辦法,o(╯□╰)o原來是生成的publickey沒有添加到SSH中。4. 你的機器要有ruby環境,Octopress要求的是ruby-1.9.2,現在ruby最新的版本是ruby-1.9.3。可以使用ruby --version命令來查看。如果沒有該命令或者是版本低於1.9.2的話,那麼就需要安裝與升級ruby。可以使用兩種方法rbenvRVM。具體使用方法請自行查看之,我是用的RVM,在安裝中遇到的問題就是我是用的是MAC OX MountainLion(10.8.2)系統,xcode的版本是4.6,沒有gcc編譯器,用得是LLVM,而ruby-1.9.3-p385在LLVM下編譯不通過。最終在Google和stackoverflow幫助下解決之。

安裝Octopress

terminal下進入Octopress所要安裝目錄的上一級目錄,敲入以下命令


git clone git://github.com/imathis/octopress.git geekerprobe  
# 從GitHub上clone Octopress到本地 geekerprobe可以隨便填,
#Octopress會被clone到當前目錄的geekerprobe目錄下
cd geekerprobe 
# 進入該目錄,如果你是用的是RVM的話,會尋問你是否信任.rvmrc文件 當然是yes
gem install bundler
# 下載bundler,有可能提示gem命令未找到,請自行google解決方法
bundle install    #安裝bundle
rake install   #安裝Octopress默認主題


到此Octopress在本地已經安裝完畢,但是還都是默認配置,而且沒有發表博文。但是你可以通過一下命令來生成並預覽一下原始的界面:


rake generate    #生成blog,就是根據配置文件,將主題、模板、發表的markdown
# 格式的博文等衆多文件生成靜態的html文件存放在geekerprobe/public文件夾下
rake preview   #預覽生成的blog,此時ruby會啓動一個小型的server


接下來打開瀏覽器訪問http://127.0.0.1:4000就可以看到頁面啦!退出預覽當然是Ctrl+C了。

Octopress簡單配置

此時在terminal下使用‘ls’命令查看目錄結構爲:



CHANGELOG.markdown  Rakefile        plugins
Gemfile             _config.yml     public
Gemfile.lock        config.rb       sass
README.markdown     config.ru       source


\_config.ymlRakefileconfig.ruconfig.rb就是四個配置文件了,我們修改配置主要是在\_config.yml上進行的,其他的三個一般不需要我們去直接管理。\_config.yml的配置分爲三個部分:

  1. Main Configs,配置一些博客的基本信息,標題URL什麼的;

  2. Jekyll & Plugins,這裏是jekyll和一些官方插件的配置;

  3. 3rd Party Settings,這裏是第三方插件配置,我們之後自己添加的插件配置信息建議都放在這個部分中。具體說明請看官方Document注意:每次做完配置文件的修改之後都要使用rake generate來重新生成html來使配置生效,而簡單修改頁面html則不需要重新生成,在預覽狀態下直接刷新頁面就可以了。

發佈博文

博文有兩種一種是post一種是page,具體有什麼區別請google之。發送博文只需要在當前目錄下:


rake new_post["My First Blog"]   #發送名爲My First Blog的post,
# 會在source/_post目錄下按照配置文件生成markdown文件
rake new_page["title"]   #發送page,會生成在source/下,我還沒有使用過具體請看官方文檔


使用喜歡的編輯器打開source/_post/yyyy-mm-dd-my-first-blog.markdown進行編輯,書寫博文。


---
layout: post
title: "My First Blog"
date: 2013-02-23 09:01
comments: true
categories:
---
## Hello octopress! ##


開頭兩個下劃線之間的部分是yaml頭,用來告訴Jekyll怎麼處理你的posts或者是pages,在這裏你可以對你的post或者page做一些設置,比如添加作者,category,是否允許評論等。在後面就是你自己要寫的東西啦,當然是使用markdown來寫了,當然它也支持HTMLmarkdown很簡單,還不會的看這裏,語法說明。寫完保存generate preview就可以了。

部署到GitHub

現在到了最關鍵的時候了,就是將Octopress部署到GitHub上去。從官方文檔瞭解到,部署到GitHub上有兩種一種是使用GitHub Pages,這種在訪問時使用的url爲http://username.github.com,username爲註冊的GitHub用戶名,你需要在GitHub上建立名字爲username.github.comrepository。第二種是使用GitHub Project pages (gh-pages),這種在訪問時使用的url爲http://username.github.com/reponame,reponame爲你在GitHub上建立的repository的名字,這個名字可以隨便寫,將來生成的靜態html會被push到該repo下的gh-pages分支中。我個人的理解是GitHub建立了這兩種方式,第一種是用來介紹你這個GitHub的,所以每個賬號只能有一個,而第二個是用來介紹你的project的,而你可以建立多個repo,所以也就可以有多個blog了,雖然url有點複雜,不過Octopress也提供了綁定自己域名的方法,自己目前還沒有域名所以使用的是默認的,這一部分自己沒有試驗過所以就不貼上來了,具體的查看官方文檔。鑑於此我使用了第二種方式來將blog部署到GitHub上。步驟:

  • 先到GitHub上創建名爲geekerprobe的repo。

  • 因爲使用第二種方法我們要將blog放在username.github.com的子集目錄所以我們要在本地將目錄也設置爲子集目錄,不然會出現“Sorry!I can not find /”的錯誤,如果使用第一種方法則跳過此步驟,因爲默認就是沒有子集目錄的。


rake set_root_dir[/geekerprobe]   #將路徑設置爲/geekerprobe
rake set_root_dir[/]   #如果你想恢復到初始目錄,則鍵入此命令


這條命令會修改\_config.ymlRakefileconfig.rb中的有關路徑部分的設置,並將實際文件進行剪切移動操作,以適應路徑的改變。而且在本地預覽時也要使用子集目錄來訪問預覽http://127.0.0.1:4000/geekerprobe

  • 接下來就是將blog部署上去了


rake setup_github_pages   #將Octopress部署到GitHub上


會提示你輸入一個形如[email protected]:username/geekerprobe.git的地址,那麼就按照這種形式輸入你自己的repo的地址,這個地址可以在GitHub上你的repo的SSH文本框中得到,粘貼過來就好。

回車確定,等待片刻提示成功就可以了。這時查看目錄會發現多了一個_deploy的文件夾,這個文件夾是一個git庫,指向了GitHub上你的repo的gh-pages分支。同時你的repo的gh-pages分支在GitHub上也已被創建了。

  • 接下來生成並push博文到GitHub上


rake generate   #生成
rake deploy   #push到GitHub上,此時會將/public目錄下的文件完全拷貝,
# 粘貼到/_deploy目錄下,然後在push


如果你的GitHub的SSH Key沒有設置或者設置錯誤的話,此時會出現權限不允許的錯誤。看到成功時就說名部署工作已經完成了,恭喜你趕緊到瀏覽器訪問一下你的url試試看吧。

到此基本的工作已經做完了,你的blog已經成功部署到GitHub上了並且可以正常使用了。

使用 發佈博文

rake new_post[]   #創建post,在editer中編輯post
rake generate     #生成靜態html
rake preview      #本地預覽,修改錯誤,查看效果
rake deploy       #無誤後,push到GitHub上



到此,你可以離開此頁了,如果還要看其他設置的話,請看下去,我覺得這還是挺有用的,他將你的posts也同樣備份到GitHub上,下次在你換了一個環境或者電腦後,就可以直接clone下來或者pull合併,免去博文與各種配置丟失。

備份Octopress到GitHub

此處使用的都是git命令,對git命令不熟悉的請看

首先/geekerprobe這個目錄我們是從Octopress的GitHub上clone下來的,所以他本是就是一個git庫,可以通過cat .gitignore查看該目錄下被排除在git庫外的文件以及目錄。這些我們在clone之前就已經由作者做好了。我們需要做的是:


git remote add origin [email protected]:username/geekerprobe.git   #在遠端添加源,origin可以隨便寫,建議用origin這是默認,後面的路徑還是那個
git branch -m site    #創建一個分支site,這個site也可以隨便寫。
# 官方文檔使用的是master主分支
git push origin site   #將這個源push到site分支中


這樣你去你的GitHub上就可以看到你的repo又多了一個site分支,並且有了文件也有版本記錄。

這裏說一下我理解到的git的簡單原理,我也是剛剛接觸到git之前都是使用subvision的,通過配置這個blog有了一點體會,但是比較淺顯,有不對之處歡迎指出。

在一個git庫中會有文件記錄你所有對庫(working dir)中文件的增刪改,類似於svn,可以使用


git status

來查看當前的所有文件改動。之後將顯示出來的有改動的文件add到緩衝區(index),通常我都是

git add .

將所有改動都add到緩衝區,但這只是臨時的並沒有提交到remote端,也沒有被提交到上次提交後的狀態下。然後就是將緩衝區的內容提交到上次提交的狀態(HEAD)下

git commit -m "something to say"

這些引號中的文字就是類似於svn中的版本改動說明了,現在對文件的改動依然沒有提交到remote端。接下來

git push origin site   #將HEAD push到remote段

到此本地的版本已經提交到GitHub。

Octopress拓展增強

要想使Octopress擁有更強大的拓展請參考一下文章:

安裝主題
自定義樣式
添加多說評論
添加標籤雲與category list

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章