GitHub+Octopress搭建自己的博客

作為一個程序員,如果沒有自己的專屬技術博客钮呀,豈不是一大不幸?于是不久前在jonyfang的詳細教程下完成了在Mac上使用Github+ Octopress搭建屬于自己的博客,十分的感謝凡蚜!所以我把搭建博客的過程記錄總結下來。附原文地址:Jony Fang

一吭从、Octopress 與 Jekyll & Github Pages 的關系

  • Octopress 是基于 Jekyll 的靜態(tài)博客框架朝蜘。

  • GitHub Pages 這里用于顯示托管在 GitHub 上的靜態(tài)網(wǎng)頁,是 GitHub 提供的一項服務涩金。

  • 總的來說也就是我們使用基于 Jekyll 的 Octopress 生成本地的靜態(tài)網(wǎng)站谱醇,然后將靜態(tài)的網(wǎng)站托管到 Github 為我們提供的 Github Pages 服務上。最后訪問 博客地址 就可以顯示我們的個人博客網(wǎng)站了步做。

二副渴、安裝環(huán)境:

  1. 我使用的是 Mac OS X 系統(tǒng)

  2. 安裝 Ruby,由于我之前安裝了CocoaPods全度,所以已經有Ruby煮剧,一般來說,Mac OS X都是自帶Ruby的

但還是記錄下Ruby安裝教程
(1) 打開終端,執(zhí)行如下命令轿秧,安裝 RVM中跌,同時也會安裝最新的 Ruby:

$ curl -L https://get.rvm.io | bash -s stable --ruby

(2) 安裝完,執(zhí)行如下命令菇篡,查看 Ruby 版本 (-v = --version)

$ ruby -v

如果你的 Ruby 版本不低于 1.9.3漩符,可直接跳下一步進行安裝 RubyGems。否則需要執(zhí)行如下命令:

$ rvm install 2.0.0
$ rvm use 2.0.0

現(xiàn)在我們再執(zhí)行命令查看 Ruby版本驱还,會看到現(xiàn)在已經是 2.0.0 了嗜暴。

$ ruby -v     

(3) 安裝 RubyGems:

$ rvm rubygems latest

OK,環(huán)境準備工作搞定了

三议蟆、本地安裝 Octopress

1. 將 Octopress 的項目 clone 到本地闷沥,終端執(zhí)行如下命令:

$ git clone git://github.com/imathis/octopress.git octopress

進入 octopress 目錄:

$ cd octopress

2. 安裝 Octopress 所需要的依賴庫(dependencies)

安裝過程中可能會遇到權限問題,我們需要在命令前面加上 sudo 再執(zhí)行咐容,并輸入登錄密碼舆逃。

注:sudo 全稱是:super user do,也就是以 root 用戶身份來執(zhí)行

$ sudo gem install bundler
$ bundle install

這里在不翻墻的情況下戳粒,可能會遇到一個問題:sudo gem install bundler 執(zhí)行后路狮,一直沒有響應。這是由于國內網(wǎng)絡原因(你懂的)蔚约,導致rubygems.org存放在 Amazon S3 上面的資源文件間歇性連接失敗奄妨。所以你會遇到gem install rackbundle install 的時候半天沒有響應的情況。

但好消息是國內某大神幫我們解決了這一心頭大患苹祟,我們可以用淘寶的Ruby鏡像來替換原來的鏡像砸抛。只需終端執(zhí)行下面的命令即可:

$ gem sources -a https://ruby.taobao.org/ -r https://rubygems.org/

然后執(zhí)行如下命令查看切換后結果

$ gem sources -l

然后會看到這樣的輸出:

*** CURRENT SOURCES ***
https://ruby.taobao.org

這就說明我們切換到淘寶的 Ruby 鏡像了,再次安裝 Octopress 所需要的依賴庫就會發(fā)現(xiàn)成功啦树枫。

當然還有另外兩種方法:

  1. 比較原始的方法 -> 動更改:打開 octopress/Gemfile文件 -> 將 source "https://rubygems.org" 改為 source "https://ruby.taobao.org"就可以了

  2. 相對方便點直焙,因為我們使用的是 Gemfile,所以我們可以用 Bundler 的 Gem 源代碼鏡像命令团赏,這樣我們就不用改 Gemfile 的 source 了箕般。命令如下:

    $ cd octopress
    $ bundle config mirror.https://rubygems.org https://ruby.taobao.org

