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
Jump to: navigation, search
(→‎= style, scripts et images)
(→‎controlleurs)
Line 67: Line 67:
 
   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
  
−
==== controlleurs ====
+
==== 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].
 +
 +
    $ 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..)
  
 
=== Tester en local ===
 
=== Tester en local ===

Revision as of 12:03, 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)

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 :

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

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..)

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.

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
Retrieved from "http://wiki.leloop.org/index.php?title=Howto:Mise_à_jour_du_site_web&oldid=2006"