Difference between revisions of "Howto:Mise à jour du site web"

enhancement

 # apt-get install python-setuptools git
 # easy_install install Blogofile

 # pip install Blogofile

 $ 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

 $ blogofile build
 $ blogofile serve

 $ git add %liste_noms_fichiers%

 $ git commit -m "%description de ce qui a été fait dans le commit%"

 $ git push origin master

$ git clone git://github.com/LeLoop/le-loop-blog.git
$ cd le-loop-blog/

$ git format-patch -1

De : Troy la Rache <trash ! eats ! me>
À : webmaster ! leloop ! org
Sujet : [PATCH] %description de ce qui a été fait dans le commit%

 $ vi _posts/042 - Un loopiot dans l'espace.markdown

 ---
 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 !

 $ 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

 $ 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

 $ ls _controllers/blog/
 archives.py  categories.py  chronological.py  feed.py  __init__.py  permapage.py  post.py

 # 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

 $ 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

Difference between revisions of "Howto:Mise à jour du site web"

Latest revision as of 12:38, 23 July 2013

Contents

Prérequis

Obtenir le code source

Routine

Tester en local

Valider la modification

Publier la modification

Faire valider la mise à jour

Et sans Github, ça donne quoi ?

Obtenir le code source

Publier la modification

Ajouter un post

En-tête

Formatage

Modifier le code

Pages statiques

Pages dynamiques

Feeds

Structure des pages

Structure du site

Style, scripts et images

Contrôleurs

Version courte

Première fois

A chaque modification

Navigation menu

Views

Personal tools

Wiki

accès direct

Search

Tools

leloop.org

@@ Line 1: / Line 1: @@
-= HOWTO modifier le site ouaibe du loop =
+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 <small>(voir le [https://gitorious.org/le-loop-blog/le-loop-blog/commits/master log des commits] pour un exemple)</small>.
 == Prérequis ==
-* blogofile : http://blogofile.com
+Installer [http://blogofile.com blogofile] et git :
-** sudo aptitude install python-setuptools
+  # apt-get install python-setuptools git
-** sudo easy_install Blogofile
+  # easy_install install Blogofile
-* git :
+On peut préférer <code>pip</code> <small>(paquet [http://packages.debian.org/python-pip python-pip])</small> à <code>easy_install</code> :
-** aptitude install git
+  # pip install Blogofile
-== Pour commencer ==
+== Obtenir le code source ==
-* sur gitorious cloner le dépôt git du blog du loop :
+Clôner le dépôt git depuis Github :
-** https://gitorious.org/le-loop-blog/le-loop-blog
+* Sur https://github.com/LeLoop/le-loop-blog
-** faire cloner sur gitorious pour avoir votre propre version du site hébergée
+* Cliquer sur le bouton <code>Fork</code> pour créer votre propre espace de travail sur Github.
-* suivi d'un git clone git://git@gitorious.org/....votre...nom..../le-loop-blog
+Puis dans un shell :
+  $ MOI='Mon blaze sur Github'
+  $ 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>
 == Routine ==
-=== pour modifier le code ===
+Ajoutez un post ou modifiez le code (cf sections suivantes)
-* les fichiers en .mako sont des fichiers de syntaxe mako
-** http://www.makotemplates.org/docs/syntax.html
+=== Tester en local ===
-* le code .py est en ... python, en utilisant la bibliothèque blogofile
-** http://blogofile.com/documentation/
+Générer le site depuis les sources :
-* les autres sont du HTML, du CSS et un chouilla de JS parce qu'Anéfé ;)
+  $ 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 <code>git status</code>.
+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 [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.
+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 ==
+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 <code>_posts</code>  ;
+  $ 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 [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 ===
+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 ==
+Les fichiers en <code>.mako</code> sont des fichiers de [http://www.makotemplates.org/docs/syntax.html 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 ===
+* <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 ===
+==== Feeds ====
+* <code>_templates/atom.mako</code> : contient le feed type atom
+* <code>_templates/rss.mako</code> : contient le feed type rss
+==== 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 ====
+* <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 ===
+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/
+x31.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 [http://blogofile.com/documentation/ bibliothèque blogofile].
+  $ ls _controllers/blog/
+  archives.py  categories.py  chronological.py  feed.py  __init__.py  permapage.py  post.py
-=== une fois le code et/ou texte modifié ===
+* '''__init__.py''' : initialise l'environnement du blog
-* git add %liste_noms_fichiers%
+* '''archives.py''' : génère les listings de posts par date dans _site/archive/ANNEE/MOIS/JOUR/index.html
-** où %liste_noms_fichiers% est la liste des noms de fichiers modifiés pour ce changement
+* '''categories.py''' : génère les listings de posts par catégorie dans _site/category/CATEGORIE/PAGE/index.html
-* blogofile build
+** ainsi que le flux RSS correspondant dans _site/category/CATEGORIE/feed/index.xml
-* blogofile serve
+** et ATOM _site/category/CATEGORIE/feed/atom/index.xml)
-* vérifier le résultat dans le navigateur sur http://127.0.0.1:8080
+* '''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
-=== une fois qu'un changement a été vérifié et ne casse pas tout ===
+Les modules python ne sont à hacker que pour changer le comportement du site web (ajouter un champ aux posts etc..)
- 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.
+== Version courte ==
-* git commit -m "%description de ce qui a été fait dans le commit%"
+=== Première fois ===
-** avec dans le message "[ENH] added bla and bla" pour un ajout, "[FIX] fixed typo in bla and bla" pour une correction, "[DEL] removed ..." pour un retrait
-=== une fois le code et/ou texte stable et vérifié et la série de changements terminée ===
+  # apt-get install python-setuptools git
+  # pip install Blogofile
+  sur https://github.com/LeLoop/le-loop-blog ↔ <code>Fork</code>
+  $ 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>
-* git push origin master
+=== A chaque modification ===
-=== une fois les changements effectués et envoyés ===
+  $ 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 ↔ <code>Pull request</code>
+  $ echo 'debout molasse' | mail webmaster@leloop.org
-* retourner sur gitorious et cliquer sur "merge request" puis soumettre un message pour proposer les changements en expliquant le tout.
-[[Category:Projects]]
+[[Category:www.leloop.org]]