使用orgmode写博客

定位

在尝试了各种各样的博客工具后,我最后又回到了org mode 上了。本文的定位是帮助你只使用emacs及org mode进行博客管理,采用了 git 对博客文章进行版本管理, gitlab 的ci/cd工具,对org文件进行编译,然后部署到服务器。希望可以帮助到喜欢emacs及org mode的用户。

如何使用org mode写博客

工作流

  1. 新建文章
  2. 开始编辑
  3. 提交本次修改
  4. CI工具将org文件编译为html
  5. CD工具自动部署到服务器

开始使用org mode创建一个新的博客

创建新项目

mkdir -p blog/{articles,notes,images,css}
cd blog
touch README.md index.org
git init

基本配置

(require 'org)

(setq org-html-htmlize-output-type `nil)

(setq blog-source-folder default-directory)
(setq blog-target-folder (concat blog-source-folder "dist/"))


(setq org-html-divs '((preamble "header" "preamble")
					  (content "main" "content")
					  (postamble "footer" "postamble"))
	  org-html-container-element "section"
	  org-html-metadata-timestamp-format "%Y-%m-%d"
	  org-html-checkbox-type 'html
	  org-html-html5-fancy t
	  org-html-head-include-default-style nil
	  org-html-head-include-scripts t
	  org-html-doctype "html5"
	  org-html-home/up-format "%s\n%s\n")

(setq blog-html-preamble
	  "<div class=\"header\">
	 <div class=\"banner\">
	   <a href=\"/\">蒋大培的博客 </a>
	   <p class=\"subtitle\">爱技术,喜欢计算机编程。</p>
	 </div>
	 <nav class=\"nav\">
	   <a href=\"/\">About</a>
	   <a href=\"/cv.html\">CV</a>
	   <a href=\"/projects/\">Project</a>
	   <a href=\"/articles/sitemap.html\">Blog</a>
	 </nav>
       </div>")

(setq blog-html-postamble
	  "<div class=\"site-info\">
	 <p class=\"copyright\">Jiang Dapei • 2019</p>
	 <p class=\"generator\">Proudly published with <a href=\"https://www.gnu.org/software/emacs/\">Emacs</a> and <a href=\"https://orgmode.org/\">Org Mode</a></p>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-147457596-1\"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-147457596-1');
</script>
      </div>")

(setq blog-head  "<link rel=\"stylesheet\" href=\"/css/style.css\" type=\"text/css\"/>")

(setq org-publish-project-alist
	  `(("page"
		 :base-directory ,blog-source-folder
		 :publishing-directory ,blog-target-folder
		 :publishing-function org-html-publish-to-html
		 :html-head  ,blog-head
		 :html-preamble ,blog-html-preamble
		 :html-postamble ,blog-html-postamble)
		("projects"
		 :base-directory ,(concat blog-source-folder "projects")
		 :publishing-directory ,(concat blog-target-folder "projects")
		 :base-extension "org"
		 :recursive t
		 :publishing-function org-html-publish-to-html
		 :html-head  ,blog-head
		 :html-preamble ,blog-html-preamble
		 :html-postamble ,blog-html-postamble)
		("articles"
		 :base-directory ,(concat blog-source-folder "articles")
		 :publishing-directory ,(concat blog-target-folder "articles")
		 :base-extension "org"
		 :recursive t
		 :publishing-function org-html-publish-to-html
		 :auto-sitemap t
		 :makeindex t
		 :sitemap-title "Blog Post"
		 :html-head  ,blog-head
		 :html-preamble ,blog-html-preamble
		 :html-postamble ,blog-html-postamble)
		("resources"
		 :base-directory ,blog-source-folder
		 :publishing-directory ,blog-target-folder
		 :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf\\|svg"
		 :recursive t
		 :publishing-function org-publish-attachment)
		("blog" :components ("page" "projects" "articles" "resources"))))

博客页面

笔记

让博客更加美观

添加博客logo

发布配置

Gitlab CI

CI

stages:
  - build
  - deploy

services:
  - docker:dind

org-generation:
  tags:
    - hk
  image: iquiw/alpine-emacs
  script:
     - emacs -batch -q -l export.el -f org-publish-all
  artifacts:
     paths:
       - dist
  stage: build

blog-deploy:
  tags:
    - hk
  image: tiangolo/docker-with-compose
  stage: deploy
  before_script:
    - docker info
    - ls -a
    - ls -a dist
  script:
     - docker-compose down
     - docker-compose -f docker-compose.yml up -d --build

CD

还存在的问题

  1. 代码高亮
  2. 中文字符加粗必须存在空格隔开