Techilm

iOS Development, Web & Technology

Créer Un Blog Sous Octopress - Partie 2 - Tuto

Nous avons déjà passé en revue les principales fonctionnalités et possibilités d’Octopress. Maintenant, entrons nous au cœur de la pratique et voyons concrètement comment maitriser le framework.

Ce tuto sera réalisé sous Mac OS X 10.7. Si vous tentez le coup sous Linux, vous n’aurez que très peu (ou pas) de différences. Pour Windows je n’ai aucune idée de comment faire, mais je pense que ce doit être possible (ne serait-ce qu’en utilisant CygWin).

Préparation de l’environnement

Commençons par préparer l’environnement qui va accueillir notre blog Octopress. Cela se traduit non seulement par la machine locale sur laquelle nous ferons nos modifications, mais aussi le serveur distant qui hébergera les pages générées.

Petit prélude sur l’hébergement : Comme dit précédemment, au moins trois possibilités sont offertes pour déployer Octopress :

  • GitHub Pages ;
  • Heroku ;
  • Hébergement personnel.

Dans tous les cas vous pouvez faire pointer votre nom de domaine afin de ne pas avoir une URL du type http://nomdublog.github.com. Dans ce tuto nous verrons la troisième solution réputée comme étant la moins aisée des trois. Les deux premières sont vraiment très simples, il vous suffira de suivre à la lettre la documentation. Si vraiment vous n’y arrivez pas, faites-moi signe.

J’héberge tout ce que je fais chez AlwaysData. C’est un hébergeur que j’apprécie : Il y a une offre gratuite illimitée en temps et bande passante (limitée dans le volume de données stockées par contre), les équipes sont très réactives et compréhensives (il m’est arrivé d’avoir des réponses à des tickets une nuit de weekend 5 min après avoir ouvert le ticket), plusieurs technologies pas toujours évidentes à trouver (Django, Symfony, Rails, MongoDB, CouchDB), et surtout vous avez un accès SSH à votre serveur quel que ce soit l’offre sur laquelle vous êtes, ce qui nous sera utile en l’occurrence.

Justement, commençons par créer le répertoire sur notre serveur qui accueillera le blog. Allons-y en SSH.

1
2
3
ssh user@ssh.alwaysdata.com
cd ~/www/
mkdir octopress

Configurez un sous-domaine de test qui pointera vers ce répertoire (~/www/octopress). Une fois que tout sera OK, vous ferez pointer votre domaine principal.

Sur votre machine maintenant, récupérons Octopress depuis le repository officiel.

Remarque : Si vous souhaitez déployer par GitHub Pages ou garder une copie de votre blog sur votre compte GitHub. Vous feriez mieux de forker d’abord le repository officiel puis cloner le fork de votre compte.

1
git clone git://github.com/imathis/octopress.git ~/octopress

Votre copie locale est dans le répertoire octopress contenu dans votre répertoire personnel (home).

Octopress est en Ruby. Il va donc falloir installer (ou mettre à jour) un environnement Ruby sur votre machine.

Pour gérer Ruby, nous allons passer par un outil dédié à cet effet : RVM ou Ruby Version Manager, assez explicite :-)

Si vous ne l’avez pas encore, récupérons et installons RVM :

1
bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)
Définition de la fonction shell (cas pour bash)
1
2
echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
source ~/.bash_profile

Nous allons dire maintenant à RVM quel Ruby installer et utiliser (plusieurs versions peuvent cohabiter).

Attention cependant la documentation officielle d’Octopress mentionne la version 1.9.2. Cependant, ayant Xcode 4.3.3 d’installé avec les Command Line Tools, RVM refuse d’utiliser la 1.9.2 pour une question d’incompatibilité avec GCC apparemment. J’ai donc utilisé la 1.9.3, mais j’ai dû modifier le fichier .rvmrc à la racine du repository, car celui-ci contrôlait que la version utilisée soit bien la 1.9.2.

Je ne garantis pas pour autant le bon fonctionnement étant donné que l’on sort des instructions officielles, mais pour ma part je n’ai rien vu de suspect.

Installons et utilisons donc Ruby 1.9.3 :

Vérifiez d’abord rapidement quelle version vous avez actuellement :

1
ruby --version

Puis installons la 1.9.3 :

1
2
rvm install 1.9.3
rvm use 1.9.3

