經(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 。復制粘貼下我們新建倉庫的 SSH 或 HTTPS 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" 。
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 上的目錄和本地的目錄,一下子明朗了不少。不知道你是不是也覺得呢?