Octopress + GitHub Page 搭建我的博客

Tips:博客已搬家，新地址:http://wanxudong.top

首先說明兩個關鍵術語：

Octopress

• Octopress是基於 Jekyll 的博客框架。他們的關係就像 jQuery 與 js 的關係同樣。
• 它爲咱們提供了現成的美觀的主題模板，而且配置簡單，使用方便，大大下降了咱們建站的門檻。

  What is Octopress?(摘自Octopress官方文檔)

  Octopress is Jekyll blogging at its finest.

• Octopress sports a clean responsive theme written in semantic HTML5, focused on readability and friendliness toward mobile devices.
• Code blogging is easy and beautiful. Embed code (with Solarized styling) in your posts from gists, jsFiddle or from your filesystem.
• Third party integration is simple with built-in support for Pinboard, Delicious, GitHub Repositories, Disqus Comments and Google Analytics.
• It’s easy to use. A collection of rake tasks simplifies development and makes deploying a cinch.
• Ships with great plug-ins some original and others from the Jekyll community — tested and improved.

Note: Octopress requires a minimum Ruby version of 1.9.3-p0.

GitHub Pages

• GitHub Pages 是 GitHub 提供的一項服務。它用於顯示託管在 GitHub 上的靜態網頁。因此咱們能夠用 Github Pages 搭建博客，固然咱們也能夠把項目的文檔和主頁放在上面。

大體思路是經過Octopress生成本地靜態博客網頁，而後將靜態網頁佈置到GitHub提供的GitHub Pages上面。

安裝

---

下面是具體的安裝步驟(這裏使用RVM安裝，還能夠經過rbenv安裝，Octopress給出的官方安裝文檔：Octopress Setup)：

查看ruby版本

1	ruby --version # 根據Octopress官方文檔Ruby必須 >= 1.9.3-p0

 

 

若是ruby版本 >= 1.9.3-p0 ，跳過RVM和Ruby的安裝。

安裝RVM

1	curl -L https://get.rvm.io | bash -s stable --ruby

 

 

安裝Ruby 1.9.3

1 2 3

rvm install 1.9.3 rvm use 1.9.3 rvm rubygems latest

 

 

 

安裝 Octopress

將 Octopress的項目clone到本地:

1 2	git clone git://github.com/imathis/octopress.git octopress cd octopress

 

 

更新ruby源,將官方的ruby源替換成國內淘寶的源。

1 2 3

gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem sources -l

 

 

 

接下來，安裝依賴：

1 2	gem install bundler # 若遇權限問題加上sudo從新執行，並輸入密碼。 bundle install

 

 

最後安裝 Octopress

1	rake install # 安裝octopress默認主題

 

 

修改Octopress初始配置

1 2	ls # 查看當前目錄全部文件 vim _config.yml # 經過vim編輯主要配置

能夠看到以下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

# ----------------------- # # Main Configs # # ----------------------- # #網站地址，這裏是GitHub項目地址,爲必填 url: http://userName.github.io #網站標題 title: user的博客 #網站副標題 subtitle: 天行健，君子以自強不息。 #網址做者 author: userName #搜索引擎 simple_search: https://www.google.com/search #網站的描述，出如今HTML頁面中的 meta 中的 description description:

 

 

 

 

 

 

 

 

 

 

 

確保在octopress目錄，執行命令

1 2	rake generate # 生成靜態站點 rake preview # 預覽靜態站點，在http://localhost:4000

 

 

 

在瀏覽器輸入localhost:4000可看到生成的博客。
Tips: 最好把裏面的twitter相關的信息所有刪掉，不然因爲GFW的緣由，將會形成頁面load很慢。

部署到GitHub Pages上

在 GitHub 上建立一個New repository,Repository name即項目名稱命名規則爲 userName.github.io，userName必須與用戶名稱一致。 Tips:最好不要勾選README，省得同步到遠程倉庫的時候須要作額外的pull操做。

---

將本地代碼倉庫同步到GitHub.

1	rake setup_github_pages

 

 

綁定遠程倉庫

1	git@github.com:your_username/your_username.github.io.git # 或者https://github.com/your_username/your_username.github.io

 

 

建立一篇文章

1	rake new_post["title"]

 

 

生成新的文章在source/_posts/目錄下

1 2	cd source/_posts # 命令行cd到posts目錄下 open ./ # 打開目錄文件夾

 

 

 

這個時候會在目錄裏看到.markdown後綴的文件，咱們能夠經過一些第三方的Markdown編輯器打開。在這裏我使用的是Mou(下載地址：這裏)，Mou附帶實時預覽，文檔說明裏也將markdown語法說的很詳細，這裏再也不贅述。

編輯完成後生成靜態站點，終端執行命令：

1	rake generate # 此命令需在octopress根目錄執行，若當前目錄爲source/_posts，執行兩次cd ..返回到根目錄再執行此命令。

 

 

預覽本地的站點，執行指令：

1	rake preview

 

 

在瀏覽器打開localhost:4000 查看網頁效果效果。若是沒有問題能夠將靜態站點同步到 GitHub遠程倉庫中。執行命令

1	rake deploy ＃同步到GitHub服務器

 

 

打開GitHub稍等一下子，就會看到咱們的靜態網頁已經被同步到GitHub倉庫的master分支上了。瀏覽器訪問訪問username.github.io，就會發現我的博客已經建立成功。

最後，建立source分支。Octopress的Git倉庫(repository)有兩個分支，分別是master和source。

• source分支存儲的是生成博客的源文件，在octopress根目錄下。
• master分支存儲的是博客網站自己master的內容，在根目錄的_deploy文件夾內，當你push源文件時會忽略，它使用的是rake deploy命令來更新的。

1 2 3 4

git checkout source git add . git commit -m "comment" ＃"comment"爲提交的log日誌 git push origin source

 

 

 

git操做代碼以下：

1 2 3 4 5 6

git remote -v # 顯示全部遠程倉庫 git pull origin source # 取回遠程倉庫的變化 git branch # 列出全部本地分支 git checkout [branch-name] # 切換到指定分支，並更新工做區 git merge [branch] # 合併指定分支到當前分支 git log # 查看當前分支的版本歷史

 

 

 

 

 

Tips: 關於Octopress的個性化配置和在多臺設備間同步使用，會在以後的文章中更新。

原文地址：http://wanxudong.top/blog/2017/04/07/octopress-plus-github-page-da-jian-ge-ren-bo-ke/

---

參考文章：

• 象寫程序同樣寫博客：搭建基於github的博客
• 製做我的博客站（一）：Mac系統下使用 Octopress + GitHub Pages 搭建我的博客
• octopress博客搭建和個性化配置
• Octopress重裝或者多臺電腦上並行寫做同步