Publishing Org-mode files to HTML

Emacs is the best editor in the world.

This is a guide to describe how to publish Org mode files to HTML.

Basics

Create your blog files and css files.

Example of file directory structure

~/blog/org/
   |- css/
   |  `- worg.css
   |- img/
   |- index.org
   `- remember.org

Publishing the org project

Example configuration of org-publish-project-alist

(setq org-publish-project-alist
      '(;; Publish the posts
        ("blog-notes"
         :base-directory "~/blog/org"
         :base-extension "org"
         :publishing-directory "~/blog/public"
         :recursive t
         :publishing-function org-html-publish-to-html
         :headline-levels 4
         :section-numbers nil
         :with-author nil
         :with-creator nil
         :with-email nil
         :with-timestamps nil
         :auto-preamble t
         ; :auto-postamble nil
         :html-head "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/worg.css\"/>"
         :html-head-include-default-style nil
         ; :html-head-include-scripts nil
         ; :html-preamble nil
         ; :html-postamble nil
         :html-link-home "index.html"
         :html-link-up "sitemap.html"
         :html-metadata-timestamp-format "%Y-%m-%d %H:%M"
         :htmlized-source t
         :auto-sitemap t
         :sitemap-filename "sitemap.org"
         :sitemap-title "Sitemap")

        ;; For static files that should remain untouched
        ("blog-static"
         :base-directory "~/blog/org"
         :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf\\|eot\\|svg\\|woff\\|woff2\\|ttf"
         :publishing-directory "~/blog/public"
         :recursive t
         :publishing-function org-publish-attachment)

        ;; Combine the two previous components in a single one
        ("blog" :components ("blog-notes" "blog-static"))))

Then run org-publish-project to generate html files to ~/blog/public folder.

Update

  • 2025-02-14 Don't use babel during export.
  • 2025-02-13 Change date style of post list.
  • 2025-02-05 Remove default meta description and keywords, customize meta tags in post files.
  • 2025-01-27 Include chinese characters while generating stable IDs.
  • 2025-01-08 Export checkbox with html type.
  • 2025-01-07 Publish head, header and footer from HTML assets.
  • 2025-01-06 Export the CSS selectors only.
  • 2025-01-03 Prefer HTML5 semantic elements, export txt files.
  • 2024-12-31 Remove preview contents, generate posts page automatically.
  • 2024-12-27 Export with stable IDs and preview contents automatically.
  • 2024-12-25 Add default meta description and keywords, export webmanifest files.
  • 2024-02-18 Export ico files.
  • 2023-12-28 Export with HTML5 and toc by default, customize headline-levels.
  • 2023-12-27 Add head, header and footer options.
  • 2023-05-22 Put all org publish configurations in init-org.el.

Other Org mode blogs

More examples