基于 Octopress & Github Pages 搭建博客(二)

經(jīng)過上一篇,我們在本地搭出了 Octopress 雛形,這一篇首先我們要將本地的 Octopress 博客部署到 Github Pages ,然后發(fā)布一篇博文。部署過程中分析了原理,可能會比較枯燥,但是能讓我們更了解 Octopress,所以我依舊堅持寫下來了。

廢話少說,開工~

1.將 Octopress 部署到 Github Pages

Github 大家應該都有了解過,也是我很喜歡的平臺之一,功能真心強大并且可免費使用,這里我們拿來托管我們的 Octopress 博客。

1.1 新建 Github repository

注冊 Github 賬號,新建 Github repository 。項目名稱(Repository name)命名格式為 username.github.io ,username 是你的 Github 用戶名(或 organization name,這里和后面我們先不討論 origanization)。例如我的用戶名是 JonyFang,所以輸入 JonyFang.github.io 即可。點擊 Create repository 創(chuàng)建。

PS:創(chuàng)建完后不要添加任何內(nèi)容,另外自己過程中產(chǎn)生了兩個疑問

1.為什么用 github.io 而不是 github.com?

2.為什么是 Repository name 一定要按照 username.github.io 填寫?

第一個問題,這里解釋了為什么把 github.com 改為了 github.io ,簡而言之是為了安全。

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

1.2. 配置 Github Pages

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

$ cd octopress

$ rake setup_github_pages

