加快Octopress 編輯文章的script

Apr 10th, 2015 8:30 am | Comments

之前有提到Octopress在文章夠多的時候產生網頁很慢，有號溝的方法。每次要用的時候都要打一狗票。偷懶是組裝工的美德，所以寫了一個script，喜歡的人自己拿去用吧。

這個script主要是

例行檢查
isolate、preview、generate文件

#!/bin/bash
# Check parameter
if [ "$#" = "0" ] ; then
    echo "usage: $(basename $0) [octopress markdown flie]"
    exit
fi

# Check file
if [ ! -f "$1" ] ; then
    echo "No such file: $1"
    exit
fi

# Let's create and process markdown
rake isolate[$1]
rake generate
rake preview
rake integrate
rake generate

透過 Virtualbox 安裝Linux到USB Disk上

Apr 3rd, 2015 7:21 pm | Comments

想說裝個Ubuntu 到USB 3.0 Disk上，隨手紀錄一下

事先準備

USB 3.0 Disk，寫入速度愈快愈好。另外你要看你喜歡的Linux Distribution決定USB空間大小。我是隨便買個299號稱寫入速度20MB的16G USB Disk。
安裝VirtualBox
你喜歡的 Linux Distribution iso檔案
USB 插槽要2.0，很遺憾3.0目前為止Virtual Box不支援。不用鐵齒，我在這邊浪費三小時生命。

測試環境

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

$ vboxmanage --version
4.3.26r98988

使用Virtualbox 安裝Linux 到 USB disk

Virtualbox 新增machine，只要把光碟設成ISO檔。不用新增硬碟。
開機Virtualbox machine，出現GUI後，到Virtualbox machine　的 Device -> USB 挑你要安裝的USB volume。
開始安裝。因為USB disk有寫入次數限制，所以我不開swap。剩下就是下一步下一步，除非你玩Arch Linux或是Ubuntu server。順帶一題，我安裝Ubuntu server 到USB失敗kerker。

使用Virtualbox 從USB Disk 開機

這邊有幾個要注意的地方

你要有USB 的對應partition 的device node權限。精確的來說，你要在disk的group中。請用下面的指令
- sudo usermod -G -a disk $USER
- 血的教訓，usermod -G一定要加-a，不然你group就會只有disk，如果剛好你的帳號是唯一在sudogroup的話，就只好拿rescue disk開機救回了。
- 目前我只能logout session重新login才能更新group。
你要讓virtualbox 可以直接用USB disk對應的partition 開機。請用下面的指令。
- VBoxManage internalcommands createrawvmdk -filename /path/to/file.vmdk -rawdisk /dev/sdx

接下來就是開另外一個新的Virtualbox machine，指定該檔案。打完收工！

安裝後設定

主要是要減少寫入Disk的機會，目前找到的方式有

關掉瀏覽器的cache
mount disk option加入noatime
安裝zram-config
把/tmp改成tmpfs

參考資料

加快Octopress 修改/新增文章發佈前 Preview速度

Apr 1st, 2015 12:12 am | Comments

搬了一百多篇文章後，很明顯地發現Octopress產生頁面速度慢到爆炸，有多慢呢？大概下了rake preview指令後要幾十秒才能更新。我猜測rake preview實作上可能是把source/_posts全部都抓起來重新產生頁面造成的問題。

目前能夠找到的方法只能算是workaround，勉強可以號溝。整理如下

(optional) rake newpost['新的title']
rake isolate['你要修改的檔名']
- 其實這個命令單純產生source/_stash目錄，然後把你rake isolate以外的檔案搬到這邊。換句話說，目前source/_post下面只有你isolate起來的那一篇。
因為2，rake preview速度飛快，你就快樂的修改你的文章，一存檔馬上就可以看到變化。
修改完畢後，要用rake integrate剛才搬出去的文章搬回來。
悲劇的地方在這邊，你還是得rake generate把所有的文章從markdown轉成HTML，時間一樣漫長。
rake deploy發佈到Github
記得把更改和新增的檔案commit並push到origin source

