Techilm

iOS Development, Web & Technology

Créer Un Blog Sous Octopress - Partie 1 - Présentation

Cet article s’étend sur deux parties. La première partie ci dessous présente Octopress dans les grandes lignes et les problèmes auxquels il est adapté. La seconde est un tuto présentant comment créer et déployer un blog Octopress.

Le site où vous vous trouvez actuellement est assez jeune. Je l’ai mis en ligne en Mars 2012 sous sa formule actuelle : Présenter mes compétences, mon CV en ligne et surtout un blog (technique).

Depuis Mars 2012 donc, il était sous Wordpress, un CMS apprécié et très utilisé pour des sites/blogs, même parmi les plus populaires.

J’aime Wordpress, mais aujourd’hui je préfère Octopress. Et quand je dis que je préfère Octopress, je veux dire que si Wordpress a une note de 13/20, Octopress aurait quelque chose du genre 23/20 avec les points bonus et serait hors catégorie.

Ma première rencontre avec Octopress s’est faite il y a longtemps, au bas mot, il y a presque un an. Mais à l’époque je ne le savais pas, je le voyais presque tous les jours, sans le reconnaitre.

C’était en fait sur le site de Matt Gemmell qu’il m’arrive souvent de visiter car il fait souvent des articles très justes.

Je me souviens de ma réaction à chaque visite : J’étais toujours frappé part la beauté, la rapidité et l’adaptation mobile du site. Mais j’avais d’autres impératifs, donc je n’ai pas vraiment cherché d’où cela provenait.

Un peu plus tard (je ne sais pas vraiment quand), j’ai lu des articles sur Octopress, j’ai trouvé ça pas mal sur le principe mais je n’ai pas cherché plus loin.

Au moment de monter mon site, je connaissais un peu Wordpress et je l’ai trouvé adapté pour ajouter régulièrement des articles. (C’est le principe de base en même temps…)

J’ai pris un thème minimaliste et je l’ai customisé, mais le résultat ne me plaisait pas tout à fait. Les couleurs, polices et les textures me convenaient, mais pas l’agencement général. Et je ne voulais pas réinventer la roue, surtout que je risquais de ne pas la faire vraiment ronde.

Un peu plus tard, l’excellent Keith Harrison a migré son site vers Octopress et en a profité pour en faire un article. Je l’ai lu, la sauce commençait à prendre.

Après avoir recherché ce qu’il en était d’Octopress, creusé les principes et technos sous-jacents, j’ai compris que c’était ce qu’il me fallait, et pour plusieurs raisons, que je vais justement vous exposer.

Un blog statique et performant

Octopress se base sur Jekyll, qui est un générateur de sites statiques, écrit en Ruby. Il ne faut pas avoir peur des lignes de commandes pour profiter d’Octopress, soyez avertis.

Le site généré est donc 100% statique, c’est à dire que ceci demandera très peu de ressources côté serveur. Croyez-moi, pour beaucoup de cas où l’on utilise un site dynamique, une solution de ce type (génération statique) suffit.

Scalable

Je ne m’attends pas à avoir un compteur de visites qui explose, mais il faut donc quand même noter que la scalability (capacité à monter en charge) est considérable. Voici un exemple traduit, tiré encore une fois de la migration de Matt Gemmell vers Octopress :

Huit jours après avoir écrit cet article, j’ai publié un autre article intitulé SEO for Non-dicks. Cet article a été simultanément fireballed [NDT: C’est à dire partagé par John Gruber sur son très populaire blog Daring Fireball, ce qui se traduit en un immense nombre de visites en très peu de temps], référencé sur .net magazine, Hacker News, le blog de Marco Arment ainsi qu’ailleurs sur le web, y compris d’innombrables tweets. Cet article à lui seul a été vu 35000 fois sur une période de 3 jours, et ce blog en général recevait 55000 visites de pages sur la même période.

Pendant tout ce temps, le blog continuait à apparaitre instantanément, même quelques minutes seulement après que le lien depuis Daring Fireball apparaisse, et mon serveur (Apache 2 sur Ubuntu chez Linode) a géré le trafic sans efforts et avec énormément de ressources non utilisées. Je n’aurais pas pu demander de meilleur test grandeur nature. Merci Octopress.

Source : http://mattgemmell.com/2011/09/12/blogging-with-octopress/

Bon, pour les perfs, je pense que vous êtes convaincus, le même auteur note d’ailleurs que sous Wordpress, malgré un bon serveur dédié et des stratégies de cache adaptées, il avait des problèmes de latence en cas de nombreuses visites, problèmes qui ont disparu avec Octopress.

Simple et efficace