3. 安裝下默認主題:

終端執(zhí)行下面的命令,即可安裝默認主題舔清,當然也可在這里就安裝第三方主題丝里,不過一會再安裝也是一樣的,所以留在后面說吧体谒。

     $ rake install

注:rake 全稱為:ruby make

4. 預覽效果

OK杯聚,經過上面的流程,我們已經在本地搭建了一個簡易版的 Octopress 博客抒痒。于是讓我們來看看效果吧幌绍。在終端執(zhí)行命令:

$ sudo rake preview

然后打開瀏覽器,輸入 http://localhost:4000/
就可以看到效果了。雖然比較簡陋傀广,但讓人挺高興的颁独,哈哈哈
至此我們算是結束了本地安裝過程

Blog預覽.jpg

四、本地的 Octopress 博客部署到 Github Pages

前面我們已經在本地搭出了 Octopress 雛形伪冰,接下來我們要將本地的 Octopress 博客部署到 Github Pages

1. 新建 Github repository

登錄 Github 后誓酒,新建 Github repository。項目名稱(Repository name)命名格式為 username.github.io 贮聂,username 是你的 Github 用戶名(或 organization name靠柑,這里和后面我們先不討論 origanization)。例如我的用戶名是 XcodeTalk吓懈,所以輸入 XcodeTalk.github.io 即可歼冰。點擊 Create repository 創(chuàng)建。

注意:創(chuàng)建完后不要添加任何內容耻警,另外自己過程中產生了兩個疑問

  • 1.為什么用 github.io 而不是 github.com隔嫡?
  • 2.為什么是 Repository name 一定要按照 username.github.io填寫?

第一個問題甘穿,簡而言之畔勤,使用了github.io是為了安全。

第二個問題扒磁,和 Github 內部的結構有關,其次后面會通過 URL 截取填寫的 username.github.io 作為博客域名式曲。這樣填寫格式與 Github 內部結構的具體聯(lián)系還需要再研究下妨托。若有大神圍觀,望指教下

2. 配置 Github Pages

終端執(zhí)行如下命令:

$ cd octopress
$ rake setup_github_pages

該命令會要求我們輸入 Github 倉庫的 URL 吝羞。復制粘貼下我們新建倉庫的 SSH 或 HTTPS URL 即可兰伤。(例如:git@github.com:username/username.github.io.git),注意此處有坑钧排,若是新手敦腔,選擇了SSH后面會出現(xiàn)要求配置SSH Key問題,可能會導致很麻煩恨溜,所以我選擇了HTTPS

記錄下:這兩種方式的主要區(qū)別在于:使用https url克隆對初學者來說會比較方便符衔,復制https url然后到git Bash里面直接用clone命令克隆到本地就好了,但是每次fetch和push代碼都需要輸入賬號和密碼糟袁,這也是https方式的麻煩之處判族。而使用SSH url克隆卻需要在克隆之前先配置和添加好SSH key,因此项戴,如果你想要使用SSH url克隆的話形帮,你必須是這個項目的擁有者。否則你是無法添加SSH key的,另外SSH默認是每次fetch和push代碼都不需要輸入賬號和密碼辩撑,如果你想要每次都輸入賬號密碼才能進行fetch和push也可以另外進行設置界斜。

