用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颜色改进