用Org-Mode和Jekyll寫博客

前言

在這個月以前，我一直都是Vimmer，但是VimScript語法使人無語的混亂和棉花般的軟弱無力，讓我苦惱不已，但是工做學習卻對其頗多依賴,始終舍之不得。 然而,就在上個月，我無心瞥了一眼我那腫脹龐雜臭長不堪的.vimrc，一眼…便失去了維護的信心，放棄Vim,天然只能轉投Emacs。 通過一個月的反覆折騰和深刻研究後，我越加感覺到神之編輯器的神聖魅力。種種之前感覺到卻想不到、想獲得而作不到的操做方式，一一呈現。

如此神器，有如神蹟!

既然長纓在手，天然要將之發揮至極至。恰逢最近打算用Jekyll生成靜態站點上傳至Github上搭建博客，因而想到了Org-Mode。

Jekyll 部署

能夠參考Github Help。

Jekyll是一個將markdown文檔發佈成HTML靜態站點的ruby程序。Jekyll部署是指本地部署，在本地搭建站點測試。

安裝

ruby : version>=1.9.3

bundler : ruby的包管理器， gem install bundler

Jekyll : 在site根目錄下添加文件Gemfile，並輸入

source 'https://rubygems.org'
gem 'github-pages'
bundle install

運行

jekyll serve&運行服務器

經過 http://localhost:4000 訪問博客

之後若博客有改動，jekyll build從新生成頁面便可。

目錄結構

Directory structure:

/home/**/Repo_Dir
├── ...Other files in Repo
├── assets(D)
│ ├── images(D)
│ └── themes(D)
├── atom.xml
├── config.rb
├── _config.yml
├── _includes(D)
│ ├── custom(D)
│ ├── JB(D)
│ └── themes(D)
├── index.html
├── _layouts(D)
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _org(D)
│ ├── _drafts(D)
│ ├── assets(D)
│ └── _posts(D)
├── _plugins(D)
├── _posts(D)
├── robots.txt
├── rss.xml
├── _site(D)
├── sitemap.xml
(D) for Directory