那么這里 rake setup_github_pages 做了什么呢?
用戶(users)的 Github Pages 使用 master 分支作為 Web 服務(web server)的公開目錄合冀,為我們的 Pages url (http://username.github.io)
提供內容文件各薇。因此,我們會有這樣的需求水慨,source 分支用來做與博客源碼相關的事(存放全部博客源碼)得糜,master 分支上 commit 生成的博客內容供 Web 訪問。而 Octopress 幫我們把這件事給搞定了晰洒,就是通過這行代碼朝抖。

通過這樣就會將 Octopress 生成的靜態(tài)站點與 GitHub 進行綁定了。

3. 創(chuàng)建第一篇文章:

終端執(zhí)行指令:

$ rake new_post["title"]    #title為你的文章名谍珊,可隨意更改

生成的新文章在source/_post/目錄下治宣,文件名構成為時間和標題的拼音。我們可以用Markdown編輯器對文章進行修改砌滞。
打開新建的 markdown 文件(我目前用的 Mou 打開)侮邀,會發(fā)現(xiàn)頭文件有如下內容(千萬不要刪除這段信息):

---
layout: post             #post代表是一篇博文
title: "hello world"
date: 2015-10-14 19:59:22 +0800
comments: true         #是否允許評論
categories:             #分類
---

在最后面的 --- 下面就可以開始我們的正文啦~

正文寫完后,終端執(zhí)行如下指令即可生成靜態(tài)站點贝润,:

$ sudo rake generate

如果你想預覽本地的站點绊茧,可以執(zhí)行終端指令:

$ rake preview

此時,可以使用瀏覽器打開 localhost:4000 查看效果打掘。如果沒有問題可以將靜態(tài)站點同步到 GitHub 遠程倉庫中华畏,終端執(zhí)行指令:

$ sudo rake deploy

你會發(fā)現(xiàn)我們的靜態(tài)站點已經被 push 到 GitHub倉庫的 master 分支上。稍等幾分鐘尊蚁,訪問博客地址 username.github.io 亡笑,就會發(fā)現(xiàn)你的個人博客站的第一篇blog已創(chuàng)建成功了。

如果你還想把自己的本地資源文件(如Markdown文件等內容)也同步到 GitHub 中横朋,可以執(zhí)行以下指令:

$ git add .
$ git commit -m "comment"  #comment可隨意更改
$ git push origin source

這樣我們的資源文件就會同步到 GitHub 的 source 分支了仑乌。

注意:rake preview 會自動監(jiān)視文件的變化,重新生成靜態(tài)頁面琴锭。因此修改markdown文件后晰甚,只需要在瀏覽器里刷新一下頁面,就立刻可以看到效果祠够。不過如果修改了_config.yml的話压汪,則需要Ctrl+C終止,用 rake generate 重新生成古瓤,才能看到效果止剖。

OK腺阳,現(xiàn)在我們完成了個人博客的初級搭建,足夠滿足我們的基本需求穿香。之后亭引,我們需要進一步了解關于更換主題theme、定制博客站Style等內容皮获,詳情請參見我的下一篇文章--個性化我們的Octopress博客焙蚓。

原文地址:GitHub+Octopress搭建自己的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市洒宝,隨后出現(xiàn)的幾起案子购公,更是在濱河造成了極大的恐慌,老刑警劉巖雁歌,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宏浩,死亡現(xiàn)場離奇詭異,居然都是意外死亡靠瞎,警方通過查閱死者的電腦和手機比庄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乏盐,“玉大人佳窑,你說我怎么就攤上這事「改埽” “怎么了神凑?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長何吝。 經常有香客問我耙厚,道長,這世上最難降的妖魔是什么岔霸? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮俯渤,結果婚禮上呆细,老公的妹妹穿的比我還像新娘。我一直安慰自己八匠,他們只是感情好絮爷,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著梨树,像睡著了一般坑夯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抡四,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天柜蜈,我揣著相機與錄音仗谆,去河邊找鬼。 笑死淑履,一個胖子當著我的面吹牛隶垮,可吹牛的內容都是我干的。 我是一名探鬼主播秘噪,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼狸吞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了指煎?” 一聲冷哼從身側響起蹋偏,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎至壤,沒想到半個月后威始,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡崇渗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年字逗,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宅广。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡葫掉,死狀恐怖,靈堂內的尸體忽然破棺而出跟狱,到底是詐尸還是另有隱情俭厚,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布驶臊,位于F島的核電站挪挤,受9級特大地震影響,放射性物質發(fā)生泄漏关翎。R本人自食惡果不足惜扛门,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纵寝。 院中可真熱鬧论寨,春花似錦、人聲如沸爽茴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽室奏。三九已至火焰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間胧沫,已是汗流浹背昌简。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工占业, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人江场。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓纺酸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親址否。 傳聞我的和親對象是個殘疾皇子餐蔬,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內容