该文章同时发布在我的github blog上:http://cheukyin.github.io/jekyll/emacs/2014-08/org2jekyll.html

1 前言

在这个月之前,我一直都是Vimmer,可是VimScript语法令人无语的混乱和棉花般的软弱无力,让我苦恼不已,可是工作学习却对其颇多依赖,始终舍之不得。 然而,就在上个月,我无意瞥了一眼我那肿胀庞杂臭长不堪的.vimrc,一眼…便失去了维护的信心,放弃Vim,自然只能转投Emacs。 经过一个月的反复折腾和深入研究后,我越加感受到神之编辑器的神圣魅力。种种以前感受到却想不到、想得到而做不到的操作方式,一一呈现。

如此神器,有如神迹!

既然长缨在手,自然要将之发挥至极至。恰逢最近打算用Jekyll生成静态站点上传至Github上搭建博客,于是想到了Org-Mode。

2 Jekyll部署

可以参考Github Help

Jekyll 是一个将 markdown 文档发布成HTML静态站点的 ruby 程序。Jekyll部署是指本地部署,在本地搭建站点测试。

2.1 安装

ruby : version>=1.9.3

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

Jekyll : 在 site根目录 下添加文件 Gemfile ,并输入

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

bundle install

2.2 运行

jekyll serve& 运行服务器

通过 http://localhost:4000 访问博客

以后若博客有改动, jekyll build 重新生成页面即可。

2.3 目录结构

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 才是王道。

2.4 上传至Github

在Github上申请一个名为 Username.github.io 的仓库,然后将博客站点目录上传。

然后访问 Username.github.io ,便可访问主页(首次上传需要等二十多分钟方能看到)。

注: Username 为你的 Github 帐户名

2.5 SEO

2.6 代码高亮

可用我写的_pygment-html.py 脚本对 org-mode 生成的 html 文件进行代码高亮,详情可见博文: 用Python高亮org-mode代码块

3 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 至最新版。

3.1 配置

对于Jekyll而言,只能作用于 _post 目录中的 markdown 文件,若要用 Org-Mode ,需要将 org 文件转换成 html 文件。又因为md文件允许内嵌HTML,因此便可利用Org-Mode的HTML发布功能:

  • 在站点目录中新建 _org 目录,并在其下建三个子目录: _assest , _posts , _drafts
  • 加入我的配置文件:init-org-jekyll.el ,更改其中 org-publish-project-alist 中的部份参数(将其中的目录改成你自己的)

3.2 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 中

3.3 基本操作

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 ^ 根据当前列排序,可以选择排序方式

3.4 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

4 有待深究

  • [ ] 图片插入
  • [ ] 公式插入
  • [ ] SEO
  • [ ] 固定侧栏Catorgories等
  • [ ] 添加跟随页面移动、可弹出的Table Of Contents
  • [ ] 寻找更好输入法
  • [ ] 代码块输出html颜色改进

用Org-Mode和Jekll写博客的更多相关文章

  1. 新功能发布!Markdown写博客!

    有一种神奇的语言,它比html还简单,它巧妙地将内容与格式整合在一起--它就是Markdown. 现在我们实现了博客对Markdown的内置支持,可以让您轻松地在园子里用这个神奇的语言写博客! &qu ...

  2. 第一次写博客Poj1044

    Date bugs Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3005   Accepted: 889 Descript ...

  3. (转)[BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  4. 推荐几款自己写博客使用的Ubuntu软件

    使用Ubuntu桌面有段时间,到现在也写过几篇博客了,期间用到的几款好用的软件推荐给大家.1. 图片简单编辑软件gthumbubuntu默认提供shotwell查看图片,类似与windows的图片查看 ...

  5. QQ表情动图,增加写博客的乐趣

    QQ表情动图,增加写博客的乐趣 body{margin:0px;}

  6. 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读&lt;&lt;黑客与画家&gt;&gt; 有感

    上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...

  7. 好久没有写博客了,发现Live Writer也更新了

    最近由于工作变动,工作内容和心态也有所变化,所以很久没有写博客了,而且我的开源项目深蓝词库转换也很近没有更新了.今天打开LiveWriter发现居然有新版本,于是果断更新.现在新的LiveWriter ...

  8. 150922-写写博客监督下不自觉的自己-PPT,Linux,HTML

    开始学PHP的日子里,总是懒散的有一天没一天的.无意间听闻写博客来展示代码(现在还远远做不到哇),来监督个人每天的学习进度,鉴于自己还是爱写一点文字,但愿可以坚持下去. 凡是都喜欢有个计划,骨子里的理 ...

  9. 第一次尝试用 Live Writer 写博客

    之前在官网上下载了最新版的Windows Live Writer,可是安装不了,就在其他网站下了一个试试,可以安装,不过却是2009年的版本,很不喜欢,我希望能体验最新版的,回头还得重新下个最新版的安 ...

随机推荐

  1. PHP的输出缓冲区(转)

    什么是缓冲区?简单而言,缓冲区的作用就是,把输入或者输出的内容先放进内存,而不显示或者读取.至于为什么要有缓冲区,这是一个很广泛的问题,如果有兴趣,可以在网山找下资料.其实缓冲区最本质的作用就是,协调 ...

  2. Linux监控工具介绍系列&mdash;&mdash;free

    在Linux系统中,我们查看.监控系统内存使用情况,一般最常用的命令就是free.free命令其实非常简单,参数也非常简单,但是里面很多知识点未必你都掌握了.下面总结一下我所了解的free命令.如有不 ...

  3. MVC知识进阶01

    下面是在项目中有关于MVC的知识总结,有些地方若不对,请指出. 一:MVC的基本知识 1 名词解释    *惯例优先原则<约定大于配置>:是一种开发设计模式,说是在项目里面使用事先规定的命 ...

  4. BZOJ1950 : [Ceoi2006]Link

    显然在最优解中,添加的边都是从$1$出发的. 这个图是一个环套树的结构,对于树的部分,显然叶子节点必须加边. 因此可以自底向上确定树中哪些节点需要加边,同时得到$1$到环上每个点的距离. 对于每个环, ...

  5. zipalign内存对齐优化

    zipalign:android中SDK下tools文件夹 用来对资源文件的内存进行对齐优化 手工命令: 优化:zipalign -v 4 source.apk destination.apk 4: ...

  6. Android中获取IMSI和IMEI

    TelephonyManager mTelephonyMgr = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE); Str ...

  7. Activity 【生命周期】

    不同情况下的回调 我们打开应用时先后调用了onCreate()->onStart()->onResume 当我们按BACK键时,我们这个应用程序将结束,这时候我们将先后调用onPause( ...

  8. 数据挖掘之分类算法---knn算法(有matlab例子)

    knn算法(k-Nearest Neighbor algorithm).是一种经典的分类算法.注意,不是聚类算法.所以这种分类算法 必然包括了训练过程. 然而和一般性的分类算法不同,knn算法是一种懒 ...

  9. 解决vmware卡的要死

    如题: 一般而言虚拟机不会卡的.CPU跟随你的操作而增减,内存设置vmware的推荐值就好.遇到卡的情况,检查一下如下情况. 两个方法: 1>内存分配最好是1G,512少了点 2>虚拟机的 ...

  10. lua学习

    在lua中,一切都是变量,除了关键字. 1.注释: 单行注释: 连续两个减号“--”表示注释的开始,一直延续到行末.相当于C语言中的“//” 多行注释:由“--[[”表示注释开始, “]]”表示注释结 ...