UP | HOME

通过 ox-publish 创建博客

一入 emacs，坑深似海！

昨天，无意之间看到了guidao 博客的网站，第一眼就喜欢上了，这就是我想要的网站呐，漂亮至极。我一直都觉得，org 生成的 html 效果是最好的。废话不多说，下面说明建站过程记录，同时也会放在我个人wiki上。

1 配置 Emacs

1.1 基本配置

 1: abstract class IntQueue 
 2: (add-to-list 'load-path "~/.emacs.d/elpa/org-20170606") ;最新版本的 org-mode 的路径
 3: (require 'ox-publish)
 4: (require 'ox-html)
 5: (setq org-publish-project-alist
 6: '(("blog-notes"
 7:  :base-directory "C:/Users/Administrator/Dropbox/org/notes/" ;org 文件的路径
 8:  :base-extension "org"
 9:  :publishing-directory "C:/Users/Administrator/Dropbox/org/public_html/";生成的 html 文件路径
10:  :recursive t
11:  :publishing-function org-html-publish-to-html ;生成函数
12:  :html-link-home "index.html" ;Home 文件的路径
13:  :html-link-org-files-as-html  org-html-link-org-files-as-html
14:  :headline-levels 5             ; Just the default for this project.
15:  :with-author nil ;去掉 author
16:  :with-email nil  ;去掉 email
17:  :with-creator nil  ;去掉 creator
18:  :with-timestamp nil  ;去掉时间线
19:  :html-postamble nil
20:  :auto-preamble t
21:  :section-numbers nil
22:  :html-head "<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/org-css.css\" />" ;引入 css 文件
23:  :auto-sitemap t                ; Generate sitemap.org automagically...
24:  :sitemap-filename "sitemap.org"  ; ... call it sitemap.org (it's the default)...
25:  :sitemap-title "Sitemap"         ; ... with title 'Sitemap'.
26:  :sitemap-sort-files anti-chronologically
27:  :sitemap-file-entry-format "%d %t"
28:  )
29: ("blog-static"
30:  :base-directory "C:/Users/Administrator/Dropbox/org/notes"
31:  :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
32:  :publishing-directory "C:/Users/Administrator/Dropbox/org/public_html/"
33:  :recursive t
34:  :publishing-function org-publish-attachment
35:  )
36:  ("blog" :components ("blog-notes" "blog-static"))
37:  ))
38:

1.2 添加 disqus 评论

首先在disqus 网站申请网站评论站点，得到以下代码放到上面的配置文件中。 

 1: abstract class IntQueue 
 2: <div id="disqus_thread"></div>
 3: <script>(add-to-list 'load-path "~/.emacs.d/elpa/htmlize-20161211.1019")
 4: (require 'htmlize)
 5: (setq org-html-htmlize-output-type 'css)
 6: (setq org-html-htmlize-output-type 'inline-css)
 7: var disqus_config = function () {
 8: this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
 9: this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
10: };
11: (function() { // DON'T EDIT BELOW THIS LINE
12: var d = document, s = d.createElement('script');
13: s.src = 'https://tonylu.disqus.com/embed.js';
14: s.setAttribute('data-timestamp', +new Date());
15: (d.head || d.body).appendChild(s);
16: })();
17: </script>
18: <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.
19: </a></noscript>

1.3 code 高亮

解决这个问题花了好长时间，emacs 学习曲线确实陡峭。在网上，找到了一个参考资料。具体做法是这样。首先，加载 htmlize.el，然后在上面配置文件中，添加一行代码。 

 1: abstract class IntQueue 
 2: (add-to-list 'load-path "~/.emacs.d/elpa/htmlize-20161211.1019")
 3: (require 'htmlize)
 4: (setq org-html-htmlize-output-type 'css)
 5: (setq org-html-htmlize-output-type 'inline-css)
 6: (setq org-publish-project-alist
 7:     '(
 8:       ("project-name"
 9:        ......
10:    :htmlized-source t 
11:        ......
12:        )
13:        ......))

完整版的配置详见我的 wiki。

2 上传 Github

在把文件上传到 github 之前，需要生成 index 文件和文档 html。

具体来说，就需要根据 index.org 文件运行 M-X org-publish-project 命令，生成 index.html 文件，对应的学习文档.org 采用同样的办法生成 html 文件。

然后把新生成的 index 和学习文档网页文件放在根目录下，上传至 github 即可成功。

上传 github 中，遇到的最大问题就是要生成一个 RSA 密钥，具体步骤参照这个链接。利用下面的程序上传文件，就能生成网站了。 

cd C:\\Users\\Administrator\\Dropbox\\org
git add -A ;本地文件有删除用-A，只有增加的文件用 .
git commit -m "add code"
git remote set-url origin git@github.com:luyajun01/luyajun01.github.io.git 
git push origin master