C’est ici que commence véritablement le caractère technique de ce tutoriel. Dans un premier temps, nous allons voir comment mettre en place un environnement de travail aussi bien sous Windows que sous Linux. Nous verrons ensuite comment installer Octopress. Après avoir étudié son architecture, nous reviendrons en détail sur la configuration d’un blog Octopress pour finalement utiliser nos premières lignes de commande en relation directe avec Octopress.

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

Mise en place de l’environnement de travail

Comme je vous le disais dans le chapitre précédent, Octopress est écrit en Ruby. Pour fonctionner, il nécessite la version 1.9.3 du langage. Nous allons donc mettre en place notre environnement de travail en prenant en compte cette nécessité.

Linux

Sous Linux, pour gérer facilement les outils relatifs à Ruby sur notre machine, je vous propose d’installer RVM (Ruby Version Manager). Pour installer ce formidable outil, ouvrez un terminal puis saisissez la ligne de commande suivante :

curl -L https://get.rvm.io | bash -s stable --ruby

Nous allons également ajouter quelques éléments de configuration à notre fichier .bash_profile. Pour ce faire, utilisez la commande suivante :

echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile

Pour charger la configuration que nous venons de mettre en place, il convient alors d’utiliser la commande source :

source ~/.bash_profile

Maintenant que RVM est installé, nous allons nous en servir pour installer la version 1.9.3 de Ruby, nécessaire au bon fonctionnement d’Octopress :

rvm install 1.9.3

Une fois l’installation de la version 1.9.3 de Ruby terminée, nous allons préciser à notre système que c’est cette version que nous souhaitons utiliser via la commande suivante :

rvm use 1.9.3

Nous en avons fini avec Ruby. Nous allons maintenant installer et mettre à jour quelques outils autour de Ruby qui seront nécessaires au bon fonctionnement d’Octopress. Débutons par mettre à jour Rubygems, un gestionnaire de “packages” pour Ruby. Pour le mettre à jour, utilisez la commande suivante :

rvm rubygems latest

Une fois la mise à jour de Rubygems terminée, nous allons pouvoir terminer la mise en place de notre environnement de travail en installant Bundler, un gestionnaire de dépendances. Cet outil nous permettra dans la suite de ce tutoriel de télécharger et installer très facilement toutes les dépendances nécessaires au bon fonctionnement d’Octopress. Pour l’installer, saisissez la commande suivante dans votre terminal :

gem install bundler

Nous en avons maintenant terminé avec la mise en place de l’environnement de travail sous Linux.

Windows

Comme je vous le disais précédemment, Octopress nécessite au minimum la version 1.9.3 de Ruby, nous allons donc installer Ruby 1.9.3 grâce à Ruby Installer for Windows. Rendez-vous ici et téléchargez l’installateur correspondant à notre version de Ruby :

Le processus d’installation est assez typique de toute installation d’un logiciel sous Windows. Cependant, pendant l’installation, veillez à ajouter Ruby au PATH Windows en cochant la case concernée :

Une fois l’installation de Ruby terminée, nous allons procéder à l’installation du Ruby Development Kit. Pour le télécharger, rendez-vous ici et téléchargez la version correspondant à la version de Ruby 1.9.3 :

Une fois le téléchargement terminé, lancez l’installation. Pour faciliter son utilisation, installez le à la racine de votre disque dur :

Une fois l’extraction terminée, ouvrez l’invite de commandes Windows, puis rendez-vous dans le dossier où vous venez d’extraire le Ruby Development Kit :

cd C:\RubyDevKit

Pour finaliser l’installation du Ruby Development Kit, toujours dans votre invite de commandes, saisissez les deux commandes suivantes :

ruby dk.rb init
ruby dk.rb install

Nous allons pouvoir terminer la mise en place de notre environnement de travail en installant Bundler, un gestionnaire de dépendances. Cet outil nous permettra dans la suite de ce tutoriel de télécharger et installer très facilement toutes les dépendances nécessaires au bon fonctionnement d’Octopress. Pour l’installer, saisissez la commande suivante dans votre terminal :

gem install bundler

Nous en avons maintenant terminé avec les outils relatifs à Ruby. Il nous reste un dernier logiciel à installer afin d’avoir un environnement de travail parfaitement fonctionnel, il s’agit de Git, un gestionnaire de version qui permettra de récupérer le code source d’Octopress à partir duquel nous pourrons générer notre propre blog.

