Pour éditer le wiki, il faut demander un compte à un Lapin !
Difference between revisions of "Howto:Mise à jour du site web"
From Le L∞p's Wiki
(→Obtenir le code source) |
m (→Publier la modification: syntaxe) |
||
| (13 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
La mise à jour du site ouaibe pour les nuls. | La mise à jour du site ouaibe pour les nuls. | ||
| − | Il est important de faire des commit atomiques, et donc de faire un changement, suivi d'une description de ce qui a été fait, chaque changement étant le plus petit possible | + | Il est important de faire des commit atomiques, et donc de faire un changement, suivi d'une description de ce qui a été fait, chaque changement étant le plus petit possible <small>(voir le [https://gitorious.org/le-loop-blog/le-loop-blog/commits/master log des commits] pour un exemple)</small>. |
== Prérequis == | == Prérequis == | ||
| Line 7: | Line 7: | ||
Installer [http://blogofile.com blogofile] et git : | Installer [http://blogofile.com blogofile] et git : | ||
# apt-get install python-setuptools git | # apt-get install python-setuptools git | ||
| + | # easy_install install Blogofile | ||
| + | On peut préférer <code>pip</code> <small>(paquet [http://packages.debian.org/python-pip python-pip])</small> à <code>easy_install</code> : | ||
# pip install Blogofile | # pip install Blogofile | ||
| Line 13: | Line 15: | ||
Clôner le dépôt git depuis Github : | Clôner le dépôt git depuis Github : | ||
* Sur https://github.com/LeLoop/le-loop-blog | * Sur https://github.com/LeLoop/le-loop-blog | ||
| − | * Cliquer sur le bouton < | + | * Cliquer sur le bouton <code>Fork</code> pour créer votre propre espace de travail sur Github. |
Puis dans un shell : | Puis dans un shell : | ||
$ MOI='Mon blaze sur Github' | $ MOI='Mon blaze sur Github' | ||
$ git clone <nowiki>ssh://git@github.com/${MOI}/le-loop-blog.git</nowiki> | $ git clone <nowiki>ssh://git@github.com/${MOI}/le-loop-blog.git</nowiki> | ||
| + | $ cd le-loop-blog.git | ||
$ git remote add leloop <nowiki>https://github.com/LeLoop/le-loop-blog.git</nowiki> | $ git remote add leloop <nowiki>https://github.com/LeLoop/le-loop-blog.git</nowiki> | ||
| Line 36: | Line 39: | ||
Une fois qu'un changement a été vérifié et ne casse pas tout, on ajoute les fichiers modifiés : | Une fois qu'un changement a été vérifié et ne casse pas tout, on ajoute les fichiers modifiés : | ||
$ git add %liste_noms_fichiers% | $ git add %liste_noms_fichiers% | ||
| − | où %liste_noms_fichiers% est la liste des noms de fichiers modifiés pour ce changement. Voir aussi < | + | où %liste_noms_fichiers% est la liste des noms de fichiers modifiés pour ce changement. Voir aussi <code>git status</code>. |
Puis on enregistre la modification : | Puis on enregistre la modification : | ||
| Line 53: | Line 56: | ||
=== Faire valider la mise à jour === | === Faire valider la mise à jour === | ||
| − | Retourner sur [https://github.com/LeLoop/le-loop-blog github] et cliquer sur < | + | Retourner sur [https://github.com/LeLoop/le-loop-blog github] et cliquer sur <code>Pull request</code>. |
Puis soumettre un message pour proposer les changements en expliquant le tout. Un des membres du [https://github.com/LeLoop groupe Le Loop] intégrera les changements sur le serveur. | Puis soumettre un message pour proposer les changements en expliquant le tout. Un des membres du [https://github.com/LeLoop groupe Le Loop] intégrera les changements sur le serveur. | ||
| − | N.B.: un dépôt sur [https://gitorious.org/le-loop-blog/le-loop-blog gitorious] est aussi tenu à jour | + | N.B. : un dépôt sur [https://gitorious.org/le-loop-blog/le-loop-blog gitorious] est aussi tenu à jour. |
| + | |||
| + | === Et sans Github, ça donne quoi ? === | ||
| + | |||
| + | C'est pas beaucoup plus compliqué, seul quelques étapes diffèrent. Personne n'y échappera pour récupérer les sources <small>(non, malheureusement, c'est pas une blague)</small>, mais ça évite quand même de s'y créer un compte et c'est déjà ça. | ||
| + | |||
| + | ==== Obtenir le code source ==== | ||
| + | |||
| + | Cloner le dépôt depuis Github : | ||
| + | |||
| + | $ git clone git://github.com/LeLoop/le-loop-blog.git | ||
| + | $ cd le-loop-blog/ | ||
| + | |||
| + | ==== Publier la modification ==== | ||
| + | |||
| + | Simple ! Une fois vos ajouts, modifications ou retraits enregistrés dans votre dépôt local grâce à <code>git commit</code>, la commande suivante vous sortira un patch contenant votre dernier ''commit'' et prêt à être envoyé en pièce-jointe par mail à [mailto:webmaster@leloop.org '''webmaster@leloop.org'''] : | ||
| + | |||
| + | $ git format-patch -1 | ||
| + | |||
| + | Quelqu'un·e devrait s'occuper de l'intégrer dans la branche principale. Pour simplifier le tri sur '''webmaster@''', on privilégie la syntaxe suivante : | ||
| + | |||
| + | '''De :''' Troy la Rache <code><trash ! eats ! me> | ||
| + | '''À :''' webmaster ! leloop ! org</code> | ||
| + | '''Sujet :''' [PATCH] %description de ce qui a été fait dans le commit% | ||
== Ajouter un post == | == Ajouter un post == | ||
| Line 63: | Line 89: | ||
Imaginons que Le Loop vient d'envoyer son premier geek dans l'espace, et pour l'occasion on veut écrire un post de blog sur ce sujet. | Imaginons que Le Loop vient d'envoyer son premier geek dans l'espace, et pour l'occasion on veut écrire un post de blog sur ce sujet. | ||
| − | Il suffit de créer un nouveau fichier dans le dossier < | + | Il suffit de créer un nouveau fichier dans le dossier <code>_posts</code> ; |
$ vi _posts/042 - Un loopiot dans l'espace.markdown | $ vi _posts/042 - Un loopiot dans l'espace.markdown | ||
| Line 81: | Line 107: | ||
L'entête du post se situe entre les balises '---' et contient des champs au format YAML (tous les champs possible sont dans [http://docs.blogofile.com/en/latest/posts.html#yaml-header la doc]): | L'entête du post se situe entre les balises '---' et contient des champs au format YAML (tous les champs possible sont dans [http://docs.blogofile.com/en/latest/posts.html#yaml-header la doc]): | ||
| − | * < | + | * <code>categories</code> : liste de catégories dans lequel le post se situe (si une catégorie n'existe pas, elle est créée) |
| − | * < | + | * <code>date</code> : date du post (pour antidater, c'est toujours pratique) |
| − | * < | + | * <code>title</code> : titre du post (/!\ ne pas mettre d'accents ici /!\) |
| − | * < | + | * <code>author</code> : nom de l'auteur du post (donc toi !) |
| − | * < | + | * <code>summary</code> : résumé du post (ce champ est utilisé pour les résumés apparaissant en index) (/!\ ne pas mettre d'accents ici /!\) |
=== Formatage === | === Formatage === | ||
Le format du corps de l'article est déterminé par l'extension du fichier : | Le format du corps de l'article est déterminé par l'extension du fichier : | ||
| − | * < | + | * <code>.markdown</code> : le formatage de l'article est en [http://en.wikipedia.org/wiki/Markdown markdown] |
| − | * < | + | * <code>.textile</code> : format [http://en.wikipedia.org/wiki/Textile_(markup_language) textile] |
| − | * < | + | * <code>.rst</code> : format [http://docutils.sourceforge.net/rst.html reStructuredText] |
| − | * < | + | * <code>.html</code> : format HTML |
== Modifier le code == | == Modifier le code == | ||
| − | Les fichiers en < | + | Les fichiers en <code>.mako</code> sont des fichiers de [http://www.makotemplates.org/docs/syntax.html syntaxe mako]. |
$ ls *.mako | $ ls *.mako | ||
how.html.mako what.html.mako when.html.mako where.html.mako | how.html.mako what.html.mako when.html.mako where.html.mako | ||
| Line 108: | Line 134: | ||
=== Pages statiques === | === Pages statiques === | ||
| − | * < | + | * <code>how.html.mako</code> : contient le texte de la page "how" |
| − | * < | + | * <code>what.html.mako</code> : contient le texte de la page "what" |
| − | * < | + | * <code>when.html.mako</code> : contient le texte de la page "when" |
| − | * < | + | * <code>where.html.mako</code> : contient le texte de la page "where" |
=== Pages dynamiques === | === Pages dynamiques === | ||
==== Feeds ==== | ==== Feeds ==== | ||
| − | * < | + | * <code>_templates/atom.mako</code> : contient le feed type atom |
| − | * < | + | * <code>_templates/rss.mako</code> : contient le feed type rss |
==== Structure des pages ==== | ==== Structure des pages ==== | ||
| − | * < | + | * <code>_templates/head.mako</code> : contient les liens vers les feuilles de styles, les scripts JS etc.. tout ce qui va au milieu de <code><nowiki><head></head></nowiki></code> |
| − | * < | + | * <code>_templates/header.mako</code> : en-tête de chaque page (contient le titre, l'heisenberg et les bandeaux-menus) |
| − | * < | + | * <code>_templates/footer.mako</code> : contient le pied de page (collé au coin en bas à droite de la page) avec les icônes des supports |
| − | * < | + | * <code>_templates/site.mako</code> : structure de toute page du site (avec l'inclusion des blocks head/header/footer) |
| − | * < | + | * <code>_templates/post.mako</code> : structure et affichage d'un post |
| − | * < | + | * <code>_templates/post_excerpt.mako</code> : structure et affichage d'un résumé de post |
==== Structure du site ==== | ==== Structure du site ==== | ||
| − | * < | + | * <code>_templates/base.mako</code> : permet l'affichage d'une page (à ne pas modifier) |
| − | * < | + | * <code>_templates/permapage.mako</code> : structure de la page de consultation d'un post |
| − | * < | + | * <code>_templates/chronological.mako</code> : affiche tous les posts de blog en format paginé (correspond aussi à l'index du site) |
=== Style, scripts et images === | === Style, scripts et images === | ||
| Line 163: | Line 189: | ||
== Version courte == | == Version courte == | ||
| + | |||
| + | === Première fois === | ||
| + | |||
# apt-get install python-setuptools git | # apt-get install python-setuptools git | ||
# pip install Blogofile | # pip install Blogofile | ||
| − | sur https://github.com/LeLoop/le-loop-blog ↔ < | + | sur https://github.com/LeLoop/le-loop-blog ↔ <code>Fork</code> |
| − | $ git clone <nowiki>ssh://git@github.com/LeLoop/le-loop-blog.git</nowiki> | + | $ git clone <nowiki>ssh://git@github.com/LeLoop/le-loop-blog.git</nowiki> |
| + | $ cd le-loop-blog.git | ||
| + | $ git remote add leloop <nowiki>https://github.com/LeLoop/le-loop-blog.git</nowiki> | ||
| + | |||
| + | === A chaque modification === | ||
| + | |||
| + | $ git pull leloop | ||
$ $EDITOR *.mako css/* js/* img/* # POUR MODIFIER LE BLOG | $ $EDITOR *.mako css/* js/* img/* # POUR MODIFIER LE BLOG | ||
$ $EDITOR _posts/042\ -\ mon\ post\ blog.markdown # POUR AJOUTER UN POST | $ $EDITOR _posts/042\ -\ mon\ post\ blog.markdown # POUR AJOUTER UN POST | ||
| Line 174: | Line 209: | ||
$ git commit -m "[FIX] changé l'eau en vin" | $ git commit -m "[FIX] changé l'eau en vin" | ||
$ git push origin master | $ git push origin master | ||
| − | https://github.com/LeLoop/le-loop-blog ↔ < | + | https://github.com/LeLoop/le-loop-blog ↔ <code>Pull request</code> |
$ echo 'debout molasse' | mail webmaster@leloop.org | $ echo 'debout molasse' | mail webmaster@leloop.org | ||
[[Category:www.leloop.org]] | [[Category:www.leloop.org]] | ||
Latest revision as of 12:38, 23 July 2013
La mise à jour du site ouaibe pour les nuls.
Il est important de faire des commit atomiques, et donc de faire un changement, suivi d'une description de ce qui a été fait, chaque changement étant le plus petit possible (voir le log des commits pour un exemple).
Contents
Prérequis
Installer blogofile et git :
# apt-get install python-setuptools git # easy_install install Blogofile
On peut préférer pip (paquet python-pip) à easy_install :
# pip install Blogofile
Obtenir le code source
Clôner le dépôt git depuis Github :
- Sur https://github.com/LeLoop/le-loop-blog
- Cliquer sur le bouton
Forkpour créer votre propre espace de travail sur Github.
Puis dans un shell :
$ MOI='Mon blaze sur Github'
$ git clone ssh://git@github.com/${MOI}/le-loop-blog.git
$ cd le-loop-blog.git
$ git remote add leloop https://github.com/LeLoop/le-loop-blog.git
Routine
Ajoutez un post ou modifiez le code (cf sections suivantes)
Tester en local
Générer le site depuis les sources :
$ blogofile build $ blogofile serve
Vérifier le résultat dans le navigateur sur http://127.0.0.1:8080/
Valider la modification
Une fois qu'un changement a été vérifié et ne casse pas tout, on ajoute les fichiers modifiés :
$ git add %liste_noms_fichiers%
où %liste_noms_fichiers% est la liste des noms de fichiers modifiés pour ce changement. Voir aussi git status.
Puis on enregistre la modification :
$ git commit -m "%description de ce qui a été fait dans le commit%"
Par convention :
- "[ENH] added bla and bla" pour un ajout (enhancement)
- "[FIX] fixed typo in bla and bla" pour une correction
- "[DEL] removed ..." pour un retrait
Publier la modification
On envoie le tout sur Github :
$ git push origin master
Faire valider la mise à jour
Retourner sur github et cliquer sur Pull request.
Puis soumettre un message pour proposer les changements en expliquant le tout. Un des membres du groupe Le Loop intégrera les changements sur le serveur.
N.B. : un dépôt sur gitorious est aussi tenu à jour.
Et sans Github, ça donne quoi ?
C'est pas beaucoup plus compliqué, seul quelques étapes diffèrent. Personne n'y échappera pour récupérer les sources (non, malheureusement, c'est pas une blague), mais ça évite quand même de s'y créer un compte et c'est déjà ça.
Obtenir le code source
Cloner le dépôt depuis Github :
$ git clone git://github.com/LeLoop/le-loop-blog.git $ cd le-loop-blog/
Publier la modification
Simple ! Une fois vos ajouts, modifications ou retraits enregistrés dans votre dépôt local grâce à git commit, la commande suivante vous sortira un patch contenant votre dernier commit et prêt à être envoyé en pièce-jointe par mail à webmaster@leloop.org :
$ git format-patch -1
Quelqu'un·e devrait s'occuper de l'intégrer dans la branche principale. Pour simplifier le tri sur webmaster@, on privilégie la syntaxe suivante :
De : Troy la Rache <trash ! eats ! me>
À : webmaster ! leloop ! org
Sujet : [PATCH] %description de ce qui a été fait dans le commit%
Ajouter un post
Imaginons que Le Loop vient d'envoyer son premier geek dans l'espace, et pour l'occasion on veut écrire un post de blog sur ce sujet.
Il suffit de créer un nouveau fichier dans le dossier _posts ;
$ vi _posts/042 - Un loopiot dans l'espace.markdown
La structure d'un post est la suivante :
--- categories: comm date: 2042/10/10 10:10:10 title: Le Loop envoi son premier hacker dans l'espace author: guyzmo summary: "Hackers in space!" --- Après 20 ans de recherches dans le cadre du programme "hackers in space", Le Loop est fier d'avoir mis en orbite son premier geek !
En-tête
L'entête du post se situe entre les balises '---' et contient des champs au format YAML (tous les champs possible sont dans la doc):
-
categories: liste de catégories dans lequel le post se situe (si une catégorie n'existe pas, elle est créée) -
date: date du post (pour antidater, c'est toujours pratique) -
title: titre du post (/!\ ne pas mettre d'accents ici /!\) -
author: nom de l'auteur du post (donc toi !) -
summary: résumé du post (ce champ est utilisé pour les résumés apparaissant en index) (/!\ ne pas mettre d'accents ici /!\)
Formatage
Le format du corps de l'article est déterminé par l'extension du fichier :
-
.markdown: le formatage de l'article est en markdown -
.textile: format textile -
.rst: format reStructuredText -
.html: format HTML
Modifier le code
Les fichiers en .mako sont des fichiers de syntaxe mako.
$ ls *.mako how.html.mako what.html.mako when.html.mako where.html.mako $ ls _templates/*.mako _templates/atom.mako _templates/footer.mako _templates/permapage.mako _templates/rss.mako _templates/base.mako _templates/head.mako _templates/post.mako _templates/site.mako _templates/chronological.mako _templates/header.mako _templates/post_excerpt.mako
Pages statiques
-
how.html.mako: contient le texte de la page "how" -
what.html.mako: contient le texte de la page "what" -
when.html.mako: contient le texte de la page "when" -
where.html.mako: contient le texte de la page "where"
Pages dynamiques
Feeds
-
_templates/atom.mako: contient le feed type atom -
_templates/rss.mako: contient le feed type rss
Structure des pages
-
_templates/head.mako: contient les liens vers les feuilles de styles, les scripts JS etc.. tout ce qui va au milieu de<head></head> -
_templates/header.mako: en-tête de chaque page (contient le titre, l'heisenberg et les bandeaux-menus) -
_templates/footer.mako: contient le pied de page (collé au coin en bas à droite de la page) avec les icônes des supports -
_templates/site.mako: structure de toute page du site (avec l'inclusion des blocks head/header/footer) -
_templates/post.mako: structure et affichage d'un post -
_templates/post_excerpt.mako: structure et affichage d'un résumé de post
Structure du site
-
_templates/base.mako: permet l'affichage d'une page (à ne pas modifier) -
_templates/permapage.mako: structure de la page de consultation d'un post -
_templates/chronological.mako: affiche tous les posts de blog en format paginé (correspond aussi à l'index du site)
Style, scripts et images
Il y a aussi du CSS, des images et un chouilla de JS parce qu'Anéfé ;)
$ ls css/ site.css $ ls js/ blink.js $ ls img/ 88x31.png bg.jpeg close.png lqdn.png phack.png tetalab.png toile-libre.png vi_powered.gif adfreebutton.jpg blackboxe.png lqdn-censortefeux-1.gif open.png rss.png tmplab.png usi.png
Contrôleurs
Sinon, le code .py est en ... python, en utilisant la bibliothèque blogofile.
$ ls _controllers/blog/ archives.py categories.py chronological.py feed.py __init__.py permapage.py post.py
- __init__.py : initialise l'environnement du blog
- archives.py : génère les listings de posts par date dans _site/archive/ANNEE/MOIS/JOUR/index.html
- categories.py : génère les listings de posts par catégorie dans _site/category/CATEGORIE/PAGE/index.html
- ainsi que le flux RSS correspondant dans _site/category/CATEGORIE/feed/index.xml
- et ATOM _site/category/CATEGORIE/feed/atom/index.xml)
- chronological.py : génère les listings de posts paginés (5 par page) dans _site/page/PAGE/index.html
- feed.py : génère les flux RSS et ATOM du site
- permapage.py : génère les pages d'articles de blog dans _site/YEAR/MONTH/DAY/SLUG/index.html
- post.py : génère l'objet post contenant un article
Les modules python ne sont à hacker que pour changer le comportement du site web (ajouter un champ aux posts etc..)
Version courte
Première fois
# apt-get install python-setuptools git
# pip install Blogofile
sur https://github.com/LeLoop/le-loop-blog ↔ Fork
$ git clone ssh://git@github.com/LeLoop/le-loop-blog.git
$ cd le-loop-blog.git
$ git remote add leloop https://github.com/LeLoop/le-loop-blog.git
A chaque modification
$ git pull leloop
$ $EDITOR *.mako css/* js/* img/* # POUR MODIFIER LE BLOG
$ $EDITOR _posts/042\ -\ mon\ post\ blog.markdown # POUR AJOUTER UN POST
$ blogofile build && blogofile serve
$ firefox http://127.0.0.1:8080/ &
$ git add %fichiers%
$ git commit -m "[FIX] changé l'eau en vin"
$ git push origin master
https://github.com/LeLoop/le-loop-blog ↔ Pull request
$ echo 'debout molasse' | mail webmaster@leloop.org
