My code works, I don’t know why.

國王的耳朵是驢耳朵

安裝octopress並佈署到github Pages上面

| Comments

昨天評估使用github.io存放網頁的技術，本來是想直接套用Jekyll的東西，無奈能力不足，Markdown的支援度不如預期。後來想到Octopress應該支援度不差。估狗了一下的確可行，順手紀錄一下安裝方式。

先說結論，Octopress + Github pages的好處有

  • 使用git管理你的content
    • 換句話說，你所更動的一切都在Github上面
  • Octopress幫你搞定
    • deploy到github page
    • local PC preview，這樣可以改到爽再commit你的content
    • 支援Markdown，簡化寫網頁的effort
    • Open source，喜歡就自己改吧
    • code block有行數，歐耶。

資料有點雜，還是弄一下目錄好了

測試環境

1
2
3
4
5
6

$ lsb_release -a
No LSB modules are available.
Distributor ID:   Ubuntu
Description:  Ubuntu 14.04.2 LTS
Release:  14.04
Codename: trusty

預先準備

github 帳號，以及開通git pages

安裝Octopress需要的軟體

1
2
3
4
5

$ sudo apt-get install ruby1.9.1-dev
$ sudo apt-get install nodejs
$ sudo apt-get install rbenv
$ sudo gem install bundler
$ rbenv rehash

安裝Octopress

基本上就照手冊來，口頭來說就是

下載Octopress

官方網址如下

1
2
3

$ git clone https://github.com/imathis/octopress
$ cd octopress
$ bundle install

bundle install會根據Octopress裏面的Gemfile安裝使用Octopress需要的Ruby套件。

安裝Octopress

1

$ rake install

指定你要deploy到Github page

跑下面的指令會要求你輸入Github Page的repository如 git@github.com:wen00072/wen00072.github.io.git

1

$ rake setup_github_pages

setup_github_pages很有趣，值得提一下他幫你做了什麼

  • 跟你討Github page的URL
  • 把你下載Octopress的repository remote名稱從origin改成octopress
  • 把你的Github page的repository設成目前git remote的origin
  • local新增source branch，從master切到該branch
  • 設定Octopress要deploy到你的Github pages
  • clone你的Github page的repository 到_deploy目錄

使用下面的指令，產生資料並上傳到你的Github page，此時直接連Github Page應該就會有網頁畫面了。

1
2

$ rake generate
$ rake deploy

再來我們直接把目前Octopress的Git repository和前面指令產生/修改新的檔案一口氣產生並加到你的Github page中的source branch吧。這個點特別有趣感覺像是做了某種移花接木的技巧，可以仔細想想他為什麼這樣做。想通了應該對於git remote會有點感覺…吧？

提示：你應該還記得前面rake setup_github_pages有提到Octopress會將你的Github page repository URL設成目前working directory git remote的orgin吧？

1
2
3

$ git add .
$ git commit -m "git add . after rake deploy"
$ git push origin source

所以現在你的Github page repository origin會有兩個branch

  • master
    • 網頁連過去看到的內容
    • 由rake deploy管控
  • source: 從Octopress拉下來的程式碼和你剛才指令新增的檔案
    • 你的content以及config由此更動

設定網頁資訊

官方網頁有提到如何更改設定。我只做最簡單的更動，就是_config.yml

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

diff --git a/_config.yml b/_config.yml
index 4bf56f1..e7de252 100644
 a/_config.yml
+++ b/_config.yml
@@ -3,9 +3,9 @@
 ## -- ##
 
 url: http://wen00072.github.io
-title: My Octopress Blog
-subtitle: A blogging framework for hackers.
-author: Your Name
+title: 國王的耳朵是驢耳朵
+subtitle: 國王的耳朵是驢耳朵
+author: Wen Liao
 simple_search: https://www.google.com/search
 description:

如果要讓你的config馬上生效，除了local commit， push到source branch外，不要忘記套用到的Github page。

1
2

$ rake generate
$ rake deploy

撰寫及發表文章

撰寫文章

撰寫文章有兩種，一個是請Octopress幫你生一個範本，指令如下

1

$ rake new_post["你的標題"]

然後Octopress會幫你產生到source/_posts/下面 來個範例

1
2
3
4
5
6
7
8
9
10
11

$ rake new_post["First"]
mkdir -p source/_posts
Creating new post: source/_posts/2015-03-25-first.markdown

$ cat source/_posts/2015-03-25-first.markdown

layout: post
title: "First"
date: 2015-03-25 22:10:45 +0800
comments: true
categories:

可以看到產生的檔案會有特定的規範。所以你也可以照樣造句，自己人肉寫一個，這就是第二種方式。不管怎樣，剩下的就是按照Markdown語法編輯檔案了。

發表文章

最開始有講過，使用Octopress的好處是可以改到爽再deploy到Github page，要如何做呢？很簡單

1

$ rake preview

接下來就是用瀏覽器連localhost:4000，如果不滿意就停止，開始改你的markdown檔案，再rake preview。改到爽為止，決定發佈就用下面的指令上傳到Github page上面。

1

$ rake deploy

上傳完畢後不要忘記local的markdown檔案並沒有commit並且更新。所以你可以做

1
2
3

$ git add source/_posts/
$ git commit -m "Hello world"
$ git push origin source

要注意git add source/_posts/第一次可以這樣做，接下來建議還是針對你的markdown檔案一個一個確認比較妥當。

這邊是我的示範網頁。

注意事項

嘗試Octopress發現和以前使用的Markdown有一些要注意的地方

  • 第一個item (我用*) 前面一定要空一行，不然系統無法辨識
  • HTML 的anchor tag (我拿來做目錄跳躍)一定要<a name="ref"></a>，以前的<a name="ref"/>會讓Octopress的排版亂到讓你想殺人。
  • 強烈建議修改sass/custom/_layout.scss，把//$indented-lists改成indented-lists，不然list的bullet對齊會很難看。
  • 如果直接rake preview發現網頁沒更新，請用rake generate檢查是否你的markdown有錯誤的語法。
  • preview的時候你的markdown更新到你可以看到網頁改變時間有點長，我這邊大概要十幾秒到二十幾秒的時間才會更動。
  • 不要一次丟太多markdown進去，因為目前rake generate會噴錯誤，但是不會跟你說在parse哪個markdown檔案出了問題。

參考資料

Comments