GitHub+Octopress搭建自己的博客

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

一、Octopress 與 Jekyll & Github Pages 的關(guān)系

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

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

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

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

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

  2. 安裝 Ruby,由于我之前安裝了CocoaPods,所以已經(jīng)有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)在已經(jīng)是 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)

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

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

$ sudo gem install bundler
$ bundle install

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

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

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

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

$ 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. 預(yù)覽效果

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

$ sudo rake preview

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

Blog預(yù)覽.jpg

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

前面我們已經(jīng)在本地搭出了 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)建完后不要添加任何內(nèi)容,另外自己過程中產(chǎn)生了兩個疑問

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

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

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

2. 配置 Github Pages

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

$ cd octopress
$ rake setup_github_pages

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

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

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

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

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

終端執(zhí)行指令:

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

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

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

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

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

$ sudo rake generate

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

$ rake preview

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

$ sudo rake deploy

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

如果你還想把自己的本地資源文件(如Markdown文件等內(nèi)容)也同步到 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)在我們完成了個人博客的初級搭建,足夠滿足我們的基本需求。之后,我們需要進一步了解關(guān)于更換主題theme、定制博客站Style等內(nèi)容,詳情請參見我的下一篇文章--個性化我們的Octopress博客。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容