總之，就是號溝。如果有更快的工具，支援Markdown和Github page，我會很慎重地考慮再搬一次。

參考資料

Speed up Octopress generation

Add Categories List Plugin to Octopress

Mar 31st, 2015 1:54 am | Comments

安裝方式如下

下載Plugin
- 因為檔案和Octopress 的路徑重疊，懶的處理可能的git問題，所以我直接拉zip。
修改_config.yml，把custom/asides/category_cloud.html, custom/asides/category_list.html, custom/asides/top_category_list.html加入到default_asides:這段裏面。
- 最後頁面右邊會出現相對應的Category資訊
建立上方連結
- rake newpage['categories']
- 修改soource/categories/index.md，範例在這邊
- 更改source/_includes/custom/navigation.html
  - 加入<li><a href="/categories">Categories</a></li>
- rake generate
  - 不確定這個是否可以省略
- rake preview
  - 看看有沒有錯誤
- rake deploy
- 記得把更改和新增的檔案commit並push到origin source

參考資料

Octopress Top Categories Plugin

Bash Autocomplete for Octopress

Mar 31st, 2015 12:39 am | Comments

被bash_completion慣壞了，所以用Octopress的指令要打參數很煩，乾脆自幹一個。如果有需要的朋友就自行取用吧..

GitHub URL

Modify Footer in Octopress

Mar 30th, 2015 12:23 am | Comments

步驟如下：

更改source/_includes/custom/footer.html
rake generate
- 不確定這個是否可以省略
rake preview
- 看看有沒有錯誤
rake deploy
記得把更改的檔案commit並push到orgin source

目前的頁面最後已經加上了CC-BY-NC說明，就是將source/_includes/custom/footer.html內加上相關HTML tag的。

參考資料

Octopress: Theming & Customization

Octopress 產生 About頁面

Mar 29th, 2015 11:13 pm | Comments

順序如下

切到Octopress根目錄
rake newpage['about']
Octopress會幫你產生source/about/index.md
開始修改source/about/index.md
修改source/_includes/custom/navigation.html
- 範例
rake generate
- 不確定這個是否可以省略
rake preview
- 看看有沒有錯誤
rake deploy
記得把更改和新增的檔案commit並push到origin source

參考資料

Add ‘About’ Page in Octopress
- 這邊資料無法直接套用，不過當初估狗到這個至少讓我知道大概的方向，該給的Credit還是要給。
- 2015/Mar/31更新，後來發現直接rake newpage['頁面名稱']，Octopress就會幫你產生source/頁面名稱/index.md以及相關的metadata。

Octopress Markdown 支援syntax Highlight列表

Mar 29th, 2015 9:09 pm | Comments

看Octopress手冊看到支援的列表，貼出來方便以後查詢。

Pyments 支援語法

安裝octopress並佈署到github Pages上面

Mar 25th, 2015 8:40 pm | 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有行數，歐耶。

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

測試環境
預先準備
安裝Octopress
設定網頁資訊
撰寫及發表文章
Octopress注意事項
參考資料

測試環境

$ 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需要的軟體

$ 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
安裝Octopress
指定你要deploy到Github

下載Octopress

官方網址如下

Octopress Github

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

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

安裝Octopress

$ rake install

指定你要deploy到Github page

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

$ 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應該就會有網頁畫面了。

$ 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吧？

$ 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

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。

$ rake generate
$ rake deploy

撰寫及發表文章

撰寫文章

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

$ rake new_post["你的標題"]

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

$ 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，要如何做呢？很簡單

$ rake preview

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

$ rake deploy

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

$ 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檔案出了問題。

參考資料

Hello World

Mar 25th, 2015 12:06 am | Comments

hello.c

#incldue <stdio.h>
int main(int argc, char **argv)
{
    printf("Hello World\n");

    return 0;
}

← Older Blog Archives Newer →