Ludovic ROLAND

Blog technique sur mes expériences de développeur.

Créer un blog statique avec Octopress (6/7) : utiliser un thème téléchargé

24 novembre 2014

Vous n’êtes pas sans savoir que le thème graphique d’un site fait partie intégrante de son identité. C’est pourquoi, vous êtes très probablement capable de reconnaître des sites comme Facebook, Twitter ou encore OpenClassrooms grâce à la charte graphique du site et aux couleurs utilisées sans avoir besoin de visionner le logo associé à la marque.

Vous l’avez découvert dans la première partie de ce tutoriel, Octopress est livré avec un thème par défaut. Si vous vous promenez sur la toile à la recherche de blogs Octopress, vous vous rendrez compte qu’un grand nombre de ces blogs utilisent encore le thème par défaut.

Dans ce premier chapitre, nous allons apprendre à nous différencier des blogs Octopress qui utilisent le thème par défaut en installant un autre thème.

Plan

Où trouver des thèmes ?

Dans ce premier chapitre qui se veut peu technique, nous allons voir où est-ce qu’il est possible de trouver des thèmes tout fait prêt à être installé sur un blog Octopress.

En tapant les bons mots clefs dans un moteur de recherche telque Google, Bing ou encore Duck Duck Go, vous devriez trouverde nombreux sites proposant des thèmes gratuits comme payants. Parmi ces sites, vous trouverez par exemple :

Bien que ces sites proposent de nombreux thèmes de qualités, ce n’est pas à eux que nous allons nous intéresser dans le cadre de ce tutoriel. Ainsi, vous trouverez un grand nombre de thème sur le wiki du projet Octopress.

Comme vous pouvez le constater sur la capture d’écran ci-dessus, pour chaque thème recensé, vous trouverez :

  • le nom du thème avec un lien vers son repository GitHub ;
  • un lien vers un blog exploitant le dit thème pour le voir en action ;
  • une petite description du thème.

Comment installer un nouveau thème ?

Dans le précédent chapitre, nous avons vu où nous pouvons un grand nombre de thèmes pour personnaliser notre blog Octopress. Dans ce nouveau chapitre, nous allons voir comment installer l’un des thèmes disponibles sur le wiki du projet Octopress. Pour rappel, voici le lien : https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes.

Choix du thème

Dans le cadre de ce tutoriel, nous allons installer sur notre blog Octopress le thème Bold and Blue dont un aperçu est disponible sur cette page.

Le repository GitHub du thème est quant à lui disponible ici.

Téléchargement du thème

Avant de pouvoir prétendre installer le thème choisi, il convient de le télécharger. Puisque maintenant vous utilisez Octopress, vous êtes dorénavant des geeks ! C’est pourquoi nous n’allons pas télécharger le thème comme on télécharge n’importe quel fichier sur internet via un navigateur web. En effet, nous allons utiliser des lignes commandes. D’ailleurs, nous n’allons pas télécharger le thème, nous allons cloner son dépôt GitHub exactement de la même manière que nous l’avions fait pour récupérer les source du projet Octopress.

La prochaine étape nécessite donc, si vous êtes sous Windows, d’utiliser le logiciel Git Bash que nous avons déjà utilisé dans la première partie de ce tutoriel.

Grâce à votre terminal ou Git Bash, rendez-vous dans le dossier d’installation de votre blog Octopress :

cd C:\octopress

Il convient maintenant de cloner le dépôt GitHub du thème choisi dans le dossier .themes du dossier d’installation d’Octopress. Par exemple, pour le thème Bold and Blue dont le lien sur GitHub est https://github.com/johnkeith/boldandblue voici la commande à saisir :

git clone https://github.com/johnkeith/boldandblue .themes/boldandblue

Vous l’aurez donc compris, la commande générique grâce à laquelle vous pourrez installer n’importe quel thème est :

git clone <URL> .themes/<NOM_DU_THEME>

Une fois l’éxécution de la commande terminé, vous pouvez vous rendre dans le dossier .theme de votre blog Octopress pour y constater la présence du répertoire boldandblue comme dans la capture d’écran ci-dessous :

Installation du thème

Maintenant que le thème a correctement été téléchargé dans le répertoire Octopress prévu à cet effet, nous allons pouvoir l’installer. Pour Octopress, installer le thème signifie en réaliter l’utiliser.

L’installation d’un thème se fait via une commande rake et plus précisément la commande suivante :

rake install["NOM_DU_THEME"]

Ainsi, pour installer le thème Bold and Blue, la ligne de commande à utiliser sera :

rake install["boldandblue"]

Octopress devrait alors détecter qu’un thème est déjà utilisé et vous demander de confirmer le fait que vous souhaitez utiliser un nouveau thème via le message suivant :

A theme is already installed, proceeding will overwrite existing files. Are you
sure? [y/n]

Répondez alors par l’affirmatif (lettre y) pour pouvoir utiliser le thème.

Générez le blog puis prévisualisez le pour constater les changements comme en témoigne la capture d’écran ci-dessous :

A tout moment, vous pouvez revenir en arrière en indiquant que vous souhaitez utiliser le thème par défaut, c’est-à-dire le thème classic, via la commande suivante :

rake install["classic"]

Commentaires