Revérifiez la version maintenant :

1
ruby --version

Maintenant, comme dit plus haut, modifions le fichier .rvmrc afin de spécifier la 1.9.3 au lieu de la 1.9.2. Ouvrez le fichier et remplacez le 2 par un 3. :-D

Mettons à jour Rubygems. C’est un gestionnaire de packages pour Ruby un peu comme brew pour OS X ou npm pour node.js.

1
rvm rubygems latest

Et justement nous allons installer une gem maintenant (une gem est un package Ruby) : la gem bundler. Bundler est un gestionnaire de dépendances évolué, s’apparentant à Maven ou CocoaPods. C’est à dire qu’il s’occupe pour le développeur des dépendances du projet, il va les télécharger et inclure à la bonne version.

Vous n’aurez pas à définir les packages qu’il vous faut, tout est déjà dans le répertoire d’Octopress. Mais il vous faut Bundler, donc ;

1
gem install bundler

Et maintenant, un gros morceau, le téléchargement et l’installation des tous les packages liés à Octopress. Soyez patients et vérifiez que tout s’est bien passé. Bundler va regarder dans le fichier Gemfile (auquel vous pouvez aussi jeter un coup d’œil d’ailleurs) et installer chaque dépendance :

1
bundle install

Configuration

Notre environnement est maintenant prêt.

Pour la suite, nous allons maintenant quasi-exclusivement utiliser Rake. Rake est un outil semblable et inspiré de make et Makefile. (On a d’ailleurs ici le Rakefile.)

C’est un moteur de production, qui vous aide à gérer votre projet. Il peut réaliser des tâches complexes et des scripts.

Configuration du blog

Commençons par réaliser l’installation de base :

1
rake install

Configurons maintenant notre blog. Ouvrez le fichier _config.yml toujours à la racine du projet et éditez tout ce que vous devez éditer, les sections sont assez explicites.

On a par exemple l’url et le nom du blog. Renseignez également vos comptes Twitter, Google Plus, GitHub et Google Analytics pour que le contenu des plugins et scripts associés soit généré automatiquement.

Remarque : Pour mettre en place un système de commentaires sur vos articles, vous devez renseigner un Disqus short name. Ceci n’est pas votre pseudo, mais un nom explicite que vous donnerez pour à Disqus pour signifier que vous gérer ce blog. Rendez-vous dans votre compte Disqus pour trouver cette option.

Configuration du déploiement

Nous allons maintenant configurer le déploiement. Pour ma part, je le fais sur mon propre serveur et donc je déploie via Rsync. C’est pourquoi j’ai un peu de configuration à faire dans le fichier Rakefile :

Configuration du Rakefile pour le déploiement Rsync
1
2
3
4
ssh_user       = "monnomdutilisateur@ssh.alwaysdata.com"
document_root  = "~/www/octopress/"
rsync_delete   = true
deploy_default = "rsync"

Vous reconnaissez le répertoire qu’on avait créé au tout début sur notre serveur ? On dit tout simplement à Rake qu’il doit se connecter en ssh sur le domaine (en l’occurrence AlwaysData) avec le nom d’utilisateur fourni, puis aller dans le répertoire ~/www/octopress/ et déployer ici en utilisant Rsync.

Tentons une première fois de déployer :

1
2
rake generate
rake deploy

Le mot de passe de votre accès SSH est demandé, entrez le. Maintenant allez sur le domaine qui pointe vers le répertoire vers lequel vous avez déployé. Voilà ! Vous devriez voir un blog basique, sans aucune entrée mais fonctionnel.

Nous reverrons le déploiement juste end dessous lors de l’ajout de notre premier article.

Ajouter des entrées

Vos articles devront être écrits au format Markdown. Ce format est désormais très largement reconnu pour sa simplicité et son efficacité. Même si vous ne connaissez pas du tout, il ne vous faudra que quelques minutes pour comprendre et utiliser l’essentiel.

Vos articles doivent aller dans le répertoire source/_posts et doivent être nommés sous ce format AAAA-MM-JJ-le-titre-de-larticle.markdown

Le titre de l’article donnera l’URL générée, donc n’entrez pas n’importe quoi !

Dans le fichier doit apparaître un en-tête spécifique aidant Octopress à identifier et catégoriser l’article.

