用Org-Mode和Jekll写博客

该文章同时发布在我的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颜色改进
时间： 2024-10-27 07:02:08

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

关于写博客，看博客

每次看到很多人坚持写那么多的好博客,我都会产生怎么自己不写博客的想法.于是乎,在激情的驱使下就会随手写几段文字,然后就不了了之了. 今天又看了cici珵的博客(北大cs本科,博士,美女),再次萌生了写自己的博客的想法. (似乎又要开始写自己这个人怎么怎么样,兴趣广泛,但是做事情不够努力:目标很多,但是不能坚持去做,这些对个人的分析了.反正每次真正着手做一件事情之前总是想分析一下之前怎么怎么做的不好.) 关于cici珵,是昨天刷知乎,看到覃超(覃超大魔王)的知乎专栏文章,关于楼教主从google离

纪念下今天，开始写博客了

还有一年大学毕业,借着剩余稍微空闲的时间,总结下自己所学.从专注学习web前端算起来快有一年了. 前前后后经历了许多.在web这个领域,除了自学意外,程序员之间口口相传才能深入学习,总结是必不可少的.希望自己能坚持下去 纪念下今天,开始写博客了,布布扣,bubuko.com

为什么我要写博客

记得两年前我申请过开通博客后来没被批准,后来不了了之. 工作中经常会遇到自己解决不了的问题,也都是在网上去查询相关的博客,学到了很多东西! 想想之前没有写博客的时候,学过很多东西,也都记录了笔记,到现在都不知道放到哪里去了,而写到博客里面,不仅自己可以使用,在忘记的时候拿出来看看,还可以为遇到同样问题的朋友提供一点参考,去解决遇到的同样问题,一起节省时间. 偶尔还可以用博客吹吹牛,调侃调侃

windows live Write写博客测试

测试下windows live Write离线写博客. 博客地址:http://hy2009.blog.51cto.com/ http://hy2009.blog.51cto.com/xmlrpc.php Metaweblog API 发布地址:http://hy2009.blog.51cto.com/xmlrpc.php

技术人员为什么要写博客？

1.技术人员写博客的好处 技术经验积累的过程: 有利于形成资料存档,便于以后查阅: 有利于行业内的交流: 有利于提升写作水平: 2.技术人员不写博客的原因 我不认为自己是某个方面的专家: 我写的东西有些错误怎么办: 我写的东西有人看吗: 我的写作水平好差: 3.技术人员写博客的信心 写自己专注的,感兴趣的东西: 坚持: 多与读者互动: 分享文章,证明你是一个热爱学习技术的人,证明你的技术在进步:

测试01，这是在使用Open Live Writer写博客

这是在使用Open Live Writer写博客

[BetterExplained]为什么你应该（从现在开始就）写博客笔记

为什么你应该(从现在开始就)写博客: 用博客的形式来记录下你有价值的思考,会带来很多好处,却没有任何明显的坏处. (一)为什么你应该(从现在开始就)写博客 能够交到很多志同道合的朋友. 书写是为了更好的思考. “教”是最好的“学”.如果一件事情你不能讲清楚,十有八九你还没有完全理解. 讨论是绝佳的反思. 激励你去持续学习和思考. 学会持之以恒地做一件事情. 一个长期的价值博客是一份很好的简历. (二)怎么做到长期写一个价值博客 让你自己成为一个持续学习和思考的人,并只写你真正思考和总结之后的产物

终于决定要开始写博客了

一个还在读大一的学生,因为喜欢计算机方面的技术而开始自己的学习 看得编程相关的书籍不多,关于 C语言 的就只是我们的课本(没错,就是谭浩强先生编写的<C程序设计>) 所以在理论知识和技术上还是有很多的不足 因为前段时间要改学校的网站,就自学了下 ASP.NET,用的语言是C#,看了些学校图书馆的书籍 现在能做得就是简单显示和 SQL数据库连接 本来了是要自己用所学的搭建一个博客小站,可惜发现自己的技术储备还是不够(终极原因是我懒的做 Σ( ° △ °|||)︴) 所以了选择了先在博客园这个大神

这么久不写博客的原因

从13年到14年,这段时间基本上没有在写博客了,原因就是因为有了Evernote,所有的秘籍.学习感悟的东西都记载在里面.时间过得真快,15年已经开始了,evernote固然好用,但是毕竟是属于私人的东西,独乐乐不如众乐乐,今后,所有可以放到网上的技术相关的东西,都还是放到网上. 为了能够再次写博客,在公司的机器上折腾了两天,公司的破机器啊,最终windows live writer还是没有安装成功,shit.最后只好找替代品了,最后发现了菊子曰,这货还不错,先用着.等有时间安装了office