1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 10 <title>Blog.reboot()</title> 11 12 <link href="http://bluxte.net/rss.xml" type="application/rss+xml" rel="alternate" title="Sylvain Wallez Full RSS Feed" /> 13 <!-- Bootstrap Core CSS --> 14 <link href="../../../../../theme/css/bootstrap.min.css" rel="stylesheet"> 15 16 <!-- Custom CSS --> 17 18 19 <link rel="stylesheet" href="../../../../../theme/css/bstyle.css?45c0b44b"> 20 21 <!-- Code highlight color scheme --> 22 <link href="../../../../../theme/css/code_blocks/github.css" rel="stylesheet"> 23 24 25 <!-- Custom Fonts --> 26 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 27 <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 28 <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 29 30 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 31 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 32 <!--[if lt IE 9]> 33
33<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
33 34
34<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
34 35 <![endif]--> 36 37 38 39 <meta name="description" content="This blog is now a static website powered by the Pelican generator. It's the 3rd major change since I started blogging in 2002. It began with Movable Type, a Perl blogging tool. There wasn't much choice at that time, and it did the job even if I did ..."> 40 41 <meta name="author" content="Sylvain Wallez"> 42 43 44 <meta property="og:locale" content=""> 45 <meta property="og:site_name" content="Sylvain Wallez"> 46 47 <meta property="og:type" content="article"> 48 <meta property="article:author" content="https://www.facebook.com/sylvain.wallez"> 49 <meta property="og:url" content="../../../../../musings/2016/06/18/blog-reboot/"> 50 <meta property="og:title" content="Blog.reboot()"> 51 <meta property="article:published_time" content="2016-06-18 18:12:00+02:00"> 52 <meta property="og:description" content="This blog is now a static website powered by the Pelican generator. It's the 3rd major change since I started blogging in 2002. It began with Movable Type, a Perl blogging tool. There wasn't much choice at that time, and it did the job even if I did ..."> 53 54</head> 55 56<body> 57 <!-- Navigation --> 58 <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> 59 <div class="container-fluid"> 60 <!-- Brand and toggle get grouped for better mobile display --> 61 <div class="navbar-header page-scroll"> 62 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 63 <span class="sr-only">Toggle navigation</span> 64 <span class="icon-bar"></span> 65 <span class="icon-bar"></span> 66 <span class="icon-bar"></span> 67 </button> 68 <a class="navbar-brand" href="../../../../../">Sylvain Wallez</a> 69 </div> 70 71 <!-- Collect the nav links, forms, and other content for toggling --> 72 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 73 <ul class="nav navbar-nav navbar-right"> 74 <li><a href="/about/">About</a></li> 75 <li><a href="/talks/">Talks</a></li> 76 <li><a href="/musings/">Archives</a></li> 77 78 </ul> 79 </div> 80 <!-- /.navbar-collapse --> 81 </div> 82 <!-- /.container --> 83 </nav> 84 85 <!-- Page Header --> 86 <header class="intro-header" style="background-image: url('../../../../../images/banners/DSC_0052.jpg')"> 87 <div class="container"> 88 <div class="row"> 89 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 90 <div class="post-heading"> 91 <h1>Blog.reboot()</h1> 92 <span class="meta">Posted on Sat 18 June 2016 93 </span> 94 95 </div> 96 </div> 97 </div> 98 </div> 99 </header> 100 <!-- Main Content --> 101 <div class="container content"> 102 <div class="row"> 103 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 104 <!-- Post Content --> 105 <article> 106 <p>This blog is now a static website powered by the 107<a href="http://blog.getpelican.com/">Pelican</a> generator. It's the 3rd major 108change since I <a href="/musings/">started blogging in 2002</a>.</p> 109<p>It began with <a href="https://en.wikipedia.org/wiki/Movable_Type">Movable 110Type</a>, a Perl blogging tool. 111There wasn't much choice at that time, and it did the job even if I did 112not like Perl (and still do not). In 2009 I <a href="/musings/2009/04/09/my-new-web-site-drupal-powered/">switched to Drupal 1136</a>, which allowed 114me to have a nicer visual layout and have more control on the 115navigation, starting with clean URLs.</p> 116<p>Now for a blog I don't need a full blown CMS for dynamic web pages, 117with the operational burden what comes with it. Also, the content 118writing UI in Drupal isn't that great (or wasn't, since I stayed with 119Drupal 6), and you ultimately end up writing HTML, even if hidden behind 120a fancy WYSIWYG editor. So much for semantic markup and separation of 121content and presentation.</p> 122<p>Over time, the combination of Twitter's 140 characters instant 123gratification and a clunky writing UI led this blog to be really 124neglected. Now I have things to share that don't fit in a tweet!</p> 125<p><strong>Going static</strong></p> 126<p>So it was time for a change, and I was urged in that by my two sons 127<a href="http://blog.kangz.net/">Corentin</a> and 128<a href="https://blog.twal.org/">Théophile</a> who started a "one blog post a 129month" challenge. Instead of just writing a blog post, I decided to 130reboot this blog so that the urge or writing would not be hindered by an 131unfriendly tool.</p> 132<p>The 3 of us are now running our blogs with the Pelican static blog 133generator. I also did some quite extensive tests with 134<a href="https://getnikola.com/">Nikola</a>, but in the end Pelican won because of 135its larger theme library that allowed me to experiment faster. Nikola's 136speed and live reloading while editing content are definitely better 137than Pelican's though, and now that I have settled on a theme I may 138come back to it.</p> 139<p>Why not using the popular <a href="https://jekyllrb.com/">Jekyll</a> or 140<a href="https://gohugo.io/">Hugo</a>? The main reason is that I want to store my 141content in a format that is stable, well defined and with enough builtin 142features for documents that go beyond the simple set of headings, text
143and code snippets. I want to own my content, and I want it to last.</p> 144<p>This rules out Markdown, since every tool comes with its own dialect and 145extensions, even if some are more popular than others, and even with the 146<a href="http://commonmark.org/">CommonMark</a> initiative. Same for 147<a href="https://en.wikipedia.org/wiki/Textile_%28markup_language%29">Textile</a> 148who also seems to be falling into oblivion.</p> 149<p>The remaining contenders were 150<a href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> and 151<a href="http://www.methods.co.nz/asciidoc/">AsciiDoc</a>, who both have a formal 152specification. Their reference implementation is written in Python, so 153choosing a Python-based generator seemed a natural choice. Sure, other 154generators can use RestructuredText and AsciiDoc by forking external 155processes, but having the parser within the generators allows for 156tighter integration and greater generation speed. AsciiDoc also has the 157great AsciiDoctor Ruby implementation, but I'm no rubyist.</p> 158<p>ReStructuredText has fewer syntactic artifacts than AsciiDoc, meaning 159less cognitive load for the same document complexity. So I'll use 160reStructuredText as the main writing format, knowing that the great 161<a href="http://pandoc.org/">Pandoc</a> can do wonders converting from one syntax 162to another.</p> 163<p><strong>Setting up the new blog</strong></p> 164<p>The full configuration is <a href="https://github.com/swallez/bluxte-blog-pelican">published on 165GitHub</a>. Actual content 166and deployment configurations are in a separate private repository.</p> 167<p>The theme is based on <a href="http://startbootstrap.com/template-overviews/clean-blog/">StartBootstrap's Clean 168Blog</a> and its 169<a href="https://github.com/gilsondev/pelican-clean-blog">Pelican 170implementation</a> which I 171modified slightly. I still have to clean up the CSS and trim down 172Bootstrap to what's actually needed.</p> 173<p><a id="banners"></a> 174The banner images are randomly generated from a set of banner pictures 175(taken by me), unless I explicitly specify one in the post's metadata. 176I had this in the Drupal-based version, and love it since it gives a 177nice visual touch to pages without requiring scouting for an appropriate 178picture when none comes to mind quickly (choosing images is hard!)</p> 179<p>The old content is still in HTML, and was extracted from Drupal with a 180tiny scraping script. It was actually easier than getting it out of the 181database, since over time I used various Drupal output formats. I'll 182progressively go through all past 369 (!) articles to convert them 183(again with Pandoc), clean up broken links and harmonize the layout.</p> 184<p>The comments are now powered by <a href="https://posativ.org/isso/">Isso</a>, a 185self-hosted Disqus clone, and I have imported the old comments from 186Drupal with a custom Python script. Again, I want to own my content, and 187comments are an integral part of it.</p> 188<p>Publishing is not yet automated, and won't be until I a become a really 189proficient writer. Running a makefile once in while is good enough for 190now!</p> 191<p><strong>Hosting</strong></p> 192<p>And since this is a reboot, I also completely overhauled the 193infrastructure. This blog has been running for ages on a bare metal 194server, which I carefully nurtured and updated. Devops and immutable 195infrastructure are all the rage these days, so I used at home the same 196techniques I use at work: this blog is now running (warning: buzzwords 197ahead!) as a set of Docker containers managed with a simple docker 198compose file. The containers are running the 199<a href="https://traefik.io/">Træfik</a> reverse proxy in front of the 200<a href="https://caddyserver.com/">Caddy</a> file server and the 201<a href="https://posativ.org/isso/">Isso</a> comment server.</p> 202<p>If you don't know Træfik and Caddy, you should definitely have a look: 203they took a fresh start to web servers, taking into account the latest 204evolutions of the web: you get instant HTTP/2 and painless free SSL with 205<a href="https://letsencrypt.org/">Let's encrypt</a>.</p> 206<p>The server is a 3â¬/mo VPS which I can setup with a single command. Now I 207hear you say "if this is a static blog, why not using Github Pages"? 208Well, call me a masochist, but I actually enjoy tweaking my server. 209I've been doing it for more than a decade, and it's nice to have your 210own playground where you can experiment and break things!</p> 211<p>Now enough with this meta-post. I've started collecting ideas and 212drafts for real content in this new shiny home!</p> 213 </article> 214 215 216 <hr> 217 218 219 <div class="comments" id="isso-thread" data-title="Blog.reboot()"> 220 <noscript>Please enable JavaScript to view the comments.</noscript> 221 </div> 222 223 <hr> 224 <!-- Pager --> 225 <p class="pull-left"> 226 ← <a href="../../../../../musings/2015/01/21/efficient-storage-non-periodic-time-series-mongodb/">Efficient storage of non-periodic time series with MongoDB</a> 227 </p> 228 <p class="pull-right"> 229 <a href="../../../../../musings/2016/07/29/usb-foot-keyboard/">'Afternoon hack: a USB foot keyboard'</a> → 230 </p> 231 232 233 </div> 234 </div> 235 </div> 236 237 <hr> 238 239 <!-- Footer --> 240 <footer> 241 <div class="container"> 242 <div class="row"> 243 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 244 <ul class="list-inline text-center"> 245 <li> 246 <a href="https://bsky.app/profile/swallez.com" title=Bluesky>
247 <span class="fa-stack fa-lg"> 248 <i class="fa fa-circle fa-stack-2x"></i> 249 <i class="fa-brands fa-bluesky fa-stack-1x fa-inverse"></i> 250 </span> 251 </a> 252 </li> 253 <li> 254 <a href="https://x.com/bluxte" title=X-Twitter> 255 <span class="fa-stack fa-lg"> 256 <i class="fa fa-circle fa-stack-2x"></i> 257 <i class="fa-brands fa-x-twitter fa-stack-1x fa-inverse"></i> 258 </span> 259 </a> 260 </li> 261 <li> 262 <a href="https://www.linkedin.com/in/swallez" title=LinkedIn> 263 <span class="fa-stack fa-lg"> 264 <i class="fa fa-circle fa-stack-2x"></i> 265 <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i> 266 </span> 267 </a> 268 </li> 269 <li> 270 <a href="https://github.com/swallez" title=GitHub> 271 <span class="fa-stack fa-lg"> 272 <i class="fa fa-circle fa-stack-2x"></i> 273 <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i> 274 </span> 275 </a> 276 </li> 277 <li> 278 <a href="https://www.facebook.com/sylvain.wallez" title=Facebook> 279 <span class="fa-stack fa-lg"> 280 <i class="fa fa-circle fa-stack-2x"></i> 281 <i class="fa-brands fa-facebook fa-stack-1x fa-inverse"></i> 282 </span> 283 </a> 284 </li> 285 <li> 286 <a href="/rss.xml" title=RSS> 287 <span class="fa-stack fa-lg"> 288 <i class="fa fa-circle fa-stack-2x"></i> 289 <i class="fa fa-rss fa-stack-1x fa-inverse"></i> 290 </span> 291 </a> 292 </li> 293 </ul> 294<p class="copyright text-muted"> 295 Copyright © Sylvain Wallez 296</p> </div> 297 </div> 298 </div> 299 </footer> 300 301 <!-- jQuery --> 302
302<script src="../../../../../theme/js/jquery.js"></script>
302 303 304 <!-- Bootstrap Core JavaScript --> 305
305<script src="../../../../../theme/js/bootstrap.min.js"></script>
305 306 307 <!-- Custom Theme JavaScript --> 308
308<script src="../../../../../theme/js/clean-blog.min.js"></script>
308 309
310<script data-goatcounter="https://goat.bluxte.net/count" async src="//goat.bluxte.net/count.js"></script>
310 311 312
312<script type="text/javascript"> 313 var _gaq = _gaq || []; 314 _gaq.push(['_setAccount', 'UA-22489448-1']); 315 _gaq.push(['_trackPageview']); 316 (function() { 317 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 318 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 319 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 320 })(); 321 </script>
vendor: 1 bytes, line 321
321
322<script data-isso="//isso.www.bluxte.net/" src="//isso.www.bluxte.net/js/embed.min.js"></script>
322 323</body> 324 325</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.