index.html (8524B)
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-09-migration-to-hugo/"> 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">Migration vers hugo</h1><a href='https://vincent.demeester.fr/posts/2015-05-09-migration-to-hugo/'></a> 37 <address class="signature"> 38 <span class="date">Sat, 9 May, 2015</span> 39 <span class="words">(500 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-hugo"><a href="/tags/#hugo">hugo<span>1</span></a></li> 50 51 52 <li class="tag tag-golang"><a href="/tags/#golang">golang<span>12</span></a></li> 53 54 55 <li class="tag tag-blog"><a href="/tags/#blog">blog<span>2</span></a></li> 56 57 58 <li class="tag tag-emacs"><a href="/tags/#emacs">emacs<span>2</span></a></li> 59 60 61 <li class="tag tag-orgmode"><a href="/tags/#orgmode">orgmode<span>2</span></a></li> 62 63 64 <li class="tag tag-html"><a href="/tags/#html">html<span>2</span></a></li> 65 66 <br/> 67 68 </ul> 69 </header> 70 71 72 73 <p> 74 Et voilà, une semaine après m'être remis en route sur ce blog, je fais 75 déjà une migration <code>>_<</code>. Je me suis rendu compte que <a href="http://jekyllrb.com/">Jekyll</a> 76 m'énervait un peu, et comme je suis à fond dans <a href="http://golang.org/">go</a> en ce moment, j'ai 77 regardé du côté des générateurs de sites static et <a href="http://gohugo.io/">Hugo</a> a clairement 78 retenu mon attention. 79 </p> 80 81 <div id="outline-container-sec-1" class="outline-2"> 82 <h2 id="sec-1">Pourquoi Hugo ?</h2> 83 <div class="outline-text-2" id="text-1"> 84 <blockquote> 85 <p> 86 <b>Make the Web Fun Again</b> 87 </p> 88 89 <p> 90 Introducing Hugo, a new idea around making website creation simple again. Hugo flexibly works with many formats and is ideal for blogs, docs, portfolios and much more. Hugo’s speed fosters creativity and makes building a website fun again. 91 </p> 92 </blockquote> 93 94 <p> 95 Presque tout est dit dans cette citation. 96 </p> 97 98 <ul class="org-ul"> 99 <li>Hugo est rapide. 100 </li> 101 <li>Le système de content est un régale. 102 </li> 103 <li>L'organisation d'un <i>projet hugo</i> est simple : 104 <ul class="org-ul"> 105 <li><code>content</code> pour le contenu, avec ce qu'on veut dedans, 106 </li> 107 <li><code>static</code> pour le contenu statique (<code>css</code>, <code>javascript</code>, <code>images</code>, …), 108 </li> 109 <li><code>layouts</code> pour les templates (super facile de mettre des templates différents en fonction des contenus, voir <a href="http://gohugo.io/templates/content/">ici</a>), 110 </li> 111 <li><code>themes</code> pour les themes applicables (qui définissent eux même <code>layouts</code> et <code>static</code>. 112 </li> 113 </ul> 114 </li> 115 <li>Le système de template est <a href="http://gohugo.io/templates/go-templates/">puissant</a> et un vrai régale. 116 </li> 117 <li>Le mode <code>server</code> a la possiblité de surveiller les fichiers(avec le <i>flag</i> <code>-w</code>, et implémente <a href="http://gohugo.io/extras/livereload/">LiveReload</a> ce qui est un petit bonus non négligeable. 118 </li> 119 </ul> 120 </div> 121 </div> 122 123 <div id="outline-container-sec-2" class="outline-2"> 124 <h2 id="sec-2">Ce qui changes</h2> 125 <div class="outline-text-2" id="text-2"> 126 <p> 127 Le principale changement est sur le/les repository utilisés. Avant tout était dans <a href="https://github.com/vdemeester/vdemeester.github.com">vdemeester.github.com</a>, puisque c'est github qui générait le résultat final avec Jekyll. Ce n'est maintenant plus le cas : <a href="https://github.com/vdemeester/blog">blog</a> héberge les sources du blog (les fichiers content en Markdown ou <i>HTML-from-orgmode</i> ainsi que les templates et la configuration <a href="http://gohugo.io/">Hugo</a> — <a href="https://github.com/vdemeester/vdemeester.github.com">vdemeester.github.com</a> héberge désormais le résultat. 128 </p> 129 130 <p> 131 J'en ai profité également pour faire quelques ajustements graphique, principalement sur les tags qui ont maintenant, parfois, des couleurs différentes. 132 </p> 133 </div> 134 </div> 135 136 <div id="outline-container-sec-3" class="outline-2"> 137 <h2 id="sec-3">Intégration avec Emacs & orgmode</h2> 138 <div class="outline-text-2" id="text-3"> 139 <p> 140 Il me manque encore quelques petits <i>trucs</i> pour rendre ça automatique, mais dans l'idée, voilà le workflow que j'utilise quand je publie un article (comme maintenant) : 141 </p> 142 143 <ol class="org-ol"> 144 <li>Démarre <code>hugo server -w</code> dans mon repository <code>blog</code>. 145 </li> 146 <li>Je créer mon fichier <code>org</code> au bon endroit (soit <code>$HOME/desktop/org/notes/vdf/monfichier.org</code>). Par rapport au <a href="http://vincent.demeester.fr/posts/2015-05-01-orgmode-et-jekyll/">billet précédent</a>, le header de mes fichiers <code>org</code> change un peu : 147 148 <pre class="example"> 149 #+begin_html 150 +++ 151 title="Migration vers hugo" 152 date="2015-05-09" 153 categories=["developement"] 154 tags=["hugo","golang","blog","emacs","orgmode","html"] 155 lang="fr" 156 +++ 157 #+end_html 158 159 Et voilà, une semaine après m'être remis en route sur ce blog, je fais déjà une migration =>_<=. Je me suis rendu compte que [[http://jekyllrb.com/][Jekyll]] m'énervait un peu, et comme je suis à fond dans [[http://golang.org/][go]] en ce moment, j'ai regardé du côté des générateurs de sites static et [[http://gohugo.io/][Hugo]] a clairement retenu mon attention. 160 </pre> 161 </li> 162 163 <li>J'exécute <code>org-publish-current-project</code> (qu'il faut que je <i>bind</i> pour éviter de me le taper à la main..) 164 </li> 165 <li>Et je regarde le résultat dans mon navigateur (merci encore <a href="http://gohugo.io/extras/livereload/">LiveReload</a>). 166 </li> 167 </ol> 168 169 <p> 170 Pour me simplifier la vie, il me resterais à démarrer et arrêter facilement <code>hugo server -w</code> dans le bon dossier directement depuis emacs (un peu à-la <code>compile</code>), <i>binder</i> <code>org-publish-current-project</code> et un petit script final qui copie le rendu de <code>blog</code> vers <code>vincent.demeester.fr</code> et qui commit (le tout appellable depuis Emacs <code>;-P</code>). 171 </p> 172 </div> 173 </div> 174 175 176 </article> 177 <hr /> 178 <div class="prev-next"> 179 180 <a class="paging-link prev" href="/posts/2015-06-01-docker-1.6-ecosystem/" title="Docker 1.6 et son écosystème">← Previous post</a> 181 182 183 184 <a class="paging-link next" href="/posts/2015-05-01-orgmode-et-jekyll/" title="Orgmode et Jekyll">Next post →</a> 185 186 </div> 187 188 </div> 189 </div> 190 191 <footer> 192 <nav> 193 194 <a href="/">home</a> 195 <span class="text-muted"> | </span> 196 197 <a href="/about">about</a> 198 <span class="text-muted"> | </span> 199 200 <a href="/archive">archive</a> 201 <span class="text-muted"> | </span> 202 203 <a href="/categories">categories</a> 204 <span class="text-muted"> | </span> 205 206 <a href="/tags">tags</a> 207 <span class="text-muted"> | </span> 208 209 <a href="https://twitter.com/vdemeest">twitter</a> 210 <span class="text-muted"> | </span> 211 212 <a href="https://github.com/vdemeester">github</a> 213 <span class="text-muted"> | </span> 214 215 <a href="https://vincent.demeester.fr/index.xml">rss</a> 216 </nav> 217 <br/> 218 <address> 219 <span class="copyright"> 220 Content and design by Vincent Demeester 221 (<a rel="licence" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved</a>) 222 </span><br /> 223 <span class="engine"> 224 Powered by <a href="https://gohugo.io/">Hugo</a> and <a href="https://github.com/kaushalmodi/ox-hugo/">ox-hugo</a> 225 </span> 226 </address> 227 </footer> 228 </body> 229