使用 Emacs Org-Mode 写博客

建立目录结构
配置 .emacs
- 配置需要转换成HTML的内容
- 配置不需要转换成HTML的内容
Hello Org-Mode Page
个性化定制
托管到 GitHub 上
参考资料

建立目录结构

顶层位置，假定为 ~/MyPages/Myorg-mode/
在上述文件夹，建两个目录：
- notes ：这个目录就是用来存放元数据的地方，你的org文件、图片、CSS文件、PDF等全都是存放在这里的。
- html ：这个目录是用来存放导出的HTML文件的，notes 文件夹中那些非org格式的文件也会原封不动地拷贝过来。

配置 .emacs

使用 Emacs org-mode 自带的导出Project的功能，在导出之前，要做一些配置，告诉Emacs要导出哪些东西，导出到哪里，采用什么规则。基本配置框架：

(require 'ox-publish)
(setq org-publish-project-alist
      '(

        ;; 把各部分的配置文件写到这里面来

        ))

配置需要转换成HTML的内容

("blog-notes"
 :base-directory ~/MyPages/Myorg-mode/notes"
 :base-extension "org"
 :publishing-directory ~/MyPages/Myorg-mode/html/"
 :recursive t
 :publishing-function org-html-publish-to-html
 :headline-levels 4
 :auto-preamble t
 :section-numbers nil
 :author "victor72"
 :email "victoryman@126.com"
 :auto-sitemap t                  ; 自动生成 sitemap.org 文件
 :sitemap-filename "sitemap.org"  ; ... call it sitemap.org (it's the default)...
 :sitemap-title "Sitemap"         ; ... with title 'Sitemap'.
 :sitemap-sort-files anti-chronologically
 :sitemap-file-entry-format "%d %t"
 )

其中

:base-directory - 你存放笔记的目录（想将哪里的org文件导出成HTML）
:base-extension - 导出的文件格式
:publishing-directory - 导出HTML的目标目录
:recursive - 设置为t会将子目录中的文件也导出
:publishing-function - 使用哪个函数来进行publish（注：org 7与8在这个地方有区别）
:auto-sitemap - 自动生成sitemap
:sitemap-sort-files - 我这里采用的是按照从新到旧的排列方式
:sitemap-file-entry-format - 这里采用时间+标题的方式生成sitemap

配置不需要转换成HTML的内容

并不是所有的文件都需要转化为HTML的，比如说一些图片、PDF、CSS样式等，只需要原样拷贝到目标文件就行，配置代码如下：

("blog-static"
 :base-directory "~/MyPages/Myorg-mode/notes"
 :base-extension "css|js|png|jpg|gif|pdf|mp3|ogg|swf"
 :publishing-directory ~/MyPages/Myorg-mode/html/"
 :recursive t
 :publishing-function org-publish-attachment
 )

把上述两段代码插入到前面的框架里面去即可。

最后，我们再加一段代码：

("blog" :components ("blog-notes" "blog-static"))

至此，基本的配置已经完成了：上述几个部分合起来就是：

(require 'ox-publish)
(setq org-publish-project-alist
      '(
         ("blog-notes"
            :base-directory ~/MyPages/Myorg-mode/notes"
             :base-extension "org"
             :publishing-directory ~/MyPages/Myorg-mode/html/"
             :recursive t
             :publishing-function org-html-publish-to-html
             :headline-levels 4
             :auto-preamble t
             :section-numbers nil
             :author "victor72"
             :email "victoryman@126.com"
             :auto-sitemap t                  ; 自动生成 sitemap.org 文件
             :sitemap-filename "sitemap.org"  ; ... call it sitemap.org (it's the default)...
             :sitemap-title "Sitemap"         ; ... with title 'Sitemap'.
             :sitemap-sort-files anti-chronologically
             :sitemap-file-entry-format "%d %t"
         )
         ("blog-static"
             :base-directory "~/MyPages/Myorg-mode/notes"
             :base-extension "css|js|png|jpg|gif|pdf|mp3|ogg|swf"
             :publishing-directory ~/MyPages/Myorg-mode/html/"
             :recursive t
             :publishing-function org-publish-attachment
          )
         ("blog" :components ("blog-notes" "blog-static"))

        ;; 把各部分的配置文件写到这里面来

        ))

Hello Org-Mode Page

现在可以写一些 org 文件来生成 HTML 尝试一下了。在 base-directory 也就是 ~/MyPages/Myorg-mode/notes 里头随便放一些 .org 文件吧。当然最好有一个 index，自由发挥吧。

然后使用 M-x org-publish-project，输入 blog，就会自动开始生成HTML文件了。然后就可以 html 文件夹中访问了。

个性化定制

现在生成的页面还是比较单调的，只是纯 HTML 页面，当然，专注于内容的话其实这样也就够了，不过我们还是可以稍微地美化一下。

添加CSS文件

首先需要在 notes 文件夹内新建一个 css 文件夹，里面保存需要用到的 CSS 文件，比如 org-mode 官网上用的 worg.css，就非常的简洁。

然后在 blog-notes 这个配置中新增一条属性：

:html-head "<link rel="stylesheet" type="text/css" href="/css/worg.css"/>"

这样子的话再每次生成 HTML 的时候都会自动加上 CSS，建议使用绝对路径来访问css文件，要不然在 notes 文件夹中新建文件夹的时候就无效了。注意：

" " 里的内容是作为一个字符串给予 html-head 变量并插入到生成的 html 文件的 head 部，因此里面的某些字符必须避免转义，比如双引号必须加上反斜杠。
href 的赋值不会做如何转换，因此必须确保是在生成的 html 文件能够访问的绝对路径。（本文书写测试时因为不具备网络环境，只好写成相对路径了）

:html-head "<link rel=\"stylesheet\" type=\"text/css\" href=\"../notes/css/worg.css\"/>"

添加评论功能

这里使用 Disqus 的评论系统，使用 Duoshuo 的话配置过程应该也一样。

首先在 Disqus 中注册一个服务，获得一段代码，在 blog-notes 中新增加一条属性：

:html-postamble "<p class="postamble">Last Updated %C. Created by %a</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'tisogasnotes';
(function() {
         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
         })();
</script>
"

同样需要注意的是代码中的双引号前面需要加上反斜杠来转义。

添加统计功能

使用百度和 Google 的统计服务，和添加评论功能类似，还是添加在这条属性里面：

  :html-postamble "<p class="postamble">Last Updated %C. Created by %a</p>
<script>
var _hmt = _hmt || [];
(function() {
         var hm = document.createElement("script");
         hm.src = "//hm.baidu.com/hm.js?001e800887eba2f8f57ec8059aafdad6";
         var s = document.getElementsByTagName("script")[0];
         s.parentNode.insertBefore(hm, s);
         })();
</script>

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'tisogasnotes';
(function() {
         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
         })();
</script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-56515498-2', 'auto');
ga('send', 'pageview');

</script>
"

同样注意双引号的转义问题即可，注意这一段已包括 Disqus 的评论系统。

托管到 GitHub 上

生成了 HTML 文件之后需要把 html 目录托管到 GitHub 上：

$ git add .
$ git commit -m "first commit"
$ git remote add origin xxx
$ git push -u origin master

其中 xxx 为创建 GitHub 仓库的 SSH 路径。以后每次 generate 之后 add、commit、push 就可以了。

现在访问 xxx.github.io 已经可以看到博客啦：）

日知录