index.html (16151B)
1 <!DOCTYPE html> 2 3 <html lang="fr"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 8 9 <link rel="start" href="https://vincent.demeester.fr" /> 10 11 <title>Vincent Demeester</title> 12 <link rel="canonical" href="https://vincent.demeester.fr/posts/2015-05-01-orgmode-et-jekyll/"> 13 <link href="https://vincent.demeester.fr/index.xml" rel="alternate" type="application/rss+xml" title="Vincent Demeester" /> 14 15 <link rel="openid.server" href="https://indieauth.com/openid" /> 16 <link rel="openid.delegate" href="http://vincent.demeester.fr/" /> 17 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 18 19 <link rel="stylesheet" href="/css/screen.css" type="text/css" /> 20 <link rel="stylesheet" href="/css/sbrain.css" type="text/css" /> 21 <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> 22 23 </head> 24 25 <body lang="fr"/> 26 27 28 29 30 31 32 <div id="main-container"> 33 <div id="page"> 34 <article class="post"> 35 <header> 36 <h1 class="emphnext">Orgmode et Jekyll</h1><a href='https://vincent.demeester.fr/posts/2015-05-01-orgmode-et-jekyll/'></a> 37 <address class="signature"> 38 <span class="date">Fri, 1 May, 2015</span> 39 <span class="words">(900 Words)</span> 40 </address> 41 <ul class="tag_box inline"> 42 43 <li class="category"><a href="/categories/#developement">developement</a></li> 44 45 46 47 48 49 <li class="tag tag-jekyll"><a href="/tags/#jekyll">jekyll<span>4</span></a></li> 50 51 52 <li class="tag tag-blog"><a href="/tags/#blog">blog<span>2</span></a></li> 53 54 55 <li class="tag tag-emacs"><a href="/tags/#emacs">emacs<span>2</span></a></li> 56 57 58 <li class="tag tag-orgmode"><a href="/tags/#orgmode">orgmode<span>2</span></a></li> 59 60 61 <li class="tag tag-html"><a href="/tags/#html">html<span>2</span></a></li> 62 63 <br/> 64 65 </ul> 66 </header> 67 68 69 70 <div id="outline-container-sec-1" class="outline-2"> 71 <h2 id="sec-1">Un peu plus d'un an..</h2> 72 <div class="outline-text-2" id="text-1"> 73 <p> 74 .. que je n'ai rien posté ici. Le temps passe bien vite, mais c'est plutôt une bonne chose. Je crois que quelque chose me manquait pour poster ici plus souvent. 75 </p> 76 77 <blockquote> 78 <p> 79 Au niveau de mes points d'entrées sur le web, je compte remettre un peu en route la partie blog de ce site et tourner shortbrain.org (ou autre) en un site plus "documentation" en me basant sur mes notes (powered by org-mode). <b>Je me suis également remis à Gnu Emacs et oh god qu'est-ce que c'est bon</b> :-D. 80 </p> 81 </blockquote> 82 83 <p> 84 C'est ce que j'écrivais il y a un an, et effectivement c'est toujours aussi bon <code>;-D</code>. J'ai commencé à utiliser <code>org-mode</code> de manière assez intensive, pour mettre en place mon <i>personal kanban</i> mais également pour prendre mes notes. Et plus je l'utilise, plus j'ai du mal m'en passer et à aller dans mon dossier hébergeant ce site pour y écrire en Markdown. Il me fallait donc trouver une astuce pour convertir certaines notes en post pour Jekyll. C'est maintenant chose faite (après 6 mois dans ma TODO-list…), et voici comment je m'en sors. 85 </p> 86 87 <p> 88 L'idée générale est assez simple : 89 </p> 90 91 <ol class="org-ol"> 92 <li>Utiliser un dossier particulier pour les notes destiné à ce blog 93 </li> 94 <li>Exporter, au format html, ces notes dans le bon dossier (<code>_posts</code>) 95 </li> 96 <li>… et c'est tout en fait :) — c'était pas <i>ben</i> compliqué ! 97 </li> 98 </ol> 99 </div> 100 </div> 101 102 <div id="outline-container-sec-2" class="outline-2"> 103 <h2 id="sec-2">Les fichiers org</h2> 104 <div class="outline-text-2" id="text-2"> 105 <p> 106 Tous mes fichiers <code>org-mode</code> sont dans un ensemble de dossiers bien particulier — cela n'a pas grand chose d'important à faire ici, mais ça permet de suivre la configuration qui suit. Il s'agit du dossier <code>~/desktop/org/</code>, et de ces fils : <code>todos</code> pour ce que je dois faire et <code>notes</code> pour ma prise de note. Dans <code>notes</code> on trouve donc des dossiers et en particulier un qui se nomme <code>vdf</code> (pour Vincent.Demeester.Fr). 107 </p> 108 109 <p> 110 La seule différence que les fichiers <code>.org</code> ont dans ce dossier par rapport aux autres, c'est le début du fichier. En effet, <a href="http://jekyllrb.com/">Jekyll</a> a besoin d'une entête en <code>YAML</code> pour le layout, les tags, la catégorie et plein d'autres trucs. Le fichier <code>org</code> de ce billet ressemble à ça par example : 111 </p> 112 113 <pre class="example"> 114 #+BEGIN_HTML 115 --- 116 layout: post 117 category: developement 118 tags: jekyll blog emacs orgmode html 119 lang: fr 120 --- 121 #+END_HTML 122 * Un peu plus d'un an.. 123 124 .. que je n'ai rien posté ici. Le temps passe bien vite, mais c'est plutôt une bonne chose. Je crois que quelque chose me manquait pour poster ici. 125 126 […] 127 </pre> 128 129 <p> 130 Les utilisateurs de Jekyll reconnaitront les <code>---</code> et le format du header. <code>#+BEGIN_HTML</code> et <code>#+END_HTML</code> sont là pour dire à <code>org-mode</code> d'exporter un bloc en HTML sans l'interpréter — c'est une façon de mettre du HTML dans un document <code>org</code> si on peut pas faire ce qu'on veut avec le <i>markup</i>. Ici ça nous permet d'exporter tel quel le header de <a href="http://jekyllrb.com/">Jekyll</a> en haut du HTML généré, pratique ! 131 </p> 132 </div> 133 </div> 134 135 <div id="outline-container-sec-3" class="outline-2"> 136 <h2 id="sec-3">Configuration de org-mode</h2> 137 <div class="outline-text-2" id="text-3"> 138 <p> 139 Il reste maintenant à configurer le <i>projet de publication</i> (publishing project) dans Emacs. Je vais mettre ici juste la partie intéressante, donc pour plus d'information sur comment publier des fichiers org-mode avec Emacs, c'est par <a href="http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html">ici</a> pour un tutoriel (j'adore <a href="http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html">worg</a> soit dit en passant :P). 140 </p> 141 142 <p> 143 L'idée c'est de définir un projet avec plusieurs <i>components</i>, un pour les fichiers <code>org</code>, un pour les fichiers <code>css</code> et un pour les <i>assets</i> (images, vidéos, …). On souhaite également ne pas générer de table des matières (TOC) et ne génerer que le <i>body</i> (pas de <code><head></code>, …). Et ça se présente comme suit. 144 </p> 145 146 <div class="org-src-container"> 147 148 <pre class="src src-emacs-lisp"><span class="org-comment-delimiter">;; </span><span class="org-comment">Variables</span> 149 <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> <span class="org-rainbow-identifiers-identifier-9">vdf-base-directory</span> <span class="org-string">"~/desktop/org/notes/vdf/"</span> 150 <span class="org-rainbow-identifiers-identifier-11">vdf-site-directory</span> <span class="org-string">"~/src/github/vdemeester/vdemeester.github.com"</span> 151 <span class="org-rainbow-identifiers-identifier-4">vdf-publishing-directory</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-identifiers-identifier-15">expand-file-name</span> <span class="org-string">"_posts"</span> <span class="org-rainbow-identifiers-identifier-11">vdf-site-directory</span><span class="org-rainbow-delimiters-depth-2">)</span> 152 <span class="org-rainbow-identifiers-identifier-2">vdf-css-publishing-directory</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-identifiers-identifier-15">expand-file-name</span> <span class="org-string">"css"</span> <span class="org-rainbow-identifiers-identifier-11">vdf-site-directory</span><span class="org-rainbow-delimiters-depth-2">)</span> 153 <span class="org-rainbow-identifiers-identifier-15">vdf-assets-publishing-directory</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-identifiers-identifier-15">expand-file-name</span> <span class="org-string">"assets"</span> <span class="org-rainbow-identifiers-identifier-11">vdf-site-directory</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span> 154 155 <span class="org-comment-delimiter">;; </span><span class="org-comment">Project</span> 156 <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> <span class="org-rainbow-identifiers-identifier-12">org-publish-project-alist</span> 157 `<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-delimiters-depth-3">(</span><span class="org-string">"vdf-notes"</span> 158 <span class="org-builtin">:base-directory</span> ,<span class="org-rainbow-identifiers-identifier-9">vdf-base-directory</span> 159 <span class="org-builtin">:base-extension</span> <span class="org-string">"org"</span> 160 <span class="org-builtin">:publishing-directory</span> ,<span class="org-rainbow-identifiers-identifier-4">vdf-publishing-directory</span> 161 <span class="org-builtin">:exclude</span> <span class="org-string">"FIXME"</span> 162 <span class="org-builtin">:section-numbers</span> <span class="org-rainbow-identifiers-identifier-2">nil</span> 163 <span class="org-builtin">:with-toc</span> <span class="org-rainbow-identifiers-identifier-2">nil</span> 164 <span class="org-builtin">:with-drawers</span> <span class="org-rainbow-identifiers-identifier-8">t</span> 165 <span class="org-builtin">:htmlized-source</span> <span class="org-rainbow-identifiers-identifier-8">t</span> 166 <span class="org-builtin">:publishing-function</span> <span class="org-rainbow-identifiers-identifier-7">org-html-publish-to-html</span> 167 <span class="org-builtin">:headline-levels</span> <span class="org-rainbow-identifiers-identifier-8">4</span> 168 <span class="org-builtin">:body-only</span> <span class="org-rainbow-identifiers-identifier-8">t</span><span class="org-rainbow-delimiters-depth-3">)</span> 169 <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-string">"vdf-static-css"</span> 170 <span class="org-builtin">:base-directory</span> ,<span class="org-rainbow-identifiers-identifier-9">vdf-base-directory</span> 171 <span class="org-builtin">:base-extension</span> <span class="org-string">"css"</span> 172 <span class="org-builtin">:publishing-directory</span> ,<span class="org-rainbow-identifiers-identifier-2">vdf-css-publishing-directory</span> 173 <span class="org-builtin">:recursive</span> <span class="org-rainbow-identifiers-identifier-8">t</span> 174 <span class="org-builtin">:publishing-function</span> <span class="org-rainbow-identifiers-identifier-5">org-publish-attachment</span> 175 <span class="org-rainbow-delimiters-depth-3">)</span> 176 <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-string">"vdf-static-assets"</span> 177 <span class="org-builtin">:base-directory</span> ,<span class="org-rainbow-identifiers-identifier-9">vdf-base-directory</span> 178 <span class="org-builtin">:base-extension</span> <span class="org-string">"png</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">jpg</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">gif</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">pdf</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">mp3</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">ogg"</span> 179 <span class="org-builtin">:publishing-directory</span> ,<span class="org-rainbow-identifiers-identifier-15">vdf-assets-publishing-directory</span> 180 <span class="org-builtin">:recursive</span> <span class="org-rainbow-identifiers-identifier-8">t</span> 181 <span class="org-builtin">:publishing-function</span> <span class="org-rainbow-identifiers-identifier-5">org-publish-attachment</span> 182 <span class="org-rainbow-delimiters-depth-3">)</span> 183 <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-string">"vdf"</span> <span class="org-builtin">:components</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-string">"vdf-notes"</span> <span class="org-string">"vdf-static-css"</span> <span class="org-string">"vdf-static-assets"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span> 184 <span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span> 185 </pre> 186 </div> 187 188 <p> 189 J'utilise des variables, c'est pas indispensable mais c'est plus pratique. Il y a trois <i>components</i>, chacun définit les fichiers qu'il traite grâce à <code>:base-extension</code>. Intéressons-nous surtout à <code>vdf-notes</code> puisque c'est celui qui nous sort les fichiers <code>HTML</code> à partir des fichiers <code>org</code>. On se passe de table des matières grâce à <code>:with-toc nil</code>, on ne génère que le <i>body</i> grâce à <code>:body-only t</code> et on évite les numéros de sections avec <code>:section-numbers nil</code>. Le bonus vient avec <code>:htmlized-source t</code> puisque du coup, les parties sources (entre <code>#+BEGIN_SRC</code> et <code>#+END_SRC</code>) sont exportés avec les mêmes couleurs que j'ai dans ma configuration Emacs (avec les <a href="https://github.com/vdemeester/emacs-config#raindow-identifiers">rainbow-identifiers</a>, voir ce post <a href="https://medium.com/@evnbr/coding-in-color-3a6db2743a1e">là</a> également). 190 </p> 191 192 <p> 193 Il ne reste plus qu'à publier le projet quand on le souhaite avec <code>org-publish</code> — je vous laisse lire la documentation pour savoir comment on fait. 194 </p> 195 196 <p> 197 Et c'est tout bon. Un petit <code>bundle exec jekyll serve --watch</code> pour voir le rendu — et quand on est content on commit. Et c'est la fête <code>\o/</code>. 198 </p> 199 200 <p> 201 C'est tout pour le moment, la fréquence des billets de ce blog devrait s'incrémenter un peu maintenant. 202 </p> 203 </div> 204 </div> 205 206 207 </article> 208 <hr /> 209 <div class="prev-next"> 210 211 <a class="paging-link prev" href="/posts/2015-05-09-migration-to-hugo/" title="Migration vers hugo">← Previous post</a> 212 213 214 215 <a class="paging-link next" href="/posts/2014-10-27-docker-1.3-ecosystem/" title="Docker 1.3 et son écosystème">Next post →</a> 216 217 </div> 218 219 </div> 220 </div> 221 222 <footer> 223 <nav> 224 225 <a href="/">home</a> 226 <span class="text-muted"> | </span> 227 228 <a href="/about">about</a> 229 <span class="text-muted"> | </span> 230 231 <a href="/archive">archive</a> 232 <span class="text-muted"> | </span> 233 234 <a href="/categories">categories</a> 235 <span class="text-muted"> | </span> 236 237 <a href="/tags">tags</a> 238 <span class="text-muted"> | </span> 239 240 <a href="https://twitter.com/vdemeest">twitter</a> 241 <span class="text-muted"> | </span> 242 243 <a href="https://github.com/vdemeester">github</a> 244 <span class="text-muted"> | </span> 245 246 <a href="https://vincent.demeester.fr/index.xml">rss</a> 247 </nav> 248 <br/> 249 <address> 250 <span class="copyright"> 251 Content and design by Vincent Demeester 252 (<a rel="licence" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved</a>) 253 </span><br /> 254 <span class="engine"> 255 Powered by <a href="https://gohugo.io/">Hugo</a> and <a href="https://github.com/kaushalmodi/ox-hugo/">ox-hugo</a> 256 </span> 257 </address> 258 </footer> 259 </body> 260