Org HTML Export

Keywords: org
Created: 2019-12-27 Fri 16:33
Table of Contents

This website is generated by exporting orgmode files to html. A small python script then adds headers, footers and a backlink section to each page.

Install htmlize for export to html and require / configure a few packages.

(use-package htmlize)

(require 'ox-publish)
(require 'ox-html)
(setq org-export-htmlize-output-type 'css)
(setq org-html-htmlize-output-type 'css)

(setq org-html-doctype "html5")
(setq blog-base-path "/home/leon/org/website/")

Date Metadata Advice

The HTML exporter adds <meta> tags for the file's author and keyword. Add an advice around it to also include the date.

(defadvice org-html--build-meta-info (after my-html--build-meta-info)
  (let* ((info (ad-get-arg 0))
         (date (plist-get info :date))
         (protect-string
          (lambda (str)
            (replace-regexp-in-string
             "\"" "&quot;" (org-html-encode-plain-text str)))))
    (pp date)
    (if date
        (setq ad-return-value
              (concat
               ad-return-value
               (org-html-close-tag
                "meta"
                (format
                 "name=\"date\" content=\"%s\""
                 (funcall
                  protect-string
                  (if (stringp (car date))
                      (car date)
                    (org-element-property :raw-value (car date)))))
                info)
               "\n")))))

(ad-activate 'org-html--build-meta-info)

Publishing Configuration

Using the inheritance pattern from the org-publish html tutorial .

(setq org-publish-project-alist
      '(("website-static"
         :base-directory "~/org/static/"
         :recursive t
         :base-extension "css\\|js\\|woff"
         :publishing-directory "~/org/website_html/static/"
         :publishing-function org-publish-attachment
         )
        ("website-images"
         :base-directory "~/org/website/"
         :recursive t
         :base-extension "png\\|svg\\|jpg\\|jpeg\\|gif"
         :publishing-directory "~/org/website_html/"
         :publishing-function org-publish-attachment
         )
        ("website-files"
         :base-directory "~/org/website/files/"
         :recursive t
         :base-extension "dsk"
         :publishing-directory "~/org/website_html/files/"
         :publishing-function org-publish-attachment
         )
        ("website-org"
         :base-directory "~/org/website/"
         :base-extension "org"
         :publishing-directory "~/org/website_html/"
         :recursive t
         ;; :html-head nil
         :publishing-function org-html-publish-to-html
         :headline-levels 4
         :html-extension "html"
         :html-preamble nil
         :html-postamble nil

         :section-numbers nil
         :with-toc nil
         :with-title nil
         :with-date t

         ;; Sitemap generation
         ;; disable sitemap for now
         ;; :auto-sitemap t
         ;; :sitemap-filename "index.org"
         ;; :sitemap-title "Index"
         ;; :sitemap-sort-files anti-chronologically
         ;; :sitemap-style list
         :makeindex t)
        ("website-org-txt"
         :base-directory "~/org/website/pages/"
         :base-extension "org"
         :publishing-directory "~/org/website_html/pages/"
         :publishing-function org-ascii-publish-to-ascii
         :headline-levels 4
         :section-numbers t
         :with-toc t)
        ("website-org-pdf"
         :base-directory "~/org/website/pages/"
         :base-extension "org"
         :publishing-directory "~/org/website_html/pages/"
         :publishing-function org-latex-publish-to-pdf
         :headline-levels 4
         :section-numbers t
         :with-toc t)
        ("website" :components
         ("website-images"
          "website-files"
          "website-org"
          "website-org-txt"
          "website-org-pdf"
          "website-static"))))

SVG Images

By default, the org html export wraps .svg images in a <object> tag.

I just redefine the function to use <img> tags for all images.

(defun org-html--format-image (source attributes info)
  "Return \"img\" tag with given SOURCE and ATTRIBUTES.
SOURCE is a string specifying the location of the image.
ATTRIBUTES is a plist, as returned by
`org-export-read-attribute'.  INFO is a plist used as
a communication channel."
  (org-html-close-tag
   "img"
   (org-html--make-attribute-string
    (org-combine-plists
     (list :src source
           :alt (if (string-match-p "^ltxpng/" source)
                    (org-html-encode-plain-text
                     (org-find-text-property-in-string 'org-latex-src source))
                  (file-name-nondirectory source)))
     attributes))
   info))

Last export: 2020-07-12 Sun 22:29
This document is also available as plain text and pdf.

If you have an idea how this page could be improved or a comment send me a mail.