經(jīng)過(guò)上一篇乏屯，我們?cè)诒镜卮畛隽?Octopress 雛形让歼，這一篇首先我們要將本地的 Octopress 博客部署到 Github Pages 跨细，然后發(fā)布一篇博文臭猜。部署過(guò)程中分析了原理躺酒，可能會(huì)比較枯燥，但是能讓我們更了解 Octopress蔑歌，所以我依舊堅(jiān)持寫下來(lái)了羹应。
廢話少說(shuō)，開(kāi)工～
1.將 Octopress 部署到 Github Pages
Github 大家應(yīng)該都有了解過(guò)次屠，也是我很喜歡的平臺(tái)之一园匹，功能真心強(qiáng)大并且可免費(fèi)使用，這里我們拿來(lái)托管我們的 Octopress 博客劫灶。
1.1 新建 Github repository
注冊(cè) Github 賬號(hào)裸违，新建 Github repository 。項(xiàng)目名稱（Repository name）命名格式為 username.github.io 本昏，username 是你的 Github 用戶名（或 organization name供汛，這里和后面我們先不討論 origanization）。例如我的用戶名是 JonyFang涌穆，所以輸入 JonyFang.github.io 即可怔昨。點(diǎn)擊 Create repository 創(chuàng)建。
PS：創(chuàng)建完后不要添加任何內(nèi)容宿稀，另外自己過(guò)程中產(chǎn)生了兩個(gè)疑問(wèn)
1.為什么用 github.io 而不是 github.com趁舀？
2.為什么是 Repository name 一定要按照 username.github.io 填寫？
第一個(gè)問(wèn)題祝沸，這里解釋了為什么把 github.com 改為了 github.io 矮烹，簡(jiǎn)而言之是為了安全越庇。
第二個(gè)問(wèn)題，和 Github 內(nèi)部的結(jié)構(gòu)有關(guān)奉狈，其次后面會(huì)通過(guò) URL 獲取填寫的 username.github.io 作為博客域名卤唉。這樣填寫格式與 Github 內(nèi)部結(jié)構(gòu)的聯(lián)系具體還需要再研究下。若有大神圍觀嘹吨，望指教下：）
1.2. 配置 Github Pages
終端執(zhí)行如下命令：
$ cd octopress
$ rake setup_github_pages
該命令會(huì)要求我們輸入 Github 倉(cāng)庫(kù)的 URL 搬味。復(fù)制粘貼下我們新建倉(cāng)庫(kù)的 SSH 或 HTTPS URL 即可。（例如：git@github.com:username/username.github.io.git）
那么這里 rake setup_github_pages 做了什么呢蟀拷？
用戶（users）的 Github Pages 使用 master 分支作為 Web 服務(wù)（web server）的公開(kāi)目錄碰纬，為我們的 Pages url （http://username.github.io）提供內(nèi)容文件。因此问芬，我們會(huì)有這樣的需求悦析，source 分支用來(lái)做與博客源碼相關(guān)的事（存放全部博客源碼），master 分支上 commit 生成的博客內(nèi)容供 Web 訪問(wèn)此衅。而 Octopress 幫我們把這件事給搞定了强戴，通過(guò)這行 code（好 NB～）。
下面具體分析下 Octopress 是怎么做的（可通過(guò)查看 Rakefile 得知）：
1. 命令要求我們輸入 Github Pages 倉(cāng)庫(kù)的 URL挡鞍，也就是我們新建的名為 username.github.io 倉(cāng)庫(kù)的 URL骑歹。這樣命名是為了通過(guò)字符串截取 URL 拿到子串（http://username.github.io）作為我們博客的域名；
# Rakefile 中可查看 URL 截取方式：
repo_url = get_stdin("Repository url: ")
2. 將指向（pointing to）imathis/octopress 遠(yuǎn)程庫(kù)的名字 ‘origin’ 改為 ‘octopress’墨微；
Git clone 一個(gè)倉(cāng)庫(kù)時(shí)道媚，會(huì)將 clone 下來(lái)的倉(cāng)庫(kù)命名為 origin，沒(méi)有限定 clone 條件的情況下翘县，會(huì)下載倉(cāng)庫(kù)中所有數(shù)據(jù)最域，并建立一個(gè)指向該倉(cāng)庫(kù) master 分支的指針，本地命名為 origin/master锈麸。
當(dāng)我們 clone 了 octopress 倉(cāng)庫(kù)镀脂，執(zhí)行如下命令可看到遠(yuǎn)程倉(cāng)庫(kù)信息：
$ cd octopress
$ git remote -v
# 輸出如下，可看到遠(yuǎn)程倉(cāng)庫(kù)名為 origin
origin git://github.com/imathis/octopress.git (fetch)
origin git://github.com/imathis/octopress.git (push)
Octopress 文件夾下 Rakefile 中可看出是通過(guò)如下的方式忘伞，將 origin 改為 octopress：
# 查看 Rakefile
system "git remote rename origin octopress"
這里內(nèi)部執(zhí)行了命令 git remore rename origin octopress薄翅，當(dāng) rake setup_github_pages 執(zhí)行完畢，再 git remote -v 發(fā)現(xiàn)遠(yuǎn)程庫(kù)名改為了 octopress氓奈。
$ git remote -v
# 輸出如下
octopress git://github.com/imathis/octopress.git (fetch)
octopress git://github.com/imathis/octopress.git (push)
3. 添加你的 Github Pages 倉(cāng)庫(kù)作為默認(rèn)的 origin remote匿刮，并將遠(yuǎn)程庫(kù)中指向 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"
當(dāng) rake setup_github_pages 執(zhí)行完畢查看遠(yuǎn)程庫(kù)探颈，可以看到遠(yuǎn)程庫(kù) 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)
到這里训措，應(yīng)該能猜到上一步將指向 imathis/octopress 遠(yuǎn)程庫(kù)的名字 origin 改為 octopress 的原因了伪节。
4. 將本地 master 分支名字從 "master" 改為 "source"
# 查看 Rakefile
system "git branch -m master source"
執(zhí)行如下命令查看本地分支（拿到第6條解釋為什么要改名為 source）：
$ git branch
# 輸出如下
* source
5.根據(jù)提供的 Github Pages 倉(cāng)庫(kù)的 SSH 或 HTTPS 的 URL光羞，截取倉(cāng)庫(kù)名 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放在一起容易理解點(diǎn)蓖康。
其實(shí)本地 octopress 博客部署到 Github Pages 之后铐炫，遠(yuǎn)程 Github 下會(huì)有兩個(gè)分支， master 和 source蒜焊。遠(yuǎn)程 master 分支作為 Web 服務(wù)公開(kāi)目錄倒信，當(dāng)你訪問(wèn) http://username.github.io 時(shí)，提供網(wǎng)站內(nèi)容泳梆；遠(yuǎn)程 source 分支存放的是整個(gè) octopress 框架的源碼鳖悠。
之所以第4步將本地 master 改為 source，是為了把 master 指針讓出來(lái)优妙，讓它指向這一步（6）新建的 _deploy 目錄下的 master 分支乘综。這樣，octopress/_deploy 目錄下的本地 master 分支 就對(duì)應(yīng)了 Github Pages 遠(yuǎn)程庫(kù)中的 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 時(shí)執(zhí)行的命令，"push" 為 Rakefile 中定義的一個(gè) rake task
deploy_default = "push" # 初始為 "rsync"
# deploy 時(shí)執(zhí)行上述 rake task 命令 "push" 到 "master" 分支
deploy_branch? = "master" # 初始為 "gh-pages"
回頭來(lái)看 rake setup_github_pages 熟菲，是不是清晰多了呢看政？
1.3. 生成并部署站點(diǎn)
執(zhí)行如下命令，（將 octopress/_deploy 下數(shù)據(jù) push 到 master 分支）：
$ sudo rake generate
$ sudo rake deploy
這時(shí)在瀏覽器輸入 http://username.github.io 就可以訪問(wèn)我們的網(wǎng)頁(yè)啦～
最后別忘了 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 站點(diǎn)（Generating Site with Jekyll）
# 查看 Rakefile
system "compass compile --css-dir #{source_dir}/stylesheets"
system "jekyll build"
rake deploy：將站點(diǎn)部署到 Github Pages。由于 _deploy 目錄所代表的本地倉(cāng)庫(kù)的master分支對(duì)應(yīng) Github Pages 遠(yuǎn)程倉(cāng)庫(kù)的 master 分支竟块，該分支目錄的內(nèi)容即 Github Pages 在互聯(lián)網(wǎng)上供公開(kāi)訪問(wèn)的站點(diǎn)內(nèi)容壶运。因此這里做的主要就是將改動(dòng)的內(nèi)容（博客、DIY 布局等...） copy 到 _deploy 目錄下浪秘，然后將此修改push到 Github Pages 遠(yuǎn)程庫(kù)的 master 分支蒋情。
1. 查看是否有 preview-mode (預(yù)覽模式)埠况，有則刪除，重新執(zhí)行 rake generate
1. 將 octopress/source 目錄下的文件拷貝到 octopress/public 目錄下棵癣；
2. 進(jìn)入 octopress/_deploy 目錄辕翰，執(zhí)行 git pull 操作；
3. 將 octopress/public 目錄的內(nèi)容拷貝到 octopress/_deploy 目錄下狈谊；
4. 將 octopress/_deploy 目錄所對(duì)應(yīng)的本地 master 分支的修改 push 到 Github Pages 遠(yuǎn)程庫(kù)的 master 分支喜命。
5. 下面可以看到 master 分支 commit 信息格式是 "Site updated at 2015-10-14 12:52:36 UTC" 。
system "git add -A"
message = "Site updated at #{Time.now.utc}"
system "git commit -m \"#{message}\""
# 前面說(shuō)過(guò) deploy_branch? = "master"
Bundler.with_clean_env { system "git push origin #{deploy_branch}" }
2. 發(fā)布博文過(guò)程
2.1. 新建一篇博文
打開(kāi)終端河劝，輸入：
$ cd octopress
$ rake new_post["Hi, octopress"]? #"Hi, octopress" 是文章的標(biāo)題
然后在 octopress/source/_posts 目錄下我們會(huì)看到命名格式為 "2015-10-14-Hi-octopress.markdown" 的文件壁榕。
# 查看 Rakefile ，這是實(shí)現(xiàn)方法
filename = "#{source_dir}/#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
打開(kāi)新建的 "2015-10-14-Hi-octopress.markdown" 文件（我用的 Mou丧裁，免費(fèi)還好用）护桦，會(huì)發(fā)現(xiàn)頭文件有如下內(nèi)容（不要?jiǎng)h除這段信息）：
---
layout: post ? ? ? ? ? ? #代表是一片博文
title: "hello world"?
date: 2015-10-14 19:59:22 +0800
comments: true ? ? ? ? #是否允許評(píng)論
categories: ? ? ? ? ? ? #分類
---
頭部布局實(shí)現(xiàn)原理：
# 查看 Rakefile，頭部布局實(shí)現(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 "---"
在最后面的---下面就可以開(kāi)始我們的正文啦～
2.2. 預(yù)覽新建的博文
終端執(zhí)行如下命令：
$ cd octopress
$ sudo rake generate
$ rake preview
然后瀏覽器打開(kāi)?http://localhost:4000?,可以預(yù)覽我們剛寫的博客效果煎娇。
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 完成了催享，打開(kāi)訪問(wèn)你的個(gè)人博客看看效果吧。額哟绊，因?yàn)檫€沒(méi)有做布局修改因妙，留到下一篇介紹～
部署這一塊，我花了挺長(zhǎng)時(shí)間研究的票髓，算是弄明白了過(guò)程是怎么回事攀涵。回頭再看 Github 上的目錄和本地的目錄洽沟，一下子明朗了不少以故。不知道你是不是也覺(jué)得呢？