Cependant, le plus simple est d’utiliser une tâche Rake qui fera presque tout pour vous : - Elle générera un fichier au bon endroit et bon format à la date du jour ; - Elle générera un nom de fichier et d’URL correct si le titre de votre article de l’est pas ; - Elle générera l’en-tête de base, que vous pourrez modifier.

Essayons donc :

1
rake new_post["Apps Web vs Apps Natives : Quelques Arguments"]

Ceci générera source/_posts/2012-07-23-apps-web-vs-apps-natives-quelques-arguments.markdown .

En ouvrant ce fichier, on trouvera :

Méta-informations d’un article
1
2
3
4
5
6
7
---
layout: post
title: "Apps Web vs Apps Natives : Quelques Arguments"
date: 2012-07-23 12:34
comments: true
categories:
---

Vous pouvez éditer ces meta informations pour ajouter une ou plusieurs catégories (attention à la syntaxe si plusieurs catégories, il faut les mettre dans un tableau littéral : [cat1, cat2, cat3]), modifier la date ou encore activer ou désactiver les commentaires pour cet article.

Il ne reste plus qu’à ajouter le contenu de l’article après l’en tête (en dessous des trois tirets après les catégories), en Markdown, et votre article est prêt (mais pas encore visible).

Pour générer et déployer, comme précédemment :

1
2
rake generate
rake deploy

Votre répertoire (créé désormais s’il n’existait pas) public contient le site généré et optimisé (JavaScript minifié), en somme, ce sont vos pages prêtes ) être uploadées. En FTP, cela marcherait très bien, mais nous allons passer par Rsync, qui est très rapide et plus pratique.

Travailler en local

Cependant, il serait un peu lourd de devoir générer et déployer à chaque fois qu’on veut voir l’impact des changements que l’on vient de faire, surtout lorsque l’on est en phase de configuration, personnalisation, correction etc.

Pour éviter ceci, je vous présente

1
rake preview

Cette commande va lancer un petit serveur en local, qui scrutera les modifications apportées à votre répertoire Octopress et les répercutera directement. (Il faut faudra quand même actualiser les pages…)

Par défaut, le serveur écoute sur le port 4000, donc pour y accéder il vous suffira d’aller sur http://localhost:4000 .

Ajouter des pages statiques

On a souvent besoin d’avoir quelques pages statiques. Dans mon cas par exemple, je souhaitais mettre un lien directement dans le menu principal vers mon CV, et une page About.

Pour le CV, j’avais déjà mon répertoire avec toutes mes pages à l’intérieur et mes scripts. Il suffit alors juste de déposer ce répertoire dans le répertoire source d’Octopress. Sachant que ce répertoire représente la source. Donc si vous déposez ici un répertoire foo qui contient une page bar.html, le lien pour y accéder une fois en ligne sera : http://votreurl.com/foo/bar.html.

Dans le cas de la page About, il fallait une nouvelle page, qui reste dans le ton graphique du blog. Une tâche Rake est également prévue pour ce cas :

1
rake new_page["about"]

Ceci nous génère dans le répertoire source l’arborescence et le fichier suivant : source/about/index.markdown.

Le fichier répond aux mêmes conventions que vu plus haut pour l’article, il ne vous reste plus qu’à l’éditer (en Markdown) puis publier.

L’URL en ligne de cette page sera : http://votreurl.com/about/ .

Modification du menu de navigation

Comment ajouter des liens dans le menu de navigation principal (la barre horizontale) vers ces pages ?

Très simple : il suffit d’éditer le fichier source/_includes/custom/navigation.html et d’ajouter une entrée pour ce que vous souhaitez, sur le modèle de ce qui est déjà présent. Sachant que la macro ` représente bien sûr la racine de votre répertoiresource`.

Dans mon cas, pour le menu que vous voyez ci-dessus, cela donne :

Menu de navigation
1
2
3
4
5
6
<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="/cv_mustapha/resume.html">Resume/CV</a></li>
  <li><a href="/about/">About</a></li>
</ul>

Au final

Voilà pour ce tuto. Afin de ne pas faire trop long, je vous ai uniquement montré l’essentiel mais sachez qu’il y a énormément d’autres possibilités. Plongez dans la documentation officielle (qui est d’une grande qualité) et vous en serez convaincu, si ce n’est déjà fait. N’hésitez pas à me faire part de vos impressions également.

Comments