Pour pouvoir télécharger Git, rendez-vous ici.

Une fois le téléchargement terminé, lancez l’installation. Pendant le processus, sélectionnez “Use Git Bash only” - ça sera suffisant pour l’utilisation que nous en aurons - puis “Use OpenSSH” à l’étape suivante et finalement “Checkout Windows-style, commit Unix-style line endings”.

Nous en avons maintenant terminé avec la mise en place de l’environnement de travail sous Windows.

Installation et découverte de l’architecture d’Octopress

Installation d’Octopress

Maintenant que notre environnement de travail est en place, nous allons pouvoir passer à l’installation d’Octopress à proprement parlé. La première étape consiste à récupérer les sources du projet Octopress à l’aide de Git. Si vous êtes sous Linux, ouvrez un terminal et si vous êtes sous Windows, ouvrez le logiciel Git Bash.

Avant de copier les sources, créez sur votre ordinateur le dossier qui contiendra les sources d’Octopress, par exemple /opt/octopress/ sous Linux ou C:\octopress sous Windows. Rendez-vous en ensuite dans le dossier à l’aide de la ligne de commande. Sous Windows comme sous Linux, la ligne de commande suivante devrait fonctionner (le chemin est bien évidemment à adapter) :

 cd C:\octopress

Une fois dans le dossier, copiez les sources d’Octopress à l’aide de la ligne de commande suivante :

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

Une fois le téléchargement des sources terminé, nous allons installer les dépendances nécessaires au bon fonctionnement d’Octopress. Si vous êtes sous Windows, vous pouvez au choix utiliser l’invite de commandes ou continuez à utiliser la console Git Bash. Lancez l’installation des dépendances via la commande :

bundle install

Finalement, lancez l’installation d’Octopress à l’aide de la commande suivante :

rake install

L’architecture

Nous sommes maintenant prêts à utiliser Octopress. Mais avant ça, je vous propose de faire un petit tour dans le dossier d’Octopress afin d’en étudier l’architecture. Avant toute chose, voici ce que vous devriez avoir, que vous soyez sous Windows ou sous Linux :

Je vous propose maintenant de revenir rapidement sur les principaux éléments qui composent l’architecture d’Octopress.

Le fichier _config.yml permet de configurer avec précision le blog Octopress. Du nom de domaine, au nombre d’articles à afficher, c’est ici que tout se passe. Ce fichier est très important et nous aurons l’occasion de l’étudier en détail dans la suite de ce cours.

Le dossier .themes permet de stocker les informations relatives aux différents thèmes. Par défaut, le thème utilisé est le thème “classic” qui, notons le, est responsive.

Le dossier plugins, comme son nom le laisse deviner, contient tous les plugins utilisables dans Octopress. Si vous jetez un coup d’oeil à l’intérieur du dossier, vous vous rendrez compte qu’ils sont tous écrits en Ruby. Au cours de ce tutoriel, nous apprendrons à les utiliser et même à en écrire !

Le dossier public, vide actuellement, contiendra votre blog statique une fois celui-ci généré. Ce sont les fichiers contenus dans ce dossier que nous hébergerons sur internet pour que votre blog soit accessible à tous depuis n’importe quel navigateur internet.

Le dossier sass contient les feuilles de style Sass (Syntactically Awesome Stylesheets), une technologie permettant d’étendre les possibilités du CSS.

Finalement, le dernier dossier auquel je souhaite que l’on s’attarde est le dossier source. Ce dossier contient les sources de votre blog, c’est-à-dire tous les fichiers à prendre en compte lors de la création de votre blog comme par exemple les pages, les images ou les articles. Ce dossier contient lui-même plusieurs dossiers. Revenons sur certains d’entre eux :

• le dossier _includes contient les éléments qui peuvent être inclus et donc réutilisés sur plusieurs pages du blog comme par exemple le menu ou les pieds de page ;
• le dossier _layouts contient les templates des éléments qui seront automatiquement générés comme par exemple un article ou une page ;
• le dossier _posts, vide pour le moment, contiendra les articles du blog, à raison d’un fichier par article.

Configuration du blog

