Il y a quelques temps, j’ai débuté sur le site OpenClassrooms un tutoriel sur le moteur de blog statique Octopress. La première partie de ce tutoriel est terminée depuis un moment, mais pour des raisons techniques n’a pas pu être mise en ligne.

Octopress 3 étant sur les rails, mon tutoriel va malheureusement être rapidement obsolète. Plutôt que de perdre le travail effectué, je vais vous proposer une série de 7 articles correspondant à ce que j’ai pu écrire sur le site OpenClassrooms. Le tutoriel du site sera alors mis à jour lorsqu’Octopress 3 sera annoncé officiellement. ;)

Plan

• Créer un blog statique avec Octopress (1/7) : à la découverte d’Octopress
• Créer un blog statique avec Octopress (2/7) : installation et configuration
• Créer un blog statique avec Octopress (3/7) : écrire du contenu - les bases
• Créer un blog statique avec Octopress (4/7) : écrire du contenu - les plugins
• Créer un blog statique avec Octopress (5/7) : un blog social
• Créer un blog statique avec Octopress (6/7) : utiliser un thème téléchargé
• Créer un blog statique avec Octopress (7/7) : personnaliser l’apparence de son blog

Introduction

Les blogs sont devenus incontournables sur Internet. Il en existerait plus de 200 millions et on estime que chaque mois, 3 millions de nouveaux blogs sont créés. Ce succès peut notamment s’expliquer par le fait qu’il est aujourd’hui très simple de créer un blog. En seulement quelques clics, vous pouvez vous lancer dans la rédaction d’articles sur des sujets qui vous tiennent à coeur.

Pour créer un blog, il existe des dizaines voir des centaines de plates-formes plus ou moins personnalisables et plus ou moins configurables. Parmi les plates-formes les plus connues et les plus utilisées, on peut par exemple citer Blogger, plate-forme gérée par le géant américain Google ou encore Wordpress, plate-forme très en vogue et incontournable.

Si Wordpress est aujourd’hui très utilisé, nombreux sont ceux qui le qualifient d’usine à gaz et lui reprochent une certaine lenteur. Il existe de nombreux critères qui peuvent entraîner ces dites lenteurs, cependant, le dynamisme de Wordpress peut-être une explication. Nous reviendrons sur cette notion dans le premier chapitre de ce cours.

Une solution pour réduire la latence liée à ce dynamisme serait de proposer un blog allant dans le sens opposé, à savoir un blog proposant un contenu dit statique, permettant alors un affichage éclair. Octopress, plate-forme que nous allons étudier au cours de ce tutoriel a justement été créé dans ce but : créer un blog léger, rapide, statique, complet, personnalisable et administrable.

Ce n’est pas pour rien qu’Octopress est souvent qualifié de “blog pour les geeks”. ;)

Vous vous en doutez, ce cours a pour objectif de vous faire découvrir Octopress afin que vous ayez tous les outils en main pour créer et gérer votre blog sur cette plate-forme. Pour ce faire, nous apprendrons, dans une première, à prendre en main Octopress, à y écrire du contenu, à générer notre blog et le mettre en ligne.

Dans une seconde partie, nous reviendrons sur le design d’un blog Octopress. Nous apprendrons à installer thème autre que celui utilisé par défaut avant de voir comment créer notre propre thème de A à Z.

Dans une troisième partie, nous apprendrons à créer nos propres plugins afin d’ajouter de nouvelles fonctionnalités à notre blog Octopress.

Finalement, vous retrouverez en annexe de ce cours des explications sur comment migrer un blog Wordpress existant vers Octopress sans en perdre le contenu. Nous verrons également comment créer un formulaire de contact pour notre blog Octopress.

Si l’appellation “geek” ne vous a pas effrayé et que vous êtes encore là, je vous propose de débuter tout de suite !

Découvrir Octopress

Ce premier chapitre se veut purement introductif. Il sera l’occasion de voir la différence entre un blog statique et un blog dynamique avant de revenir brièvement sur l’histoire d’Octopress.

Dynamique versus statique

Comme je vous le disais en introduction de ce cours, Octopress vous permet de créer un blog dont le contenu est statique, alors que d’autres plates-formes, comme Wordpress proposent de créer un blog dont le contenu est dynamique. Revenons sans plus tarder sur ces deux notions. Wordpress : un exemple de blog dynamique

Wordpress est indéniablement l’un des moteurs de blog les plus utilisés de nos jours. Et pourtant, nombreux sont ceux qui le qualifient d’usine à gaz et lui reprochent une certaine lenteur.

Il existe de nombreux éléments qui peuvent entraîner des lenteurs sur un site internet. En vrac, on peut par exemple citer :

• une mauvaise configuration de la plate-forme ;
• l’exécution d’un script peu optimisé ;
• un serveur peu performant ;
• etc.

Une fois les critères cités ci-dessus éliminés, que reste-t-il ? Il convient de s’interroger sur la nature même de Wordpress, à savoir son côté dynamique.

Un site dynamique est un site internet dont le contenu est dit dynamique, c’est-à-dire que le contenu peut évoluer sans avoir besoin de modifier manuellement les fichiers qui composent le site internet. Typiquement, si l’on regarde un site comme Facebook ou Twitter, le contenu évolue sans cesse sans avoir besoin de modifier quoi que ce soit. On se contente de remplir un formulaire puis de le valider afin de mettre des données et du contenu en ligne. Dans le cadre de Wordpress, il est par exemple possible d’ajouter un article, une page, un commentaire, de modifier du contenu, créer des utilisateurs, etc. le tout via des formulaires à remplir, des cases à cocher, etc. le tout depuis l’interface d’administration.

