Love, and to be Loved.

我愛你，你是自由的。

2014-02-13 | web

Blogging with Octopress

1. 安裝Ruby

2. 安裝Octopress

確保安裝了git，在終端輸入git –version可以看到計算機中的git版本。
利用命令將octopress從github上clone到本機：
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress
$ ruby --version
安裝相關依賴項：
$ sudo gem install bundler #需要輸入root密碼
$ bundle install
安裝默認的Octopress主題：
$ rake install

3. 配置Octopress

$ vim ./_config.yml

4. 在本機創建ssh

$ cd ~/.ssh
$ ssh-keygen -t rsa -C 你註冊github時的email
彈出Enter file in which to save the key (/Users/twer/.ssh/id_rsa): 直接按空格
彈出Enter passphrase(empty for no passphrase):輸入你GitHub帳號的密碼。Enter same passphrase again: 再次輸入你的密碼。
打開~/.ssh下的id_rsa.pub文件複製裡面的所有內容。
登錄GitHub，選擇Account Settings–>SSH Public Keys添加ssh，把剪貼板的內容複製到key輸入框內直接保存。
測試ssh：
$ ssh git@github.com
輸出：
PTY allocation request failed on channel 0
Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
代表成功。

5. 將Blog部署到GitHub上

在GitHub上創建一個倉庫，命名為username.github.com。等全部配置完後，可以通過在瀏覽器中輸入http://username.github.com來訪問。一般來說，將Blog的源碼放在source分支，把生成的內容提交到master分支。
創建好倉庫之後，需要利用octopress的一個配置rake任務來自動配置上面創建的倉庫：
$ rake setup_github_pages
上面的命令最主要的是創建一個_deploy目錄，用來存放部署到master分支的內容。期間會要求你輸入倉庫的url，根據提示，去GitHub.com上複製粘貼即可。
完成上面的命令之後，我們就可以生成Blog並真正部署到倉庫中了。執行如下命令：
$ rake generate
$ rake deploy
上面的命令首先生成Blog文件，並將生成的Blog文件拷貝到_deploy 目錄下，然後將這些內容添加到git中，並commit和push到倉庫的master分支。
現在可以訪問http://username.github.com了。注意，由於會發生延時，要等大約10分鐘才能打開。至此，我們已經基本完成對Blog的部署，不過Blog的source要單獨提交。

6. 開始寫Blog

Octopress為我們提供了一些task來創建Blog和頁面。博文必須存儲在source/_posts 目錄下，並且需要按照Jekyll的命名規範對文章進行命名：YYYY-MM-DD-post-title.markdown。文章的名字會被當作url的一部分，而其中的日期用於對博文的區分和排序。創建博文命令爲：
$ rake new_post["title"]
然後在source/_posts/YY-MM-DD-post-title.markdown中寫博文。
如果想讓文章在首頁只顯示一部分，只需要在文章中相應的位置添加即可。
之後，按照如下命令部署：
$ rake generate
$ git add .
$ git commit -am "Some comments here."
$ git push origin source
$ rake deploy

7. 添加頁面(pages)

在Octopress中，有兩個默認的頁面，即blog/archives，可以參考它來完成自己的頁面。首先在source中創建一個目錄，例如author，然後在這個目錄中新建一個名為index.html的文件，根據需要進行編輯這個文件。
重要的是，我們需要在首頁將這個頁面的鏈接顯示出來，此時需要編輯source/_includes/custom/navigation.html，仿照已有的內容添加一個新行，指向新創建的目錄即可。
當rake generate正常之後，就可以rake deploy到GitHub上了。

8. 獨立域名

在域名管理中，建立一個CNAME指向，將你的域名指向username.github.com
建一個名為CNAME的文件在source目錄下，然後將自己的域名輸入進去。
將內容push到GitHub後，第一次生效大概需要一個小時，之後就可以用自己的域名進行訪問了。

9. 安裝模板並加入版權聲明

常用第三方模板有：
3rd Party Octopress Themes
進入選擇好的模板鏈接，根據說明進行安裝。(本Blog使用的模板爲：CleanPress)
首先在source/_includes/post目錄下添加license.html文件，內容如下：

<!-- Copyright Info BEGIN -->  
{ % if site.post_license % }  
<b>  
<div class="entry-content"> <a rel="license"   href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh" ></a>版權聲明：非商用-非衍生-保持署名  
<br />  
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh">Creative Commons BY-NC-ND 3.0  
</a></div></b>  
{ % endif % }  
<!-- Copyright Info END -->

10. Octopress添加Google Analytics統計與SEO

1) 在各搜索引擎中提交本博客的地址：

免费收录网站搜索引擎登录口大全
爲網站、文章添加描述信息(description)、關鍵字(keywords)、標簽(tags)，以此幫助用戶準確的搜索到本博客。描述信息和關鍵字是指網頁head部分的元標簽(meta)，是給搜索引擎看的。
爲每一篇文章都添加描述，可以在Octopress模板中修改source/_includes/head.html中的代碼

{ % capture description % }{ % if page.description % }{\{ page.description }\}{ % else % }{\{ content | raw_content }\}{ % endif % }{ % endcapture % }  
<meta name="description" content="{\{ description | strip_html | condense_spaces | truncate:150 }\}">  
{ % if page.keywords % }<meta name="keywords"  
content="{\{ page.keywords }\}">{ % endif % }

2) 添加Google Analytics

註冊Google Analytics獲得一個google_analytics_tracking_id，添加到_config.yml中對應位置，並對網站進行驗證即可。然後通過Google Analytics分析網站流量。而且可以通過Google站長工具，對網站進行更全面的分析和SEO。
對自己的網站進行驗證，只需將Google Analytics提供的用於驗證的代碼添加到source/_includes/head.html的標簽之間，網站部署到網上之後，過幾分鐘即可驗證通過，其他需要驗證的也同樣操作。

11. 實現站內搜索

1) 在頁面合適的位置上創建一個搜索框：

<div align='center'>
    <form class="navbar-form" action="/search/">
        <input type="text" class="form-control" placeholder="Search" name="q">
    </form>               
 </div>

2) 修改_config.yml文件：
simple_search: \search
3) 創建新的search頁面：
rake new_page["search"]
4) 修改source/_include/navigation.html 文件：
去掉<input type="hidden" name="q" value="site:yourid.github.io" />
5) 登錄Google站長工具，綁定自己的網站，進入網站管理頁面，進入實驗室中的“自定義搜索”，設置細節後獲取代碼，將代碼填入上面新建的search/index.markdown中：

<div>
    插入Google自定義搜索的代碼
</div>

12. 參考

Octopress Help
利用Octopress搭建一個GitHub博客
 象写程序一样写博客：搭建基于github的博客
 在Mac上从零开始搭建基于Github的Octopress博客
 为octopress添加新的页面(page)
我的Octopress配置
 Octopress侧边栏及评论系统定制
 N-blog
Octopress添加统计与SEO
~~octopress-tapir (需要下載文件，搜索框用)~~
~~站内搜索框~~
Octopress_setup

PS:

受限於格式要求，本文代碼中{或}與旁邊%之間的空格請刪去；兩個{或者兩個}之間的\請刪去。