Science and technology

How to weblog with Emacs Org mode

I used WordPress for the primary few years of my weblog, however I actually needed to publish it completely utilizing GNU Emacs. I attempted Org2Blog, however one thing was nonetheless lacking and it felt unsatisfying. I attempted to create an internet site to publish Emacs configs, which I named Haqiba (an uncommon identify, I do know), first utilizing Django after which Jekyll. Jekyll is cool and offers extra management over content material and publishing, however I nonetheless could not weblog straight from Emacs, and Org mode was nonetheless lacking. Although I attempted including Org mode assist to Jekyll with jekyll-org, the framework appeared alien.

I lastly discovered the answer I used to be in search of after I began utilizing org-publish. I had stumbled upon org-publish earlier in my search, however at first, I believed it was too complicated for running a blog. But I gave it a attempt to have been pleased ever since.

A number of web sites, together with those on this list, use org-publish. For instance, Bernt Hansen’s Org mode—Organize your life in plain text not solely makes use of org-publish to publish content material but in addition affords lots of info to offer you a deeper understanding about Org mode.

Advantages of org-publish

Among its options, org-publish affords:

  • Good management of configurations, CSS, media, and publishing
  • Org mode formatting assist
  • Static file era
  • Easy deployment utilizing GitLab and GitHub CI/CD
  • Easy internet hosting through Apache/Nginx/file-server should you favor copying information to a distant server as a substitute of utilizing GitLab Pages or GitHub Pages
  • Version management
  • Everything in GNU Emacs. Yay!

Basic setup

The Org-publish tutorial offers a primary template to get you began. I encourage you to undergo the tutorial, as the essential setup on this tutorial is simply sufficient to offer you a short understanding of org-publish. Start by configuring a variable known as org-publish-project-alist in a publish.el file inside your myblog/ challenge listing. Place the next content material in publish.el:

(require 'ox-publish)

(setq org-publish-project-alist
      '(("posts"
         :base-directory "posts/"
         :base-extension "org"
         :publishing-directory "public/"
         :recursive t
         :publishing-function org-html-publish-to-html
         :auto-sitemap t)
        ("all" :parts ("posts"))))

The first line is an import assertion. The variable org-publish-project-alist has an inventory of publishing tasks to regulate publishing conduct. The first ingredient, posts, is the place all the configurations particular to weblog posts are achieved. For instance, the property :base-directory configures the listing the place all of the posts (in Org format) are saved. Similarly, :publishing-directory configures the listing to avoid wasting generated HTML information from Org information. Setting the :recursive property to t will recursively generate HTML from all of the Org information inside posts/ and its subdirectories. The :auto-sitemap property generates sitemap.html together with your listing of posts (you’ll tweak this under). Finally, :publishing-function org-html-publish-to-html converts all the org information to HTML. While you may as well outline your personal capabilities, for the needs of this demo, use the built-in operate supplied by ox-publish.

You want a number of posts for testing, so create a file named posts/post_one.org and embrace some primary headers with some content material. Use C-c C-e # default and C-c C-e # html to incorporate default and HTML templates, respectively.

Your file ought to look one thing like this:

#+title: Post One
#+date:
#+writer: John Doe
#+electronic mail: [email protected]

Lorem Ipsum is solely dummy textual content of the printing and typesetting trade.

The setup is sort of achieved. You can use M-x org-publish-all to generate the HTML and use make to deal with publishing. Following is the content material of the Makefile:

# Makefile for myblog

.PHONY: all publish publish_no_init

all: publish

publish: publish.el
        @echo "Publishing... with current Emacs configurations."
        emacs --batch --load publish.el --funcall org-publish-all

publish_no_init: publish.el
        @echo "Publishing... with --no-init."
        emacs --batch --no-init --load publish.el --funcall org-publish-all