Autre point important : La simplicité. En effet, nul besoin avec Octopress de monter une base de données, un serveur, des utilisateurs, des droits, etc. La plupart d’entre nous n’en ont pas besoin, et on devrait se contenter de ce qu’il nous suffit.

Pour ajoute un article, vous allez tout simplement créer un fichier texte. (Voir tutoriel)

Pour le formatage (titres, puces, liens, code) il suffira d’écrire en syntaxe Markdown. Rappelons que le Markdown est une manière d’écrire qui permet de formater un fichier et de voir ce formatage même en mode texte brut (sous une forme différente bien sûr). Octopress prendra en entrée ce fichier et donnera en sortie un bel HTML, bien formé et valide.

La simplicité est également là côté dev : Même si vous ne connaissez pas du tout Ruby, vous pouvez utiliser Octopress. Vous n’avez besoin que de la doc et de bon sens. Et de lignes de commandes. :-)

Apparence

Thème

C’est une question de goût, mais j’imagine mal comment on pourrait trouver laid le thème de base d’Octopress. Pour ma part je le trouve vraiment magnifique et agréable à lire. Le texte est gros, et ce n’est pas plus mal. Trop souvent on garde l’héritage de nos écrans 800*600 où l’on cherchait à caser le plus de choses possibles dans une page. Plus besoin de ça aujourd’hui.

Je trouve les polices utilisées (PT Sans pour les menus et PT Serif pour le contenu) particulièrement jolies aussi.

Il est personnalisable très facilement, pour n’aurez qu’à éditer un fichier Sass pour changer les couleurs ou même installer un autre thème

Responsive design

Tel quel, Octopress est tout à fait adapté au desktop comme au mobile. Si vous êtes sur un navigateur de bureau, essayez de réduire la fenêtre, (remontez au début de l’article pour voir comment le menu réagit), vous verrez que tout le contenu s’adapte très bien.

Nous ne devrions avoir qu’un seul web, les media-queries et JS nous le permettent donc fini la redirection vers un site pour mobile (surtout que la redirection inverse est très rarement faite…) Une seule page pour tous.

Sémantique

La structure par défaut du site généré est “SEO-Friendly”, et permet une bonne indexation.

La syndication RSS/ATOM est automatique et livrée par défaut.

Enfin les balises sémantiques HTML5 sont présentes et bien utilisées, ce qui garantit également une bonne indexation de contenu à l’avenir.

Hébergement, Gestion de versions

Vous n’êtes pas obligé d’avoir un serveur ni même un hébergement payant pour créer déployer votre site. Vous pouvez passer par GitHub pages ou par Heroku (encore une fois, par défaut, tout est prêt pour).

Vous pouvez aussi héberger ceci sur votre propre serveur, c’est d’ailleurs ce que j’ai choisi de faire, et c’est ce est vu pendant le tutoriel. Dans ce cas, le déploiement est fait via Rsync, d’une rapidité redoutable.

De plus, votre site est alors sous forme de repository git. Vous pouvez donc le manipuler comme n’importe quel code : commit, revert, push, pull etc. Ce sera votre mode d’intégration, plus de FTP !

Services fournis

De très bons services sont inclus et gérés automatiquement. Parmi eux Twitter, Google Plus, Pinboard, Delicious, Github et Google Analytics.

Vous n’aurez qu’à renseigner les champs prévus pour vos identifiants, le reste est fait pour vous. :-)

La gestion des commentaires passe par Disqus, qui est un excellent service dédié justement aux commentaires. Il vise à avoir une base centralisée de commentaire, avec authentification unique. Chacun garde ainsi le contrôle sur tout ce qu’il commente sur le web. Un peu comme Facebook, mais sans l’atrocité et en version moins invasive.

Des plugins…

Enfin, tout a été prévu pour répondre aux situations les plus basiques, exemples :

  • Inclusion de code directement depuis vos projets ;
  • Inclusion automatique de gists de GitHub ;
  • Coloration syntaxique de code ;
  • Balise vidéo HTML5 avec repli vers Flash player en cas d’incompatibilité.

Pour conclure…

Vous l’aurez compris, j’ai été particulièrement conquis par Octopress. J’hésitais à me lancer pensant que ça allait être un minimum compliqué, et en réalité ça a été exactement l’inverse.

Tout a été très simple (à condition d’accepter d’ouvrir son Terminal) et au total j’ai du mettre environ 3 ou 4 heures pour tout faire, c’est à dire : récupérer le repository, configurer Octopress, configurer mon serveur pour l’accueillir, entrer mon contenu précédent, personnaliser le visuel et mes pages, et publier le tout.

N’oubliez par de lire la seconde partie, qui est un tuto sur toute la marche à suivre pour démarrer avec Octopress : http://techilm.com/blog/2012/07/23/creer-un-blog-sous-octopress-partie-2-tuto/

Comments