274 lines
12 KiB
HTML
274 lines
12 KiB
HTML
<!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 -->
|
|
<link rel="stylesheet" href="//wxcafe.net/theme/css/extra.css" type="text/css" />
|
|
<link rel="stylesheet" href="//wxcafe.net/theme/css/bootstrap.css" type="text/css" />
|
|
<link href='http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
|
|
<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>
|
|
<span class="icon-bar"></span>
|
|
</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>
|
|
<a href="//wxcafe.net/category/note/"><i class="icon-folder-open"></i>Note</a>
|
|
<br />
|
|
|
|
|
|
|
|
|
|
</footer><!-- /.post-info --> </div>
|
|
<p>Comme vous avez pu le remarquer, ce blog a “un peu” changé récemment.</p>
|
|
<p>Du coup, expliquons. J’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’ai tout de suite accroché a ce générateur de
|
|
site statique en python, du fait de son efficacité, de sa facilité d’utilisation
|
|
et de sa grande customisation. En gros, pelican est un logiciel qui prend des
|
|
fichiers markdown ou reStructuredText, les passe a la moulinette d’un “thème”
|
|
constitué de templates pour les fichiers html et l’organisation du projet et
|
|
d’une partie “statique” contenant le css, et les autres fichiers nécessaires au
|
|
projet, et en fait des pages html. </p>
|
|
<p>Globalement, un thème est constitué ainsi :</p>
|
|
<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>
|
|
</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>
|
|
<p>L’un des grands avantages de pelican est aussi la facilité qu’il offre quand a
|
|
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
|
|
fichiers n’existant pas la dernière fois, etc…
|
|
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
|
|
pelican, je contrôle bien plus ce qui est mis sur le serveur (puisque c’est moi
|
|
qui ait modifié les templates et le css), c’est lisible (puisque c’est du
|
|
python, par opposition au PHP…), et c’est plus “efficace”. Le markdown est
|
|
très pratique, je peux utiliser mon éditeur de texte de prédilection pour faire
|
|
les articles, je n’ai pas besoin d’un accès continu au net, bref, c’est plus
|
|
efficace.</p>
|
|
<p>En ce qui concerne les points négatifs : </p>
|
|
<ul>
|
|
<li>
|
|
<p>Perte des commentaires:
|
|
Je vous propose de vous référer a l’article de Gordontesos <a href="http://gordon.re/hacktivisme/la-necessite-des-commentaires.html">ici</a> quand a
|
|
mon avis sur ce sujet.</p>
|
|
</li>
|
|
<li>
|
|
<p>Perte du bouton flattr:
|
|
Il va bientôt être remis, c’est juste un manque de temps de ma part, mais vu
|
|
que toutes les pages passent par les mêmes templates, c’est assez facile a
|
|
faire.</p>
|
|
</li>
|
|
<li>
|
|
<p>Perte du spam:
|
|
Pourquoi c’est dans les points négatifs, ca?</p>
|
|
</li>
|
|
<li>
|
|
<p>Temps d’adaptation et d’appréhension du système:
|
|
Oui, pendant encore un certain temps, il y aura des glitchs plus ou moins
|
|
réguliers sur le blog, c’est parce que j’apprend a me servir de ce système
|
|
et que j’apprend du css et du html. Ca arrive, ca passera, mais dans tous
|
|
les cas ca me permet d’apprendre plein de choses, donc je mets plutôt ca
|
|
dans la catëgorie positive.</p>
|
|
</li>
|
|
</ul>
|
|
<p>Voila, c’est mon retour d’expérience sur pelican. A plus. </p>
|
|
</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>
|
|
<a href="//wxcafe.net/category/note/">
|
|
<i class="icon-folder-open icon-large"></i>Note
|
|
</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>
|
|
<a href="//wxcafe.net/category/tutoriel/">
|
|
<i class="icon-folder-open icon-large"></i>Tutoriel
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="//wxcafe.net/category/vidya-games/">
|
|
<i class="icon-folder-open icon-large"></i>Vidya Games
|
|
</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>
|
|
<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>
|
|
|
|
<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> |