clear:
        @echo "Cleaning up.."
        @rm -rvf *.elc
        @rm -rvf public
        @rm -rvf ~/.org-timestamps/*

Here is the present structure of the challenge:

myblog
├── Makefile
├── posts
│   └── post_one.org
└── publish.el

Executing make will generate sitemap.html and post_one.html within the public/ listing:

myblog
├── Makefile
├── posts
│   ├── post_one.org
│   └── sitemap.org
├── public
│   ├── post_one.html
│   └── sitemap.html
└── publish.el

Add CSS to your submit

You can improve the publish.el file to incorporate components like CSS or pictures. To do this out, add a bit or challenge for CSS. The modified publish.el ought to seem like this:

(require 'ox-publish)

(setq org-publish-project-alist
      '(("posts"
          :base-directory "posts/"
          :base-extension "org"
          :publishing-directory "public/"
          :recursive t
          :publishing-function org-html-publish-to-html
          :auto-sitemap t)
         ("css"
          :base-directory "css/"
          :base-extension "css"
          :publishing-directory "public/css"
          :publishing-function org-publish-attachment
          :recursive t)
         ("all" :parts ("posts" "css"))))

Create a brand new listing named css/ and replica the code from site.css into it. Now, create a second post to check the CSS.

#+title: Post Two
#+date:
#+writer: John Doe
#+electronic mail: [email protected]
#+HTML_HEAD:

Lorem Ipsum is solely dummy textual content of the printing and typesetting trade.

In this instance, the CSS is included utilizing the #+HTML_HEAD: choice. The org-publish tutorial recommends utilizing the #+STYLE: choice to incorporate the stylesheet, however this didn’t work for me. Instead, I used #+HTML_HEAD:, as CSS support within the Org mode guide suggests.

Here is the structure that shows the css/ listing:

myblog
├── css
│   └── web site.css
├── Makefile
├── posts
│   ├── post_one.org
│   └── post_two.org
└── publish.el

Having to incorporate #+HTML_HEAD: in each submit will quickly change into tedious. There are additionally a number of stylesheets in an internet site. To remedy this difficulty, use the #+SETUPFILE: choice:

#+title: Post Two
#+date:
#+writer: John Doe
#+electronic mail: [email protected]
#+SETUPFILE: ../org-template/type.org

Lorem Ipsum is solely dummy textual content of the printing and typesetting trade.

The org-template/type.org file contains the trail to the stylesheet:

#+HTML_HEAD: <hyperlink rel="stylesheet" kind="text/css" href="http://opensource.com/css/site.css" />

Following is the ultimate structure:

myblog
├── css
│   └── web site.css
├── Makefile
├── org-template
│   └── type.org
├── posts
│   ├── post_one.org
│   └── post_two.org
└── publish.el

Tweak the sitemap

The last configuration will generate an index.html file as a substitute of a sitemap.html file. Rename the title and configure the writer and electronic mail throughout the web site. Below is the completed publish.el file:

(require 'ox-publish)

(setq org-publish-project-alist
      '(("posts"
         :base-directory "posts/"
         :base-extension "org"
         :publishing-directory "public/"
         :recursive t
         :publishing-function org-html-publish-to-html
         :auto-sitemap t
         :sitemap-title "Blog Index"
         :sitemap-filename "index.org"
         :sitemap-style listing
         :writer "John Doe"
         :electronic mail "[email protected]"
         :with-creator t)
        ("css"
         :base-directory "css/"
         :base-extension "css"
         :publishing-directory "public/css"
         :publishing-function org-publish-attachment
         :recursive t)
         ("all" :parts ("posts" "css"))))

If you’re having problem establishing the challenge, you’ll be able to view your entire challenge on my GitLab page.

Use an current org-publish setup

It can change into tedious to create blogs with org-publish from scratch. To make it simpler, you should utilize my repository as a base template to publish your personal blogs utilizing org-publish.

To use it, clone the blog_template department:

git clone https://gitlab.com/psachin/psachin.gitlab.io -b blog_template --single-branch myblog

Use make to export Org pages to HTML. The public/ listing may have all of the information required for internet hosting:


There is a pattern weblog submit in posts/template.org for reference. You can use the .gitlab-ci.yaml file to publish the content material of public/ as a GitLab Page.

Bonus tip 1

After executing the make command, the public/ listing may have all of the information crucial for internet hosting a static web site. All it’s a must to do is to configure the webserver to serve this listing, or you’ll be able to render the weblog regionally utilizing Python’s built-in http.server module.

With Python three.6, use:

cd myblog/public
python -m http.server

If you could have Python three.7, you’ll be able to serve public/ utilizing:

cd myblog
python -m http.server --directory=public

Open http://localhost:8000/ in your internet browser to view your web site.

Bonus tip 2

This is my favourite tip. If an thought for a brand new weblog submit pops into my thoughts when I haven’t got time to work on it, I shortly create a draft utilizing an Org capture template. I take advantage of the template definition under to open a buffer window by typing C-c c p. When I am completed, I kind C-c C-c to avoid wasting the draft.

Copy this Elisp snippet into your current Emacs configuration file (however make to positive the change the file path):

(defun create-blog-post ()
        "Create an org file in ~/source/myblog/posts."
        (interactive)
        (let ((identify (read-string "Filename: ")))
        (expand-file-name (format "%s.org" identify) "~/source/myblog/posts/")))

(setq org-capture-templates
        '(("p" "Post" plain
                (file create-blog-post)
                (file "~/.emacs.d/org-templates/post.orgcaptmpl"))))

Here are the contents of ~/.emacs.d/org-templates/submit.orgcaptmpl:

#+title: %^Name
#+date: >
#+key phrases: draft
#+setupfile: ../org-templates/submit.org

%?

#+INCLUDE: "../disquss.inc"

For a extra thorough clarification of the Org seize template, you’ll be able to watch my video demonstration.

Have you used Org mode to publish an internet site or weblog, or do you propose to? Let us know your expertise within the feedback.

Most Popular

To Top