274 lines
12 KiB
HTML
Raw Normal View History

2014-11-24 22:52:53 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Redesign du blog, etc</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="wxcafé">
<link rel="icon" type="image/png" href="//wxcafe.net/theme/img/favicon.ico">
<!-- Le styles -->
2015-09-03 19:58:32 +02:00
<link rel="stylesheet" href="//wxcafe.net/theme/css/extra.css" type="text/css" />
2014-11-24 22:52:53 +01:00
<link rel="stylesheet" href="//wxcafe.net/theme/css/bootstrap.css" type="text/css" />
2015-09-03 19:58:32 +02:00
<link href='http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
2014-11-24 22:52:53 +01:00
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script');
var t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = '//api.flattr.com/js/0.6/load.js?'+
'mode=auto&uid=wxcafe&button=compact&popout=0';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script> <!-- flattr button loader -->
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.tag-1 {
font-size: 13pt;
}
.tag-2 {
font-size: 10pt;
}
.tag-2 {
font-size: 8pt;
}
.tag-4 {
font-size: 6pt;
}
</style>
<link href="//wxcafe.net/theme/css/bootstrap-responsive.css" rel="stylesheet">
<link href="//wxcafe.net/theme/css/font-awesome.css" rel="stylesheet">
<link href="//wxcafe.net/theme/css/pygments.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="//wxcafe.net/theme/images/favicon.ico">
<link href="//wxcafe.net/feeds/feed.rss.xml" type="application/atom+xml" rel="alternate" title="Wxcafé RSS Feed" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
2015-09-03 19:58:32 +02:00
<span class="icon-bar"></span>
2014-11-24 22:52:53 +01:00
</a>
<a class="brand" href="//wxcafe.net/index.html">Wxcafé </a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="//wxcafe.net/archives.html"><i class="icon-th-list"></i> Archives</a></li>
<li><a href="//wxcafe.net/pages/about/">A propos</a></li>
<li class="divider-vertical"></li>
<ul class="nav pull-right">
</ul>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span9" id="content">
<section id="content">
<article>
<header>
<h1>
<a href=""
rel="bookmark"
title="Permalink to Redesign du blog, etc">Redesign du blog, etc</a>
</h1>
</header>
<div class="entry-content">
<div class="well">
<footer class="post-info">
<span class="label">Date</span>
<span class="published" title="2013-06-12T19:14:00+02:00">
<i class="icon-calendar"></i> Wed 12 June 2013
</span>
<br />
<span class="label">By</span>
<a href="//wxcafe.net/author/wxcafe.html"><i class="icon-user"></i>wxcafe</a>
<br />
<span class="label">Category</span>
2015-09-03 19:58:32 +02:00
<a href="//wxcafe.net/category/note/"><i class="icon-folder-open"></i>Note</a>
2014-11-24 22:52:53 +01:00
<br />
</footer><!-- /.post-info --> </div>
2015-09-03 19:58:32 +02:00
<p>Comme vous avez pu le remarquer, ce blog a &ldquo;un peu&rdquo; changé récemment.</p>
<p>Du coup, expliquons. J&rsquo;ai récemment monté <a href="http://serverporn.fr">serverporn</a>, et ai par la même
occasion découvert <a href="http://getpelican.com">pelican</a>. J&rsquo;ai tout de suite accroché a ce générateur de
site statique en python, du fait de son efficacité, de sa facilité d&rsquo;utilisation
2014-11-24 22:52:53 +01:00
et de sa grande customisation. En gros, pelican est un logiciel qui prend des
2015-09-03 19:58:32 +02:00
fichiers markdown ou reStructuredText, les passe a la moulinette d&rsquo;un &ldquo;thème&rdquo;
constitué de templates pour les fichiers html et l&rsquo;organisation du projet et
d&rsquo;une partie &ldquo;statique&rdquo; contenant le css, et les autres fichiers nécessaires au
2014-11-24 22:52:53 +01:00
projet, et en fait des pages html. </p>
<p>Globalement, un thème est constitué ainsi :</p>
2015-09-03 19:58:32 +02:00
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f8f8f2">th</span><span style="color: #960050; background-color: #1e0010">è</span><span style="color: #f8f8f2">me</span>
<span style="color: #960050; background-color: #1e0010">├──</span> <span style="color: #66d9ef">static</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">css</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">└─</span> <span style="color: #f8f8f2">[css</span> <span style="color: #f8f8f2">files]</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">img</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">└─</span> <span style="color: #f8f8f2">[image</span> <span style="color: #f8f8f2">files]</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">└─</span> <span style="color: #f8f8f2">js</span>
<span style="color: #960050; background-color: #1e0010"></span> <span style="color: #960050; background-color: #1e0010">└─</span> <span style="color: #f8f8f2">[javascript</span> <span style="color: #f8f8f2">files]</span>
<span style="color: #960050; background-color: #1e0010">└──</span> <span style="color: #f8f8f2">template</span>
<span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">base.html</span>
<span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">index.html</span>
<span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">page.html</span>
<span style="color: #960050; background-color: #1e0010">├─</span> <span style="color: #f8f8f2">[...]</span>
<span style="color: #960050; background-color: #1e0010">└─</span> <span style="color: #f8f8f2">article.html</span>
2014-11-24 22:52:53 +01:00
</pre></div>
<p>Sachant que les fichiers .html sont en réalité des fichiers suivant la syntaxe
django, et utilisent des variables particulières telles <code>{{ article.content }}</code>,
par exemple. La syntaxe complète est très bien documentée dans la <a href="http://docs.getpelican.com/en/3.2/themes.html#templates-and-variables">doc</a> de
pelican.</p>
2015-09-03 19:58:32 +02:00
<p>L&rsquo;un des grands avantages de pelican est aussi la facilité qu&rsquo;il offre quand a
2014-11-24 22:52:53 +01:00
la mise a jour du blog.<br />
En effet, il offre un système de Makefiles permettant, grâce a de nombreuses
cibles de compilation, de régénérer le site entier, de ne générer que les
fichiers modifiés depuis la dernière génération, de générer uniquement les
2015-09-03 19:58:32 +02:00
fichiers n&rsquo;existant pas la dernière fois, etc&hellip;
2014-11-24 22:52:53 +01:00
La gestion du projet en devient donc très simple, puisque après avoir écrit un
article, il suffit de faire un <code>make html</code> pour mettre a jour le blog.</p>
<p>De plus, le système de wordpress commençait a ne plus me convenir, du fait du
manque de customisation, du fait que ça soit du PHP (beurk), etc. La, avec
2015-09-03 19:58:32 +02:00
pelican, je contrôle bien plus ce qui est mis sur le serveur (puisque c&rsquo;est moi
qui ait modifié les templates et le css), c&rsquo;est lisible (puisque c&rsquo;est du
python, par opposition au PHP&hellip;), et c&rsquo;est plus &ldquo;efficace&rdquo;. Le markdown est
2014-11-24 22:52:53 +01:00
très pratique, je peux utiliser mon éditeur de texte de prédilection pour faire
2015-09-03 19:58:32 +02:00
les articles, je n&rsquo;ai pas besoin d&rsquo;un accès continu au net, bref, c&rsquo;est plus
2014-11-24 22:52:53 +01:00
efficace.</p>
<p>En ce qui concerne les points négatifs : </p>
<ul>
<li>
<p>Perte des commentaires:
2015-09-03 19:58:32 +02:00
Je vous propose de vous référer a l&rsquo;article de Gordontesos <a href="http://gordon.re/hacktivisme/la-necessite-des-commentaires.html">ici</a> quand a
2014-11-24 22:52:53 +01:00
mon avis sur ce sujet.</p>
</li>
<li>
<p>Perte du bouton flattr:
2015-09-03 19:58:32 +02:00
Il va bientôt être remis, c&rsquo;est juste un manque de temps de ma part, mais vu
que toutes les pages passent par les mêmes templates, c&rsquo;est assez facile a
2014-11-24 22:52:53 +01:00
faire.</p>
</li>
<li>
<p>Perte du spam:
2015-09-03 19:58:32 +02:00
Pourquoi c&rsquo;est dans les points négatifs, ca?</p>
2014-11-24 22:52:53 +01:00
</li>
<li>
2015-09-03 19:58:32 +02:00
<p>Temps d&rsquo;adaptation et d&rsquo;appréhension du système:
2014-11-24 22:52:53 +01:00
Oui, pendant encore un certain temps, il y aura des glitchs plus ou moins
2015-09-03 19:58:32 +02:00
réguliers sur le blog, c&rsquo;est parce que j&rsquo;apprend a me servir de ce système
et que j&rsquo;apprend du css et du html. Ca arrive, ca passera, mais dans tous
les cas ca me permet d&rsquo;apprendre plein de choses, donc je mets plutôt ca
2014-11-24 22:52:53 +01:00
dans la catëgorie positive.</p>
</li>
</ul>
2015-09-03 19:58:32 +02:00
<p>Voila, c&rsquo;est mon retour d&rsquo;expérience sur pelican. A plus. </p>
2014-11-24 22:52:53 +01:00
</div><!-- /.entry-content -->
</article>
</section>
</div><!--/span-->
<div class="span3 well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<!-- Categories links -->
<li class="nav-header"><h4><i class="icon-folder-close icon-large"></i> Categories</h4></li>
<li>
<a href="//wxcafe.net/category/hacking/">
<i class="icon-folder-open icon-large"></i>Hacking
</a>
</li>
<li>
2015-09-03 19:58:32 +02:00
<a href="//wxcafe.net/category/note/">
<i class="icon-folder-open icon-large"></i>Note
2014-11-24 22:52:53 +01:00
</a>
</li>
<li>
<a href="//wxcafe.net/category/oses/">
<i class="icon-folder-open icon-large"></i>OSes
</a>
</li>
<li>
<a href="//wxcafe.net/category/ranting/">
<i class="icon-folder-open icon-large"></i>Ranting
</a>
</li>
<li>
2015-09-03 19:58:32 +02:00
<a href="//wxcafe.net/category/tutoriel/">
<i class="icon-folder-open icon-large"></i>Tutoriel
2014-11-24 22:52:53 +01:00
</a>
</li>
<li>
2015-09-03 19:58:32 +02:00
<a href="//wxcafe.net/category/vidya-games/">
<i class="icon-folder-open icon-large"></i>Vidya Games
2014-11-24 22:52:53 +01:00
</a>
</li>
<hr>
<!-- Social links -->
<li class="nav-header"><h4><i class="icon-exchange"></i> social</h4></li>
<a class="FlattrButton" style="display:none;"
title="//wxcafe.net"
style="padding-top: 10px;"
rel="flattr;
url://wxcafe.net;
title://wxcafe.net;
button:compact;
popout:0;
uid:wxcafe;
category:blog;"
href="//wxcafe.net">flattr</a>
<li><a href="https://twitter.com/wxcafe"><i class="icon-twitter icon-large"></i> Twitter</a></li>
<li><a href="https://github.com/wxcafe"><i class="icon-github icon-large"></i> Github</a></li>
<li><a href="mailto://wxcafe@wxcafe.net"><i class="icon-envelope icon-large"></i> Email</a></li>
2015-09-03 19:58:32 +02:00
<li><a href="https://pub.wxcafe.net/wxcafe.asc"><i class="icon-key icon-large"></i> Gpg</a></li>
<li><a href="https://www.openstreetmap.org/relation/105146"><i class="icon-map-marker icon-large"></i> IRL</a></li>
2014-11-24 22:52:53 +01:00
<hr>
<!-- Links -->
<li class="nav-header"><h4><i class="icon-external-link"></i> Links</h4></li>
<li><a href="https://github.com/wxcafe/blog-source"><i class="icon-code icon-large "></i> Source!</a></li>
<li><a href="http://git.wxcafe.net"><i class="icon-github-sign icon-large "></i> Public Git</a></li>
<hr>
<!--- RSS feed -->
<li class="nav-header"><h4><i class="icon-rss"></i> feeds</h4></li>
<li><a href="//wxcafe.net/feeds/feed.rss.xml" rel="alternate"><i class="icon-bookmark-empty icon-large"></i> RSS</a></li>
<li><a href="//wxcafe.net/feeds/feed.atom.xml" rel="alternate"><i class="icon-bookmark-empty icon-large"></i> Atom</a></li>
</ul> </div><!--/.well -->
</div><!--/row-->
<hr>
<footer>
<address id="about">
Proudly powered by <a href="http://pelican.notmyidea.org/">Pelican</a>,
which takes great advantage of <a href="http://python.org">Python</a>.<br />
Powered by <a href="https://github.com/getpelican/pelican-themes/tree/master/bootstrap2">bootstrap2</a> theme, thanks!
</address>
</footer>
</div><!--/.fluid-container-->
</body>
</html>