Yet Another Blog with Org-mode

Je ne dirai pas ici tout le bien que je pense d'emacs et d'org-mode. Cet article s'adresse à ceux qui sont déjà convaincus. Mais pour ceux qui ne le sont pas encore, ce sera peut-être l'occasion de s'y intéresser.

Il faut disposer d'Emacs et de son mode majeur Org-mode. Sous linux:

sudo apt install emacs Org-mode

Les sites dynamiques posent trois problèmes

• Si on les héberge soi-même on y passe du temps (changement de version, sécurité, etc)
• Si on les fait héberger, on se fait piller ses données etc..
• Mais surtout les données initiales ne sont nulles part ailleurs que dans le CMS, et souvent dans un format inexploitable pour d'autres usages.

Comme on a séparé le contenu et la mise en forme¹ il est urgent de séparer les originaux (les codes source des articles) et leur présentation en ligne (le code exécutable). D'où l'idée de produire dans des formats statiques mais riches et à base de texte brut² (Org-mode³ [2003], Markdown⁴ [2004]…) et d'exporter vers le web.

Le pur javascript sans référence à jquery, le latex sans utilisation de MathJax⁵ relèvent de la prudence.

Ajouter dix lignes de php pour disposer d'un moteur de recherche sur le contenu du blog n'est pas absurde.

Même si c'est une solution mono blog⁷ j'ai choisi org-static-blog, parce que c'est celle que j'ai réussi à faire marcher (en dehors de l'export standard qu'une seule page html) Org-mode

1. Un répertoire dédiés à vos .org.
2. Un répertoire cible déstinées à accueillir votre site statique. Dans un premier temps, indiquez un répertoire sur votre disque. Il s'agit d'un site statique qui peut s'exécuter en local dans votre navigateur pour commencer⁸.
3. Une configuration.
4. Une commande pour créer un nouveau draft (qu'il suffira de déplacer dans les posts pour qu'il fasse partie des pages qui iront peupler le blog en html).
5. Une commande⁹ pour créer une nouvelle page.
6. Une commande pour publier, c'est-à dire en fait pour mettre à jour¹⁰.

Et c'est tout. Une fois que c'est installé, ça marche vraiment très bien. Avant de mettre à jour il faut évidemment que les buffers ouverts des articles soient bien enregistrés sinon ça peut coincer, mais c'est après tout normal.

• copier le fichier org-static-blog.el dans le répertoire ~/.emacs.d

Vous le trouverez ici: https://raw.githubusercontent.com/bastibe/org-static-blog/master/org-static-blog.el

• dans le fichier init.el de votre répertoire ~/.emacs.d il faudra ajouter les lignes suivantes (en les adaptant):

;;
;; org-static-blog 
;;
;; chargement du fichier
(load-file "~/.emacs.d/org-static-blog.el")
;;
;; configuration
;;
;; affectation des touches F6, F7 et F8 pour gagner du temps
(global-set-key (kbd "<f8>") 'org-static-blog-publish)            ; F8
(global-set-key (kbd "<f7>") 'org-static-blog-create-new-post)    ; F7
(global-set-key (kbd "<f6>") 'org-static-blog-create-new-draft)    ; F6
;; 
;; ADPATEZ les quatre ou cinq lignes suivantes à votre situation
;;
(setq org-static-blog-publish-title "Mon blog à moi qu'il est beau")
(setq org-static-blog-publish-url "https://domain.org/blog/")
(setq org-static-blog-publish-directory "~/blog-html/")
(setq org-static-blog-posts-directory "~/blog-org/")
(setq org-static-blog-drafts-directory "~/blog-drafts/")
(setq org-static-blog-langcode "fr")
(setq org-static-blog-enable-tags t)
(setq org-export-with-toc t)
(setq org-export-with-section-numbers nil)
(setq org-static-blog-use-preview t)
(setq org-static-blog-preview-convert-titles nil)
(setq org-static-blog-preview-ellipsis "(...)")
(setq org-static-blog-preview-link-p t)
;;
;; ADAPTEZ aux rubriques que vous voulez mettre en avant 
;; Il n'est pas sûr que riri, fifi et loulou vous conviennent
;; Et vous préférerez problement remplacer Mickey Mouse par votre nom
;;
(setq org-static-blog-page-header
"<meta name=\"author\" content=\"Mickey Mouse\">
<meta name=\"referrer\" content=\"no-referrer\">
<link href= \"movenotes.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href= \"style.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"movenotes.js\"></script>
<style>
.equation-label {
	visibility:hidden}
svg { 
	height:200%;}
</style
<link rel=\"icon\" href=\"favicon.ico\">")
;;
;; This preamble is inserted at the beginning of the <body> of every page:
;;   This particular HTML creates a <div> with a simple linked headline
(setq org-static-blog-page-preamble
"<center><div class='header'>
  <a href='tags.html'>[tags]</a>&nbsp;&nbsp; 
  <a href='archive.html'>[archives]</a>&nbsp;&nbsp;
  <a href='tag-riri.html'>[riri]</a>&nbsp;&nbsp;
  <a href='tag-fifi.html'>[fifi]</a>&nbsp;&nbsp;
  <a href='tag-loulou.html'>[loulou]</a>&nbsp;&nbsp;
</div></center>")
;;
;; This postamble is inserted at the end of the <body> of every page:
;;   This particular HTML creates a <div> with a link to the archive page
;;   and a licensing stub.
(setq org-static-blog-page-postamble
"<footer><center><img alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/3.0/88x31.png\" /> 
<br/>Mickey Mouse + Org-mode + Emacs + Apache + GNU/Linux</center></footer><script type=\"text/javascript\" src=\"footer.js\"></script>
")

Si vous n'avez pas de répertoires blog-org, blog-html et blog-draft dans votre répertoire home et si vous acceptez de lancer un script qui ajoute quelque chose à votre ~.emacs.d/init.el/ je vous propose le script suivant¹³: [TODO]

Relancez emacs¹⁴.

• F7 vous créez un article
• F8 vous mettez à jour votre blog
• vous regardez le résultat avec un navigateur dans file:///user/blog-html¹⁵

L'affectation de la variable org-static-blog-langcode "fr" dans la configuration ne concerne que les chaines de caractère produites par org-static-blog. Table of Contents est exporté par org-mode et dépend d'une autre variable. Il existe deux façons de faire sans toucher à l'environnement global d'emacs.

• mettre à la main #+LANGUAGE: fr dans l'en-tête de chaque page…
• lui dire de le faire pourchaque nouvelle page en changeant dans org-static-blog.el

(insert "#+title: " title "\n"
	    "#+date: " (format-time-string "<%Y-%m-%d %H:%M>") "\n"
	    "#+filetags: ")))

par

(insert "#+title: " title "\n"
	    "#+date: " (format-time-string "<%Y-%m-%d %H:%M>") "\n"
	    "#+filetags: \n#+LANGUAGE: fr")))