Pour éditer le wiki, il faut demander un compte à un Lapin !
Difference between revisions of "Howto:Mise à jour du site web"
(→controlleurs) |
(→Routine) |
||
Line 20: | Line 20: | ||
== Routine == | == Routine == | ||
− | === Modifier le code | + | 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 <tt>git status</tt>. | ||
+ | |||
+ | 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 Gitorious : | ||
+ | $ git push origin master | ||
+ | |||
+ | === Faire valider la mise à jour === | ||
+ | |||
+ | Retourner sur [https://gitorious.org/le-loop-blog/le-loop-blog Gitorious] et cliquer sur <tt>Merge request</tt> | ||
+ | |||
+ | Puis soumettre un message pour proposer les changements en expliquant le tout. | ||
+ | |||
+ | == 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. Voici comme ce faire. | ||
+ | |||
+ | # éditer le fichier "_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: "Apres plusieurs mois de balade dans les squats les plus chaleureux de Paris, Le Loop est accueilli par la Gare XP !" | ||
+ | --- | ||
+ | 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! | ||
+ | |||
+ | * l'entête du post se situe entre les balises '---' et contient des champs au format YAML: | ||
+ | ** '''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 | ||
+ | ** '''author''' : nom de l'auteur du post (donc toi !) | ||
+ | ** '''summary''' : résumé du post (ce champ est utilisé pour les résumés apparaîssant en index) | ||
+ | |||
+ | * après l'entête, le texte répond au formatage choisi (via l'extension de fichier). Notamment, en ayant choisi une extension ".markdown", le formattage de l'article est en markdown. (on peut utiliser aussi .textile, et peut-être aussi .html... se référrer à la doc de blogofile pour ça). | ||
+ | |||
+ | == Modifier le code == | ||
Les fichiers en .mako sont des fichiers de [http://www.makotemplates.org/docs/syntax.html syntaxe mako]. | Les fichiers en .mako sont des fichiers de [http://www.makotemplates.org/docs/syntax.html syntaxe mako]. | ||
Line 31: | Line 92: | ||
_templates/header.mako _templates/post_excerpt.mako | _templates/header.mako _templates/post_excerpt.mako | ||
− | + | === Pages statiques === | |
* how.html.mako : contient le texte de la page "how" | * how.html.mako : contient le texte de la page "how" | ||
Line 38: | Line 99: | ||
* where.html.mako : contient le texte de la page "where" | * where.html.mako : contient le texte de la page "where" | ||
− | + | === Pages dynamiques === | |
* feeds | * feeds | ||
Line 57: | Line 118: | ||
** '''_templates/chronological.mako''' : affiche tous les posts de blog en format paginé (correspond aussi à l'index du site) | ** '''_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é ;) | Il y a aussi du CSS, des images et un chouilla de JS parce qu'Anéfé ;) | ||
Line 67: | Line 128: | ||
88x31.png adfreebutton.jpg bg.jpeg blackboxe.png lqdn-censortefeux-1.gif lqdn.png phack.png rss.png tetalab.png tmplab.png toile-libre.png usi.png vi_powered.gif | 88x31.png adfreebutton.jpg bg.jpeg blackboxe.png lqdn-censortefeux-1.gif lqdn.png phack.png rss.png tetalab.png tmplab.png toile-libre.png usi.png vi_powered.gif | ||
− | + | === contrôleurs === | |
Sinon, le code .py est en ... python, en utilisant la [http://blogofile.com/documentation/ bibliothèque blogofile]. | Sinon, le code .py est en ... python, en utilisant la [http://blogofile.com/documentation/ bibliothèque blogofile]. | ||
Line 87: | Line 148: | ||
les modules python ne sont à hacker que pour changer le comportement du site web (ajouter un champ aux posts etc..) | les modules python ne sont à hacker que pour changer le comportement du site web (ajouter un champ aux posts etc..) | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Version courte == | == Version courte == |
Revision as of 12:17, 24 August 2012
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. (ici faudrait un exemple)
Contents
Prérequis
Installer blogofile et git :
# aptitude install python-setuptools git # pip install Blogofile
Obtenir le code source
Clôner le dépôt git depuis Gitorious :
- Sur https://gitorious.org/le-loop-blog/le-loop-blog
- Faire Clôner pour obtenir une copie en local.
Puis dans un shell :
$ git clone git://git@gitorious.org/MONBLAZE/le-loop-blog
Ce qui a pour effet de créer votre propre espace de travail sur Gitorious.
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 Gitorious :
$ git push origin master
Faire valider la mise à jour
Retourner sur Gitorious et cliquer sur Merge request
Puis soumettre un message pour proposer les changements en expliquant le tout.
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. Voici comme ce faire.
- éditer le fichier "_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: "Apres plusieurs mois de balade dans les squats les plus chaleureux de Paris, Le Loop est accueilli par la Gare XP !" --- 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!
- l'entête du post se situe entre les balises '---' et contient des champs au format YAML:
- 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
- author : nom de l'auteur du post (donc toi !)
- summary : résumé du post (ce champ est utilisé pour les résumés apparaîssant en index)
- après l'entête, le texte répond au formatage choisi (via l'extension de fichier). Notamment, en ayant choisi une extension ".markdown", le formattage de l'article est en markdown. (on peut utiliser aussi .textile, et peut-être aussi .html... se référrer à la doc de blogofile pour ça).
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 icones 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 adfreebutton.jpg bg.jpeg blackboxe.png lqdn-censortefeux-1.gif lqdn.png phack.png rss.png tetalab.png tmplab.png toile-libre.png usi.png vi_powered.gif
contrôleurs
Sinon, le code .py est en ... python, en utilisant la bibliothèque blogofile.
$ ls _controllers/blog __init__.py chronological.py post.py archives.py feed.py categories.py permapage.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
# aptitude install python-setuptools git # easy_install Blogofile https://gitorious.org/le-loop-blog/le-loop-blog ↔ Clone $ <éditeur> *.mako css/* js/* img/* $ blogofile build $ blogofile serve <zieute> $ firefox http://127.0.0.1:8080/ & $ git add %fichiers% $ git commit -m "[FIX] changé l'eau en vin" $ git push origin master https://gitorious.org/le-loop-blog/le-loop-blog ↔ Merge request $ echo 'debout molasse' | mail webmaster@leloop.org