_config.yml: 整個站點的配置文件，存放全局變量（如插件信息，CDN節點或者做者信息等），可經過liquid語言的site.XXX訪問。
_layouts: 存放頁面佈局模板
_posts: 存放用markdown寫就的博文
_org: 存放利用org-mode寫就的文章，利用emacs生成md文件發佈至_posts目錄，稍後會詳細介紹。
_includes: 存放頁面插件，所謂插件，就是某段可重用的HTML或JS代碼（如主題模板，評論界面等），利用{% include **/** %}可嵌入頁面中
_assets: 存放圖片，主題CSS，JS等靜態資源
_plugins: 存放Jekyll插件，通常爲Ruby腳本程序
_index.html: 博客網站主頁
_site: 運行jekyll build生成的所有靜態頁面，最終產物
Jekyll就是一個利用模板化生成HTML的程序，自己沒什麼好研究的，最多就是了解一下 liquid語言，由於當中的自動化工做都是經過liquid實現的。博客搭建剩餘的就是常規的前端工做，所以寫好CSS和JS纔是王道。

上傳至 Github

在Github上申請一個名爲Username.github.io的倉庫，而後將博客站點目錄上傳。

而後訪問Username.github.io，即可訪問主頁（首次上傳須要等二十多分鐘方能看到）。

注：Username爲你的 Github賬戶名

SEO

Baidu ： 到 百度站長平臺 登記，並申請百度統計，按其要求安裝代碼，個人安裝代碼放在_include/custom/baidu-analytics，並安裝在 _include/theme/havee/default.html底下

Ping服務： See Blog發送ping服務請求的Python實現

代碼高亮

可用我寫的 _pygment-html.py 腳本對org-mode生成的html文件進行代碼高亮，詳情可見博文： 用Python高亮org-mode代碼塊

Org-Mode

原本Jekyll是利用markdown書寫博客的，不過我的不太熟悉這種語言，並且其功能也過於簡潔，不能適應技術博客各類特殊須要，所以我選擇Org-Mode。

Org-Mode是Emacs的一種編輯模式，有着各類各樣強大到沒法想像、使人感動到cry的功能，尤適於寫文章和作筆記，總之就是 where miracle happens 啦。

如下講解基於Org-Mode 8.2, 能夠在emacs中M-x org-version檢查版本，Ubuntu能夠經過apt-get更新Org-Mode至最新版。

配置

對於Jekyll而言，只能做用於_post目錄中的markdown文件，若要用Org-Mode，須要將org文件轉換成html文件。
又由於md文件容許內嵌HTML，所以即可利用Org-Mode的HTML發佈功能:

在站點目錄中新建_org目錄，並在其下建三個子目錄：_assest,_posts,_drafts
加入個人配置文件：init-org-jekyll.el，更改其中org-publish-project-alist中的部份參數（將其中的目錄改爲你本身的）

WorkFlow

打開Emacs，M-x jekyll-draft-post，按提示輸入標題，Emacs便會在 _org/_drafts中新建該文件，在_org/_drafts中編輯的文件不會被髮布。
當文章寫好後，M-x jekyll-publish-post，Emacs便會將文章轉移至_org/_posts中
M-x org-publish，選擇jekyll-cheukyin-github-io（取決於你配置中改的名字），
Emacs會將_org/_posts中的全部org文件轉換成md文件並存於_posts中，並把 _org/_assest中圖片等靜態資源所有複製至_assest中

基本操做

Org-Mode也算是一種標記語言，旨在分離文字的結構和表現，寫做時只需把注意力放在內容上。它用一系列的標號來標識文字的分級等，至於每層文字的樣式則交由CSS管理。

• 標題： 輸入*，有幾個*，表明幾級標題

• 段落： 按一次Enter，發佈時只有一個空格，按兩次Enter纔算從新開一段

• 內部post連接：如我要連接到2014-08-04-ping-service.html這篇文章，則這樣寫

  @@html:<a href="{% post_url 2014-08-04-ping-service %}">@@Blog發送ping服務請求的Python實現@@html:</a>@@

• Anchor

  • 添加Anchor
    <<anchor>>

  • 連接到anchor
    [[anchor]]

• 字體

  • 粗體： 夾在兩個*間

  • 斜體： 夾在兩個/間

  • 下劃線：夾在兩個_間

  • 上下標：^或_{}，{}之間放文字，須要M-x customize-variable，將org-use-sub-superscript設成{}

  • 強調： 夾在兩個~或兩個=之間，發佈成HTML時會轉換成<code></code>

• 列表

  • 無序列表以-、+或者開頭

  • 有序列表以1.或者1)開頭

  • 描述列表用::

• 表格

  • 創建和操做： 在某一行頂格的位置輸入|，而後輸入表格第一行第一列的內容，再輸入|

  • 標題：#+CAPTION: 表格的標題

  • 列長限制，以下面，將列長限制爲6

    |   | <6>    |
    | 1 | one    |
    | 2 | two    |
    | 3 | This=> |
    | 4 | four   |

  • 計算：如一張3*3表格，在第二行第三列中輸入=$1*$2。$1和$2表示第一列和第二列，C-u C-c C-c強制org-mode爲整個表格進行計算，若只但願在某一特定項上進行計算，可在等號前再加一個:

• 快捷鍵

  • 縮進：C-q TAB

  • 連接：C-c C-l

  • 摺疊

  S-TAB	循環切換整個文檔的大綱狀態
  TAB	循環切換光標所在的大綱狀態

  • 大綱或者列表之間移動

  C-c C-n/p	移動到下上一個標題(不斷標題是哪一級)
  C-c C-f/b	移動到同一級別的下/上標題
  C-c C-u	跳到上一級標題
  C-c C-j	切換到大綱預覽狀態

  • 基於大綱/標題的編輯

  M-RET	插入一個同級別的標題
  M-S-RET	插入一個同級別的TODO標題
  M-LEFT/RIGHT	將當前標題升/降級
  M-S-LEFT/RIGHT	將子樹升/降級
  M-S-UP/DOWN	將子樹上/下移動
  C-c *	將本行設爲標題或者正文
  C-c C-w	將子樹或者區域移動到另外一個標題處(跨緩衝區)
  C-c C-x b	在新緩衝區顯示當前分支
  C-c /	只列出包含搜索結果的大綱，並高亮，支持多種搜索方式
  - or +	更改列表序號樣式

  • 表格

  C-c 豎線	建立或者轉化成表格
  C-c C-c	調整表格，不移動光標，並計算公式
  TAB	移動到下一區域，必要時新建一行
  S-TAB	移動到上一區域
  RET	移動到下一行，必要時新建一行

  M-LEFT/RIGHT	移動列
  M-UP/DOWN	移動行
  M-S-LEFT/RIGHT	刪除/插入列
  M-S-UP/DOWN	刪除/插入行
  C-c -	添加水平分割線
  C-c RET	添加水平分割線並跳到下一行
  C-c ^	根據當前列排序，能夠選擇排序方式

Org-Babel

Babel，即巴別塔，聖經所載，巴別塔若要完工，需各類語言互通。所以，Org-Babel的做用便在因而各類編程語言和諧協調地運做於同一篇文檔中，即Literate Programming（文學化編程）。

Org-babel的工做方式很簡單，在Org-Mode中嵌入相應語言的代碼，而後C-c C-c，Emacs便會調用相關的 interpreter 執行代碼，並按照用戶要求的格式生成結果，並且不一樣語言的代碼的執行結果能夠互爲輸入，實是寫報告、寫文檔、居家旅行、殺人放火的必備良方。

所以，上帝禁止的巴別塔建成了，在Org-Mode裏！

就如上文的目錄結構圖即是在博文的org文件中嵌入shell命令tree，指定發佈html是隻輸出結果而獲得的。

#+BEGIN_SRC sh :results output :eval no-export :exports result 
echo "Directory structure:"
tree  -L 2 ~/Cheukyin.github.io
#+END_SRC

Org-babel支持的語言能夠在/usr/share/emacs/site-lisp/org-mode/ob-*下看到。

想要添加語言，能夠修改變量org-babel-load-languages

經常使用參數：

• :exports result | code | both | none

• :var varname=value 代碼中可用的變量

• :eval no-export | 不設置

• :result output | value

有待深究

[ ] 圖片插入
[ ] 公式插入
[ ] SEO
[ ] 固定側欄Catorgories等
[ ] 添加跟隨頁面移動、可彈出的Table Of Contents
[ ] 尋找更好輸入法
[ ] 代碼塊輸出html顏色改進