該命令會要求我們輸入 Github 倉庫的 URL 。復制粘貼下我們新建倉庫的 SSHHTTPS URL 即可。(例如:git@github.com:username/username.github.io.git

那么這里 rake setup_github_pages 做了什么呢?

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

下面具體分析下 Octopress 是怎么做的(可通過查看 Rakefile 得知):

1. 命令要求我們輸入 Github Pages 倉庫的 URL,也就是我們新建的名為 username.github.io 倉庫的 URL。這樣命名是為了通過字符串截取 URL 拿到子串(http://username.github.io)作為我們博客的域名;

# Rakefile 中可查看 URL 截取方式:

repo_url = get_stdin("Repository url: ")


2. 將指向(pointing to)imathis/octopress 遠程庫的名字 ‘origin’ 改為 ‘octopress’;

Git clone 一個倉庫時,會將 clone 下來的倉庫命名為 origin,沒有限定 clone 條件的情況下,會下載倉庫中所有數(shù)據(jù),并建立一個指向該倉庫 master 分支的指針,本地命名為 origin/master。

當我們 clone 了 octopress 倉庫,執(zhí)行如下命令可看到遠程倉庫信息:

$ cd octopress

$ git remote -v

# 輸出如下,可看到遠程倉庫名為 origin

origin git://github.com/imathis/octopress.git (fetch)

origin git://github.com/imathis/octopress.git (push)

Octopress 文件夾下 Rakefile 中可看出是通過如下的方式,將 origin 改為 octopress:

# 查看 Rakefile

system "git remote rename origin octopress"

這里內(nèi)部執(zhí)行了命令 git remore rename origin octopress,當 rake setup_github_pages 執(zhí)行完畢,再 git remote -v 發(fā)現(xiàn)遠程庫名改為了 octopress。

$ git remote -v

# 輸出如下

octopress git://github.com/imathis/octopress.git (fetch)

octopress git://github.com/imathis/octopress.git (push)


3. 添加你的 Github Pages 倉庫作為默認的 origin remote,并將遠程庫中指向 imathis/octopress 中 master 分支的指針指向現(xiàn)在的 origin(即 username/username.github.io)的 master 分支,

# 查看 Rakefile

system "git remote add origin #{repo_url}"

system "git config branch.master.remote origin"

當 rake setup_github_pages 執(zhí)行完畢查看遠程庫,可以看到遠程庫 origin 指向了 Github Pages。

$ cd octopress

$ git remote -v

# 輸出信息如下

octopress git://github.com/imathis/octopress.git (fetch)

octopress git://github.com/imathis/octopress.git (push)

origin git@github.com:JonyFang/JonyFang.github.io.git (fetch)

origin git@github.com:JonyFang/JonyFang.github.io.git (push)

到這里,應該能猜到上一步將指向 imathis/octopress 遠程庫的名字 origin 改為 octopress 的原因了。


4. 將本地 master 分支名字從 "master" 改為 "source"

# 查看 Rakefile

system "git branch -m master source"

執(zhí)行如下命令查看本地分支(拿到第6條解釋為什么要改名為 source):

$ git branch

# 輸出如下

* source


5.根據(jù)提供的 Github Pages 倉庫的 SSH 或 HTTPS 的 URL,截取倉庫名 username.github.io?作為博客的 URL(上面 1 有提到)。然后將 octopress 目錄下 _config.yml 文件中 url 參數(shù)值改為 http://username.github.io 。

# octopress 下 Rakefile 查看

url = blog_url(user, project, source_dir)

jekyll_config = IO.read('_config.yml')

jekyll_config.sub!(/^url:.*$/, "url: #{url}")

File.open('_config.yml', 'w') do |f|

f.write jekyll_config


6. 在?octopress 目錄下新建 _deploy?目錄,并在 _deploy?目錄下新建?master 分支;

前面4 ,我們將本地 master 分支名字從"master"改為"source",這里一起分析下原因。4和6放在一起容易理解點。

其實本地 octopress 博客部署到 Github Pages 之后,遠程 Github 下會有兩個分支, master 和 source。遠程 master 分支作為 Web 服務公開目錄,當你訪問 http://username.github.io 時,提供網(wǎng)站內(nèi)容;遠程 source 分支存放的是整個 octopress 框架的源碼。

之所以第4步將本地 master 改為 source,是為了把 master 指針讓出來,讓它指向這一步(6)新建的 _deploy 目錄下的 master 分支。這樣,octopress/_deploy 目錄下的本地 master 分支 就對應了 Github Pages 遠程庫中的 master 分支,本地 source 分支同理。

# 查看 Rakefile?

cd "#{deploy_dir}" do

system "git init"

system 'echo "My Octopress Page is coming soon …" > index.html'

system "git add ."

system "git commit -m \"Octopress init\""

system "git branch -m gh-pages" unless branch == 'master'

system "git remote add origin #{repo_url}"

然后修改了 Rakefile 中 deploy_default 和 deploy_branch 變量的初始值:

# deploy 時執(zhí)行的命令,"push" 為 Rakefile 中定義的一個 rake task

deploy_default = "push" # 初始為 "rsync"

# deploy 時執(zhí)行上述 rake task 命令 "push" 到 "master" 分支

deploy_branch? = "master" # 初始為 "gh-pages"


回頭來看 rake setup_github_pages ,是不是清晰多了呢?

1.3. 生成并部署站點

執(zhí)行如下命令,(將 octopress/_deploy 下數(shù)據(jù) push 到 master 分支):

$ sudo rake generate

$ sudo rake deploy

這時在瀏覽器輸入 http://username.github.io 就可以訪問我們的網(wǎng)頁啦~

最后別忘了 commit 你的 octopress 框架源碼source 分支:

$ git add .

$ git commit -m'init' ?#init 可隨意填寫

$ git push origin source

好,到這里,如果順利完成前面所有內(nèi)容的話,我們已經(jīng)將 Octopress 部署到 Github Pages 了。如果你想換成自己的域名可以參考這里的方法(Custom Domains),不再贅述了。


這里解釋下,rake generate 和 rake deploy。

rake generate:生成 jekyll 站點(Generating Site with Jekyll)

# 查看 Rakefile

system "compass compile --css-dir #{source_dir}/stylesheets"

system "jekyll build"

rake deploy:將站點部署到 Github Pages。由于 _deploy 目錄所代表的本地倉庫的master分支對應 Github Pages 遠程倉庫的 master 分支,該分支目錄的內(nèi)容即 Github Pages 在互聯(lián)網(wǎng)上供公開訪問的站點內(nèi)容。因此這里做的主要就是將改動的內(nèi)容(博客、DIY 布局等...) copy 到 _deploy 目錄下,然后將此修改push到 Github Pages 遠程庫的 master 分支。

1. 查看是否有 preview-mode (預覽模式),有則刪除,重新執(zhí)行 rake generate

1. 將 octopress/source 目錄下的文件拷貝到 octopress/public 目錄下;

2. 進入 octopress/_deploy 目錄,執(zhí)行 git pull 操作;

3. 將 octopress/public 目錄的內(nèi)容拷貝到 octopress/_deploy 目錄下;

4. 將 octopress/_deploy 目錄所對應的本地 master 分支的修改 push 到 Github Pages 遠程庫的 master 分支。

5. 下面可以看到 master 分支 commit 信息格式是 "Site updated at 2015-10-14 12:52:36 UTC"

# 查看 Rakefile

system "git add -A"

message = "Site updated at #{Time.now.utc}"

system "git commit -m \"#{message}\""

# 前面說過 deploy_branch? = "master"

Bundler.with_clean_env { system "git push origin #{deploy_branch}" }

2. 發(fā)布博文過程

2.1. 新建一篇博文

打開終端,輸入:

$ cd octopress

$ rake new_post["Hi, octopress"]? #"Hi, octopress" 是文章的標題

然后在 octopress/source/_posts 目錄下我們會看到命名格式為 "2015-10-14-Hi-octopress.markdown" 的文件。

# 查看 Rakefile ,這是實現(xiàn)方法

filename = "#{source_dir}/#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"

打開新建的 "2015-10-14-Hi-octopress.markdown" 文件(我用的 Mou,免費還好用),會發(fā)現(xiàn)頭文件有如下內(nèi)容(不要刪除這段信息):

---

layout: post ? ? ? ? ? ? #代表是一片博文

title: "hello world"?

date: 2015-10-14 19:59:22 +0800

comments: true ? ? ? ? #是否允許評論

categories: ? ? ? ? ? ? #分類

---

頭部布局實現(xiàn)原理:

# 查看 Rakefile,頭部布局實現(xiàn)

open(filename, 'w') do |post|

post.puts "---"

post.puts "layout: post"

post.puts "title: \"#{title.gsub(/&/,'&')}\""

post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"

post.puts "comments: true"

post.puts "categories: "

post.puts "---"

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

2.2. 預覽新建的博文

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

$ cd octopress

$ sudo rake generate

$ rake preview

然后瀏覽器打開?http://localhost:4000?,可以預覽我們剛寫的博客效果。

2.3. 發(fā)布新建的博文

終端執(zhí)行:

$ sudo rake deploy ?#deploy blog 到 Github Pages

最后別忘了,push 下本地的 octopress 到 source:

$ git add .

$ git commit -m'post test blog'

$ git push origin source

OK,到此,本地 octopress 博客部署到 Github Pages 完成了,打開訪問你的個人博客看看效果吧。額,因為還沒有做布局修改,留到下一篇介紹~


部署這一塊,我花了挺長時間研究的,算是弄明白了過程是怎么回事。回頭再看 Github 上的目錄和本地的目錄,一下子明朗了不少。不知道你是不是也覺得呢?

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

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

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