Maintenant que les présentations avec Octopress sont faites, je vous propose que l’on s’attarde quelques instants sur la configuration d’un blog. Comme je vous le disais, configurer un blog Octopress passe par la modification du fichier _config.yml.

Ce fichier, comme son extension le suggère, est écrit en YAML (YAML Ain’t Markup Language). Ne vous inquiétez, vous n’avez pas besoin d’apprendre ce langage pour pouvoir configurer votre blog, la syntaxe de YAML étant, selon moi, assez triviale.

Découvrons ensemble le fichier _config.yml en l’ouvrant dans l’éditeur de texte de votre choix. Vous devriez alors voir qu’il est découpé en trois parties :

• Main configs ;
• Jekyll & Plugins ;
• 3rd Party Settings.

Autopsions ensemble chacune de ces sections.

La partie “Main configs”

Cette première section contient les éléments généralistes qu’il est possible de configurer :

• le champ url permet de spécifier l’URL de votre site internet, c’est-à-dire son adresse sur internet ;
• le champ title permet de renseigner le titre du blog ;
• le champ subtitle permet de préciser le sous-titre du blog ;
• le champ author permet de définir l’auteur du blog ;
• le champ description permet d’écrire un petit résumé du contenu du blog ;
• le champ subscribe_rss permet de spécifier le flux RSS du blog ;
• le champ email permet de préciser votre adresse e-mail si vous souhaitez qu’elle apparaisse dans le flux RSS;
• le champ date_format permet de définir le format à afficher pour les dates.

Deux autres champs sont disponibles : simple_search et date_format. Attardons nous un peu plus longuement sur ces deux champs.

Débutons avec le champ simple_search. Ce n’est plus un secret pour vous, Octopress est un outil permettant de gérer des sites statiques. Quand un site propose une fonction de recherche, il est généralement dynamique. En effet, une technologie qui s’exécute côté serveur est en charge de trier les informations de la base de données pour ne garder que celles qui correspondent à la recherche d’un utilisateur. Un blog Octopress étant statique, un gros problème semble se poser. Et pourtant, il n’est pas imaginable de proposer un blog sans une fonction de recherche. Puisqu’Octopress, à cause de son caractère statique, n’est pas capable d’effectuer une telle tâche, il délègue à un outil capable de le faire comme Google ou Bing.

Le champ simple_search permet donc de renseigner le moteur de recherche que l’on souhaite utiliser pour remplir la fonction de recherche sur le blog. Par défaut, il s’agit de Google Search, mais rien ne vous empêche d’en utiliser un autre comme par exemple Bing Search ou DuckDuckGo.

La partie “Jekyll & Plugins”

Cette seconde section permet de paramétrer les différents plugins ainsi que les différents éléments hérités de la plate-forme Jekyll. Revenons sur le rôle de certains d’entre eux.

