Octopress utilise pygments pour afficher la coloration syntaxique des blocs de code avec les balises
{% codeblock %}
{% endcodeblock %}
ou
{% include_code %}
.
Par défaut sur windows, Python n’est pas installé. Si vous n’installez pas python ni pygments les blocs de code apparaitront mais sans coloration syntaxique. Par contre si vous spécifiez le langage dans le codeblock :
{% codeblock lang:html %}
vous aurez un beau message d’erreur :
Liquid error: No such file or directory - python2.7 -c “import sys; print sys.executable”
J’ai pas mal galéré afin de trouver une solution, mais j’ai finalement trouvé. Je vous explique en détail le processus ci-dessous.
C:\python27
Après l’installation, il va falloir ajouter aux variables d’environnement de windows le chemin de C:\python27
et de C:\python27\scripts
afin de pouvoir installer pygments.
Il faut ensuite ajouter à la variable système path
les chemins de C:\python27
et de C:\python27\scripts
.
path
,;%PYTHON_HOME%;%PYTHON_HOME%\scripts
Attention, les ;
sont très importants entre chaque valeur du path !
Il faut ensuite ajouter à la variable système path
les chemins de C:\python27
et de C:\python27\scripts
.
path
,;%PYTHON_HOME%;%PYTHON_HOME%\scripts
Attention, les ;
sont très importants entre chaque valeur du path !
Téléchargeons maintenant le package python easy_install, disponible sur cette page si quelquechose se passait mal.
Installez le par défaut.
Tout devrait bien se passer.
Ouvrez votre console et tapez simplement
easy_install pygments
Le package va simplement s’installer comme une gem ruby.
ET VOILA !
La coloration syntaxique devrait fonctionner normalement sur votre PC sous windows !
]]>1 2 |
|
Quand vous créer votre octopress, un fichier _config.yml
est créé contenant plein de paramètres :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
|
C’est ce fichier que l’on nomme “site”. Si vous faites un appel :
1
|
|
Octopress ira chercher dans _config.yml
la valeur de “author”. Pour l’instant la valeur retournée serait : “Your Name” . Compris ? Je récapitule, dans l’exemple ci-dessous, on aura donc dans l’ordre :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
site.url
site.title
site.subtitle
site.author
site.simple_search
site.description
site.date_format
site.subscribe_rss
site.subscribe_email
site.email
J’espère que tout est clair pour vous.
Passons maintenant à “page”.
Alors page représente tout simplement, le fichier en cours de modélisation, celui qui contient le
1
|
|
entre doubles accolades.
Si on reprend le tuto dans l’ordre, notre fichier page est donc index.html
pour le moment.
En effet, index.html
appelait le modèle home.html
qui lui même appelait les _includes. Dans notre cas index.html
sera “page”, home.html
sera le layout. Vous suivez ? Vous pouvez dans l’entête de “page” mettre des variables que vous appellerez par la suite grâce à
1
|
|
à l’endroit voulu.
Il existe des valeurs déjà utilisées par octopress comme :
page.content
: le contenu brut de votre “page”,page.title
: le titre,page.url
: l’url unique sans le domaine (comme les permaliens wordpress),page.date
: la date Vous pouvez forcer un format en spécifiant YYYY-MM-DD HH:MM:SS, page.id
: un identifiant unqiue de votre page pour le flux RSS (/2012/08/05/titre par exemple),page.categories
: les catégories que vous lui affecter,page.tags
: les tags que vous lui affecter.Vous pouver ajouter page.sommaire ou page.excerpt ou page.geolocalisation tant que dans l’entête de votre “page” comprise entre deux jeu de 3 —, vous spécifiiez (oui oui deux i, la langue française est merveilleuse) ces paramètres. Au cas où ils ne sont pas systématiques pensez juste à faire une boucle de test if endif sinon octopress génererait des erreurs et planterait le système.
Exemple le code de footer.html
1 2 3 4 5 6 7 8 |
|
C’est infini. Ajustable selon les besoins et le thème que l’on fait.
Référence en anglais.
]]>c:\octopress_tuto\.themes\
un dossier minimal
dans l’explorateur windows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
sass/
contiendra nos fichiers sass pour créer les feuilles de styles et source contiendra nos fichiers templates
sass/
sass/
est divisé en 3 dossiers et un fichier screen.scss
qui appelera les autres:
base/
: contient la base du theme (mediaqueries, typographie, couleurs,etc…)
_layout.scss
: contient la structure du thème et les media queries _solarized.scss
: contient la coloration syntaxique _themes.scss
: contient les couleurs et les bases du thème _typography.scss
: contient tout ce qui concerne la typographie _utilities.scss
: contient quelques @mixins utiles custom/
: contient les paramètres que vous souhaitez changer du thème sans toucher au thème lui-même partials/
: contient le code spécifique aux zones de nos templates (header, footer, article, blog ,etc…) nous verrons son contenu plus tard.qui est le coeur de notre thème. Il contient :
_includes/
: contient des éléments reccurents qui seront appelés à différents endroits de notre thème (date, auteur,etc…) _layouts/
: contient les modèles qui seront utilisés lors de la création de vos articles et/ou pages (Nous verrons ça plus en détails) images/
: contient les images de notre thème.js/
: contient le javascript de notre thème.favicon.png
: notre favicon index.html
: la racine de notre site Notre thème sera un thème minimaliste présentant sur la page d’accueil une liste de tous les articles avec un sommaire.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Puis lorsque l’on clique sur le titre de l’article, on passe sur l’article lui-même :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
Bien entendu tout cela sera responsive. ^^
Index.html
C’est le premier fichier que nous allons créer. Pour l’instant nous le remplissons juste de :
1 2 3 |
|
Cela signifie qu’on lui dit de prendre comme modèle le fichier home.html contenu dans le dossier _layout. On aurait pu l’appeler accueil ou site. C’est vous qui choisisser le nom de vos modèles. Par contre le dossier _layout et layout: sont inchangeables. J’ai donc décidé de l’appeler home, ainsi je sais que c’est ma page d’accueil.
Que contient mon home.html
?
home.html
1 2 3 4 5 6 7 8 9 10 11 |
|
Vous remarquez donc un doctype HTML5 et une structure de site standard avec des include. Ces include signifient qu’il faut inclure des fichiers HTML se situant dans le dossier _includes. Rien de bien compliqué ! Je lui demande donc de récupérer :
head.html
nav.html
footer.html
et de les inclure à mon home.html
comme on le fait sous wordpress avec get_header(), get_footer() par exemple.
et bien c’est justement le contenu que l’on placera dans index.html
sous le bloc de code :
1 2 3 |
|
Vous saisissez le principe ?
head.html
Basiquement, head.html
contient tout ce qui se trouve entre les balises
1
|
|
d’un document html standard
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
On y trouve diverses informations standard. Vous savez de quoi il en retourne. Il y a juste ces codes entre
1
|
|
avec des if! Qu’est-ce que c’est ?
1 2 3 |
|
Et bien en fait il s’agit de variable contenues soit dans un fichier de configuration de votre octopress nommé _config.yml ou alors dans l’entete de votre fichier où se situait rapellez-vous :
1 2 3 |
|
Et bien on peut mettre des paramètres dedans ! Comme par exemple le titre, un sous-titre, un sommaire, une date, des catégories, des tags, etc…
Pour le premier exemple; il dit en fait que si dans l’entete de votre fichier d’appel (ici c’était index.html
il trouve le contenu “title”, il l’affichera sous la forme “Titre de la page | Anthony DURAND”. C’est aussi simple que ça. Nous verrons un peu plus loin le détail de ces variables.
nav.html
Ce fichier contient tout simplement le logo, le sous-titre et la navigation du site qui se limite ici à “Accueil” et “A propos”. Cette template étant en fait un blog le plus épuré possible dans le style de short.retinart.com, daneden.me et davegamache.com (dont je me suis plus qu’inspiré pour ce tuto, j’en ai même un peu honte.) Mais bon, il représente le genre de thème dont j’ai envie ET en plus tourne sous Jekyll, qui est le fondement d’Octopress. C’est la base parfaite pour vous faire comprendre les bases.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
footer.html
Ce fichier contendra tout simplement le footer de notre site.
1 2 3 4 5 6 7 8 |
|
Vous pouvez récupérer le contenu de cet octopress_tuto dans la branche etape-1 du dépot GitHub spécialement créé à l’occasion de ce tuto.
]]>Pour ce tuto voici la configuration que j’ai :
Vous devez avoir d’installé :
Pour pouvoir utilisé Octopress vous devez OBLIGATOIREMENT connaitre et savoir utiliser :
$ désigne une entrée dans la console, vous ne devez PAS taper le symbole $ lorsque vous entrer du code !
Ouvrer la console, mettez-vous sur le chemin où vous voulez créer octopress, je tiens à préciser que le dossier octopress sera crée lors de la copie du dépot git, inutile de le créer.
par exemple si vous voulez créer octopress dans c:\octopress, taper dans la console :
1
|
|
Si vous voulez créer octopress dans Mes documents :
1
|
|
Bien entendu remplacer Anthony par votre Nom :p
Pour les besoin de ce tuto, je créerait le dossier octopress_tuto directement à la racine de C, donc cela donnera :
1 2 |
|
Nous devons ensuite installer les dépendances d’Octopress, c’est-à-dire les autres gem ruby dont il a besoin pour fonctionner :
1
|
|
puis :
1
|
|
Voilà nous avons la base d’octopress et ses dépendances d’installés, vous pouvez voir ci-dessous l’arborescence ainsi créée dans c:\octopress_tuto
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 |
|
Nous allons maintenant créer notre thème rendez-vous dans le prochain article
]]>Et bien, ce blog est hébergé sur GitHub, en utilisant une plate-forme appelée Octopress.
La particularité d’Octopress c’est que le blog est statique, ce n’est que du HTML. Ici pas de PHP. On crée ses posts en markdown. Vous pouvez voir un exemple ci-dessous.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Vous voyez en haut un bloc encadré par — qui définie les “méta” de votre article ou page, un peu comme les méta box sous wordpress.
Non mais attends si ça fait tout comme wordpress pourquoi s’embêter avec Octopress. Encore un truc à apprendre, quoi !
Pas de base de données, pas de mysql, pas d’injection SQL, j’en passe et des meilleures. Ici que du HTML. La rapidité de votre blog sera x10 même avec de gros pics à 10 000 visiteurs en même temps.
Pas de php, donc pas server side, la rapidité s’en ressent aussi.
Vous pouvez utiliser votre editeur de texte favori avec vos snippets, votre environnement favori, pas de tinyMCE. Si vous avez l’habitude de travailler avec Sublime text 2 comme moi, vous écrirez vos articles plus rapidement.
Vous pouvez utiliser HTML 5, CSS 3, Octopress est livré par défaut avec SASS et Compass
Vous avez des plugins livrés de base avec :
Vous avez votre blog ET vote logiciel de versioning au même endroit.
Le thème par défaut est “responsive”.
Vous pouvez inclure votre propre nom de domaine et ainsi avoir votre blog à monsite.com au lieu de monsite.github.com
Vote site est hébergé gratuitement sur GitHub, leur infrastructure est juste énorme. Leurs serveurs sont costauds.
Vous devez connaitre Git et GitHub pour pouvoir blogguer et SASS pour modifier votre thème.
Vous devez avoir une machine avec vos sources octopress dessus et git, ruby et plusieurs gem d’installés dessus pour pouvoir mettre votre blog à jour.
A chaque mise à jour de votre site, vous devez rénénérer tout votre site. Bon je vous rassure ça prends 10 secondes mais ça peut surement durer 1 à 2 minutes pour les gros blogs avec des centaines d’articles dessus, vu que ce n’est que du HTML.
Voilà cette présentation est terminée, j’espère très prochainement vous faire un tuto complet en français pour permettre au gens qui veulent essayé de tester, même si le site Octopress l’explique très simplement en anglais.