高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

How to Install Octopress on Heroku

為什麼使用Octopress

這個我想xdite的Why Octopress?寫得很清楚了,就不多做說明了。

安裝

請到Octopress的官網官網找下載點,或是到github上也找得到Octopress on github,如果懶得找,請打開你的終端機視窗,然後跟我這樣做:

> cd /tmp
> git clone git://github.com/imathis/octopress.git

第一步切換到/tmp只是個人喜好,你可以換成別的。進到下載的資料夾裡,安裝需要的gem:

> cd octopress
> bundle install

沒問題的話..

> rake install
## Copying classic theme into ./source and ./sass

再來..

> rake preview

就會在你本機開一個port 4000的web server起來,開瀏覽器起來輸入http://127.0.0.1:4000/可以看到畫面如下:

image

不過你會看到一些像是Blog title都是預設值,這些都是可以修改的,基本上修改都是在_config.yml這個檔案裡,相關設定請參考這裡

不難吧! 你已經完成一半的工作囉,接著我們來寫第一篇文章。

管理介面?

你是說像wordpress那種有個帳號密碼登入的管理介面嗎? 沒這種東西啦! Octopress的文章都是由markdown檔案轉成靜態html,寫完就丟上去,就這麼單純而已。

寫文章

在Octopress,每篇文章就是一個markdown檔,檔案需要放在source/_posts底下,並依照YYYY-MM-DD-post-title.markdown的格式來命名,例如我這篇的檔名就是2011-10-11-how-to-install-octopress.markdown,這樣待會在轉成靜態html的時候才會找得到。

以上這個動作你可以手動自己做,不過我會建議是透過rake指令幫你做:

> rake new_post[how-to-install-octopress]
Creating new post: source/_posts/2011-10-11-how-to-install-octopress.markdown

因為用rake幫你建立的markdown檔,會幫你加一些文章的表頭相關設定。不管你是手動還是rake自動產生的markdown檔,剩下的就是動手寫文章了。

另外,如果你的shell是用zsh的話,上面這個指令可能會讓你出現這樣的狀況:

>   zsh: no matches found: new_post[how-to-install-octopress]

如果遇到這個狀況的話,你可改一下你的.zshrc,加上這行:

alias rake="noglob rake"

或是改一下原來的rake指令:

> rake "new_post[how-to-install-octopress]"

怎麼寫?

就跟你平常寫文章一樣啦! 也許你會好奇,用markdown語法來寫文章真的方便嗎? 對我這種喜歡敲鍵盤而且又常需要在文章裡放程式碼的人來說還挺不錯用的。我是覺得只要習慣的話是還滿快的,markdown的語法要記的也沒多少,寫幾次大概就背起來了。事實上你正在看的這篇文章就是用markdown編寫的。

有推薦的編輯器嗎? 我覺得Mou挺不錯用的!

不會寫? 這裡有小抄可以參考。

寫好了,然後..?

markdown寫好之後,再來就是要把markdown轉成靜態html檔案了:

> rake generate
## Generating Site with Jekyll
unchanged sass/screen.scss
Configuration from /private/tmp/octopress/_config.yml
Building site: source -> public
Successfully generated site: source -> public

執行這個rake generate要注意的是,你可能會在你的文章裡會插入一些圖檔,請記得你的圖檔是放在source/images這個資料夾裡,而不是public/images,因為在做rake generate的時候會以source資料夾為主,並複製一份到public的相對應資料夾裡,如果你是直接把圖檔放在public裡,在比對的過程中就會被自動砍掉了。

在上傳之前

預設.gitignore會把public資料夾給忽略掉而不上傳,這個在一般的環境還ok,因為public資料夾裡的東西如果沒有的話會再自動重生,但因為我們準備把東西傳到Heroku,Heroku的檔案系統是唯讀的,不會讓你做這個動作,所以如果你也是要上傳到Heroku的,請記得修改這個檔案,把public給拿掉,不然你的轉好的內容都會傳不上去而出現Sorry, I cannot find /的錯誤訊息!

當初沒先看文件就亂玩,結果在這邊卡關卡超久..後來是翻heroku logs才發現原因,其實文件根本早就有寫了..orz

上傳到Heroku

因為待會我們要把東西丟上Heroku,所以請先上Heroku申請個帳號,Heroku的Getting Started with Heroku請先翻一下,相關gem也別忘了一起裝起來。

有帳號之後,用heroku來開個專案:

> heroku create happy-octopress
Creating happy-octopress... done, stack is bamboo-mri-1.9.2
http://happy-octopress.heroku.com/ | git@heroku.com:happy-octopress.git
Git remote heroku added

這個happy-octopress請改成你自己取的名字。再來就是把剛剛剛好的東西用git丟上去:

> git add .
> git commit -m 'first commit'
> git push heroku master
Counting objects: 3400, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (1218/1218), done.
Writing objects: 100% (3400/3400), 844.84 KiB, done.
Total 3400 (delta 1949), reused 3352 (delta 1916)

-----> Heroku receiving push
-----> Ruby/Sinatra app detected
-----> Gemfile detected, running Bundler version 1.0.7
       Unresolved dependencies detected; Installing...
       Using --without development:test
       Fetching source index for http://rubygems.org/
       Installing rack (1.3.2) 
       Installing tilt (1.3.2) 
       Installing sinatra (1.2.6) 
       Using bundler (1.0.7) 
       Your bundle is complete! It was installed into ./.bundle/gems/
-----> Compiled slug size is 608K
-----> Launching... done, v4
       http://happy-octopress.heroku.com deployed to Heroku

To git@heroku.com:happy-octopress.git
 * [new branch]      master -> master

就這樣,你可以自己打開瀏覽器,輸入網址http://happy-octopress.heroku.com,或是叫heroku幫你開:

> heroku open

沒意外的話,應該就可以看到架好的Octopress,以及你剛剛寫的文章了。

大概就是這樣,更多的說明請參考Octopress官網。若有任何問題或是有哪邊寫錯了,歡迎一起來討論囉 :)

Comments