Un site dynamique, comme n’importe quel site, utilise des technologies qui permettent de structurer l’affichage des données à l’écran. Ces technologies, généralement du HTML et du CSS sont interprétées par le navigateur web dans lequel le site internet s’affiche (c’est d’ailleurs pour cette raison que l’on remarque parfois pour certains sites un affichage légèrement différent selon que l’on utilise Internet Explorer, Google Chrome ou Mozilla Firefox). En plus de ces technologies, un site dynamique utilise d’autres technologies qui permettent justement d’assurer le dynamisme.

En effet, il convient de stocker quelques part les différentes données que les utilisateurs peuvent ajouter ou modifier. Il existe de nombreuses possibilités pour stocker ces données comme par exemple une base de données où un système de fichiers. Une autre technologie devient alors obligatoire permettant de lire et afficher les données stockées dans la base de données ou un fichier. Cette technologie est généralement exécutée sur le serveur sur lequel le site est hébergé. On peut par exemple citer quelques-unes de ces technologies :

• PHP ;
• Ruby ;
• Perl ;
• Java ;
• etc.

Regardons alors comment fonctionne un site internet dynamique lorsqu’un visiteur souhaite afficher une page. Les étapes sont les suivantes :

1. l’utilisateur demande l’affichage de la page internet en saisissant l’adresse dans son navigateur internet ;
2. le serveur exécute les instructions dynamiques (écrites par exemple en PHP) de la page demandée et génère ainsi une page au contenu statique ;
3. le serveur renvoie la page générée.

C’est la seconde étape qui peut se révéler très longue. En effet, pour générer la page demandée, le serveur peut-être amenée à se connecter à la base de données, y récupérer les informations à afficher puis finalement les traiter et les afficher à l’écran. C’est parfois des dizaines voir des centaines d’informations qui doivent être récupérées pour être affichées à l’écran.

Dans le cadre de Wordpress, les informations stockées dans la base de données sont par exemple le contenu d’un article, sa date, son auteur, les commentaires associés à l’article avec pour chacun l’auteur, la date, etc. Vous l’aurez compris, dans le cadre de Wordpress la base de données permet de stocker un très grand nombre d’informations.

Octopress : un exemple de site statique

Si Wordpress est un exemple de moteur de blog dynamique, Octopress peut-être considéré comme son exact opposé, à savoir un moteur de blog statique.

Un site statique, est un site internet dont le contenu est dit statique, c’est-à-dire que le contenu ne peut pas être modifié. Il ne peut pas évoluer sans modifier manuellement les fichiers qui le composent. Dès que l’on va vouloir faire une évolution au niveau du site (aussi bien sur sa structure que sur son contenu), il conviendra de modifier le fichier concerné puis de le remettre sur le serveur qui l’héberge afin que la version en ligne du site soit mise à jour.

Bien évidemment, un site internet statique ne rime pas obligatoirement avec rapidité, un serveur peu performant pouvant ne pas aider, mais nous devons tout de même admettre que de manière générale, un site statique s’affiche plus rapidement qu’un site dynamique.

Tentons alors de comprendre pourquoi en regardant comment fonctionne un site internet statique lorsqu’un visiteur souhaite afficher une page dans son navigateur internet :

• l’utilisateur demande l’affichage de la page internet en saisissant l’adresse dans son navigateur internet ;
• le serveur renvoie la page demandée.

Comme vous pouvez le constater, l’étape très chronophage de la génération de la page sur un site dynamique n’est pas présente. Et pour cause, il n’y a rien à générer puisque le contenu des pages est statique, il n’évolue pas.

La petite histoire d’Octopress

Jusqu’à maintenant, nous savons peu de choses sur Octopress si ce n’est qu’il s’agit d’une plate-forme permettant de créer des blogs statiques. Je vous propose de faire plus ample connaissance avec cette technologie, qui j’en suis sûr, saura vous séduire. ;)

Octopress est un logiciel libre, dont les sources sont disponibles sur Github, spécialisé dans la création de blogs statiques. Comme je vous le disais dans l’introduction de ce cours, Octopress est régulièrement qualifié de technologie pour les geeks et ce à juste titre puisque pour mettre en place le blog, y ajouter du contenu, le générer puis le déployer, nous utiliserons des lignes de commandes. C’est donc l’utilisation de ces lignes de commandes qui n’en fait pas une technologie accessible et qui fera très certainement fuir les plus néophytes.

Historique

La version 2 d’Octopress, celle que nous allons utiliser tout au long de ce tutoriel, a vu le jour en 2011 et se base sur Jekyll, un moteur de sites statiques.

Si Octopress a initialement vu le jour en 2009, le projet a su évoluer et propose dans sa dernière version de nombreuses fonctionnalités via, notamment, de nombreux plugins permettant d’écrire des pages et articles au contenu riche (images, vidéos, code, etc.).

Aujourd’hui, Octopress est indéniablement de plus en plus utilisé et de nombreux blogs initialement sous Wordpress sont migrés, gagnant ainsi en rapidité.

Fonctionnalités

Octopress est écrit en Ruby, un langage de programmation très répandu. En l’utilisant, il sera donc possible d’écrire nos propres plugins et ainsi étendre les fonctionnalités de nos blogs. Un plugin Octopress étant très simple à mettre en place, il sera également très simple de le distribuer afin de le proposer à d’autres utilisateurs de blogs Octopress.

D’un point de vue purement fonctionnel, si Octopress nous permet bien évidemment d’écrire des pages et des articles, cette technologie nous permet également de mettre en place des fonctionnalités plus poussées comme :

• la mise en place de commentaires ;
• la mise en place de widgets (comme Twitter, etc.) ;
• la mise en place d’un partage social Facebook, Twitter et Google+ ;
• etc.

Note : Les images utilisées dans cet article sont issues du site OpenClassrooms.