How to Use Octopress
Something about Octopress
紀錄如何使用github + octopress架個人網站,順便讓自己熟悉一下Markdown語法。
- 如果是第一次聽到git的人可能要先去熟悉一下git的操作方法,可以到CodeSchool學一下基本的操作方法。
- octopress的介紹可以看看高手的介紹
- 關於markdown的好處跟介紹可以參考此連結
- 環境似乎是在 Mac or Ubuntu 會相對比 Windows方便
Outline :
1. 創建github repository
2. 架設Octopress環境
3. 使用Octopress 發文/刪文
4. 更換Octopress theme
5. 如何在別台電腦上clone你做好的octopress環境
6. 編寫Markdown好用軟體
1. 創建github repository (前提是你已經有github帳號,如果沒有就去註冊)
這邊介紹我使用的方法,登入github之後選擇 + New repository,並且在Repository name的地方填上 username.github.io,之後你就會生出一個叫做username.github.io的Repository,這個就是以後作為你的github page使用。
2. 架設Octopress環境
如何架設Ocotpress環境可以參考官方網站 大概就是
- 安裝 git
- 安裝 ruby 1.9.3 ,較建議使用 rvm 安裝
- 最後一個 Install one of the ExecJS supported JavaScript runtimes. (我沒安裝)
當這些環境都弄好之後,當然就是要把octopress 從git clone下來囉
$ git clone https://github.com/imathis/octopress
$ cd octopress
$ rake install
$ rake setup_github_pages
在這之後他會要求你的github repository, 你可以進到你的github repository右邊有個 SSH clone URL 裡面框框的內容直接複製貼上就可以,如果你第一步跟我是一樣的話,你的這串字應該是 git@github.com:username/username.github.io.git,然後再輸入指令如下:
$ rake generate
$ rake deploy
他就會把目前你的這些東西都推到你的github page上了,這時你可以連到你的github page看看囉(如果沒有生效可能要等一下下)
然後你要把目前目錄下的所有東西push到git上面做個備份
$ git add .
$ git commit -m "github first commit"
$ git push origin source
此時你的github repo會有兩個branch一個是source 一個是master,source是你目前這個octopress資料夾下的所有檔案除了_deploy,而master呢就是你實際的網頁內容(_deploy資料夾裡面的部分)
3. 使用Octopress發文/刪文
發文
$ rake new_post['文章標題']
Octopress會生成個 *.markdown 到你的./source/_posts/ 下面,就我理解這個有點像是原始檔(Markdown Source Code),然後你可以在 *.markdown中用markdown語法寫文章存檔,然後執行
$ rake generate
他會去編譯 *.markdown變成 *.html 放到 _deploy的某個目錄中,然後再執行
$ rake deploy
他會把_deploy新增的或者是刪除的push到github做修改,在po好文章之後你只有把html的部份上傳,可是*.markdown的部分並未上傳做備份,記得再輸入
$ git add .
or
$ git add "新的file path"
then
$ git commit -m "一些敘述"
$ git push
刪文
有了剛剛些概念後應該可以大概知道,使用
$ rake new_post["post_name"]
他其實是幫你把 *.markdown生成到source/_posts/…,然後再透過
$ rake generate
去把html檔生成出來,也就是說如果要刪文的話,你可以到source/_posts/…,去找你想要刪掉的文章
$ rm source/_posts/XXXXXX.markdown
然後在執行
$ rake generate
$ rake deploy
這樣他就會去把在github上面的相關 html給刪除
或者是你可以直接在*.markdown上面有一串字描述這篇文章的屬性的
---
layout: post
title: "How to use Octopress"
date: 2015-06-16 23:30
comments: true
external-url:
categories: octopress
published: true
---
加入pulished屬性,然後把它改成false。
4. 更換Octopress theme
來來來來看這篇你大概就知道怎麼更換Octopress theme囉,連結裡面那篇是一個叫做Slash的主題,非常的簡約風格,就是我現在使用的這個,照著他教學做,你也可以跟我的風格一樣囉
5. 如何在別台電腦上clone你做好的octopress環境
這件事是困擾我最久的,也是我搞最久的,剛好有找到一個很好的教學,前提你架設過octopress然後在github也有紀錄,你是想在另外一條電腦上發文章,你該怎麼複製出一份一樣的環境呢(octopress最基本的ruby跟git是一定要有的)
$ git clone -b source git@github.com:username/username.github.com.git octopress
$ cd octopress
$ git clone git@github.com:username/username.github.com.git _deploy
$ gem install bundler
$ bundler install
不用再執行
$ rake setup_github_pages
直接可以使用囉。
6. 編寫Markdown好用軟體
Miu
這套僅僅在OSX才有。
Mou
這套是別人品持著Miu的概念,在Windows下開發的Markdown editor。
GitBook editor
這套聽起來就很Git,他是專門拿來寫書用的, 不過應該也可以拿來寫單一頁Markdown文章。
小筆記
在文字前面加上
<a name="something">
後面加上
</a>
可以在文章上面產生一個Internal link, 在想要link到這段的文章給上連結 #something 就可以了,不過在這太放太近了可能感覺不出來,Outline的連結也是這樣做的,可以試試看.
例如:
Go To Case1
Go To Case2
Case1: this is case1
Case2: This is case2
其原始碼為:
Go To [Case1](#case1)
Go To [Case2](#case2)
<a name="case1">Case1</a>:
this is case1
<a name="case2">Case2</a>:
This is case2