Le champ root vous permet de définir la racine de votre blog. Par exemple, si vous souhaitez définir le blog comme la racine du site, laissez la valeur par défaut qui est /. Ainsi, le blog sera accessible à l’URL définit (par exemple http://www.monsite.com). Si vous souhaitez changer l’emplacement du blog sur votre site, comme par exemple le placer à l’adresse http://www.monsite.com/blog, renseignez /blog.

Le champ permalink permet quant à lui de renseigner la structure de vos permaliens. Un permalien, si vous l’ignorez, est une URL destinée à ne pas changer dans le temps. L’objectif étant, si vos liens sont référencés par d’autres, d’éviter les erreurs 404. Idéalement, chaque article d’un blog a son propre permalien et, toujours idéalement, se doit de le conserver durant toute sa durée de vie, quel que soit le moteur de blog utilisé. Ainsi, si vous migrez d’un moteur de blog à un autre, il convient de vous débrouiller pour conserver les permaliens de vos articles.

Si vous jetez un coup d’oeil au champ permalink du fichier _config.yml, vous devriez y voir la valeur suivante /blog/:year/:month/:day/:title/ . Nous pouvons dès maintenant identifier que deux types semblent composer le template de notre permalien :

• les chaînes de caractères statiques comme les “/” et “blog” ;
• les chaînes de caractères précédées par le caractère “:”.

Dans ce template, les chaînes de caractères précédées par le caractère “:” permettent d’identifier les parties dynamiques du permalien. Ces parties dynamiques seront, au moment de la génération du permalien de l’article, remplacées par une valeur bien précise. Ainsi, dans le template par défaut, la chaine de caractères :year sera remplacée par l’année en cours à savoir 2014 au moment où j’écris ces lignes. Idem pour le mois et le jour. La chaîne de caractères :title sera quant à elle remplacée par le titre de l’article.

Ainsi, si j’écris un article s’intitulant “Coucou” le 31 mars 2014, son permalien sera /blog/2014/03/31/coucou et sera donc accessible via l’URL renseignée plus haut dans le fichier de configuration, par exemple http://www.monsite.fr/blog/2014/03/31/coucou.

Le template du permalien est bien évidemment personnalisable, ainsi, vous pouvez par exemple remplacer les “/” par des “-“ ou encore ajouter une extension à la fin. Comme vous avez pu le voir avec les chaînes de caractères :year, :month ou encore :title, il existe plusieurs variables pré-définies. Le tableau suivant permet de les récapituler.

La section “Jekyll & Plugins” du fichier _config.yml est assez dense et à ce stade, il n’est pas pertinent de revenir sur tous les éléments qui la composent. Cependant, j’aimerais que voyons ensemble quelques éléments clefs :

• le champ paginate permet de préciser le nombre d’articles que vous souhaitez afficher sur chacune des pages de votre blog et ainsi conditionner sa pagination ;
• le champ recent_posts permet de spécifier le nombre d’articles à afficher dans la section des articles récents de votre blog ;
• le champ excerpt_link permet de renseigner la chaîne de caractères à afficher pour inciter un visiteur de votre blog à lire la suite d’un article.

La partie “3rd Party Settings”

Cette troisième et dernière section permet de paramètrer les différents logiciels qualifiés de tiers, c’est-à-dire tous les logiciels ou les éléments, qui en soit ne font pas partie d’Octopress mais que nous allons pouvoir plugger à notre blog pour bénéficier de nouvelles fonctionnalités comme par exemple :

• la gestion de commentaires ;
• le partage des articles et des pages sur les réseaux sociaux ;
• la mise en place de Google Analytics ;
• etc.

Cette partie n’étant pas strictement indispensable, je vous propose de la laisser de côté pour le moment. Nous y reviendrons plus tard dans ce tutoriel.

Un exemple de fichier de configuration

Afin que nous ayons la même base de travail, je vous propose ci-dessous un exemple de fichier de configuration qui pourrait être celui d’un blog Octopress en ligne.

# ----------------------- #
#      Main Configs       #
# ----------------------- #

url: http://octopress.rolandl.fr
title: Mon blog
subtitle: Un blog sur ce que j'aime.
author: Ludovic ROLAND
simple_search: https://www.google.com/search
description: Ce blog a pour objectif de vous faire découvrir ce que j'aime dans la vie comme des films, des livres et des patisseries !

# Default date format is "ordinal" (resulting in "July 22nd 2007")
# You can customize the format as defined in
# http://www.ruby-doc.org/core-1.9.2/Time.html#method-i-strftime
# Additionally, %o will give you the ordinal representation of the day
date_format: "ordinal"

# RSS / Email (optional) subscription links (change if using something like Feedburner)
subscribe_rss: /atom.xml
subscribe_email:
# RSS feeds can list your email address if you like
email:

# ----------------------- #
#    Jekyll & Plugins     #
# ----------------------- #

# If publishing to a subdirectory as in http://site.com/project set 'root: /project'
root: /
permalink: /:year-:month-:day-:title.html
source: source
destination: public
plugins: plugins
code_dir: downloads/code
category_dir: blog/categories
markdown: rdiscount
rdiscount:
  extensions:
    - autolink
    - footnotes
    - smart
pygments: false # default python pygments have been replaced by pygments.rb

paginate: 10          # Posts per page on the blog index
pagination_dir: blog  # Directory base for pagination URLs eg. /blog/page/2/
recent_posts: 5       # Posts in the sidebar Recent Posts section
excerpt_link: "Read on →"  # "Continue reading" link text at the bottom of excerpted articles

titlecase: true       # Converts page and post titles to titlecase

# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

# Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below
# and add an array with the asides you want to use.
# blog_index_asides:
# post_asides:
# page_asides:

# ----------------------- #
#   3rd Party Settings    #
# ----------------------- #

# Github repositories
github_user:
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

# Twitter
twitter_user:
twitter_tweet_button: true

# Google +1
google_plus_one: false
google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user:
googleplus_hidden: false

# Pinboard
pinboard_user:
pinboard_count: 3

# Delicious
delicious_user:
delicious_count: 3

# Disqus Comments
disqus_short_name:
disqus_show_comment_count: false

# Google Analytics
google_analytics_tracking_id:

# Facebook Like
facebook_like: false

Générer et déployer son blog

Maintenant que notre blog est configuré, je vous propose de voir comment le générer puis le déployer sur un serveur FTP.

Génération du blog

Puisqu’un blog Octopress est un blog statique, il convient de regénérer le blog dès qu’une modification est faite et ce dans le but, par la suite, de déployer le blog mis à jour sur internet.

Vous allez pouvoir le constater, mais générer un blog Octopress est très facile, une simple ligne de commande dans le dossier du blog suffit :

rake generate

Si la génération se déroule sans accroc, vous devriez voir les phrases suivantes s’afficher dans votre console :

## Generating Site with Jekyll
identical source/stylesheets/screen.css
Configuration from C:/octopress/_config.yml
Building site: source -> public
Successfully generated site: source -> public

Vous pouvez maintenant vous rendre dans le dossier public du blog Octopress pour y constater les sources du blog une fois générée.

Prévisualiser le blog

Avant de déployer le blog Octopress sur un serveur web afin d’accueillir des milliers voir des millions de visites par jour, il convient de vérifier son bon fonctionnement. Pour ça, il existe une commande permettant de tester le blog en local :

rake preview

Pour visualiser le blog, saisissez ensuite l’adresse localhost:4000 dans un navigateur web. Observez alors votre blog - vide pour le moment - pour la première fois.

Si vous vous amusez à changer la taille de la fenêtre de votre navigateur web, vous vous rendrez alors compte que le design utilisé par défaut sur votre blog est responsive design, c’est-à-dire qu’il est capable de s’adapter à toutes les tailles d’écran (du téléphone à l’ordinateur en passant par les tablettes).

Déployer son blog sur un serveur FTP

Si le blog est conforme à vos attentes, il est temps de le mettre en ligne. Nous pourrions bien évidemment nous contenter de déplacer le contenu du dossier public sur un serveur web, mais il y a mieux. Une petite commande va nous permettre très facilement déployer notre blog sur un serveur web et partir à la conquête d’internet.

rake deploy

Cette commande utilise en réalité un petit soft du nom de rsync qui va synchroniser le contenu du dossier public du blog avec le contenu d’un dossier spécifique sur notre serveur web le tout via une connexion sécurisée SSH. Pour pouvoir utiliser la commande de déploiement, il convient donc de procéder à un peu de configuration.

Rendez-vous à la racine du dossier Octopress puis ouvrez le fichier Rakefile. Repérez la section qui débute par la ligne ## – Rsync Deploy config – ##. C’est cette section que nous allons configurer et plus précisément les éléments suivants :

• ssh_user est votre identifiant SSH;
• ssh_port est le port SSH ;
• document_root est le dossier dans lequel vous souhaitez déployer votre blog sur le serveur web.

Finalement, placez le paramètre rsync_delete à true.

Une fois cette configuration terminée, si vous êtes sous Linux vous pouvez dès maintenant utiliser la commande donnée précédemment pour déployer votre blog. Il convient tout simplement de renseigner votre mot de passe SSH quand celui-ci vous est demandé.

Si vous êtes sous Windows, il va falloir être un peu plus patient. En effet, le logiciel rsync n’étant pas natif sous Windows, il convient d’installer un équivalent compatible sur le système d’exploitation de Microsoft. Dans le cadre de ce tutoriel, j’ai choisi d’utiliser cwRsync, mais sachez qu’il existe d’autres alternatives. Pour télécharger gratuitement cwRsync, rendez-vous ici. Une fois l’archive téléchargée, décompressez son contenu où vous souhaitez sur votre ordinateur, puis ajoutez le chemin du dossier dans la variable d’environnement PATH de votre ordinateur. Une fois ces étapes terminées, vous devriez alors pouvoir déployer votre blog sur internet depuis votre ordinateur Windows sans problème.