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
(→‎Faire valider la mise à jour)
(compléments, fixes, wikify)
Line 6: Line 6:
  
 
Installer [http://blogofile.com blogofile] et git :
 
Installer [http://blogofile.com blogofile] et git :
−
   # aptitude install python-setuptools git
+
   # apt-get install python-setuptools git
 
   # pip install Blogofile
 
   # pip install Blogofile
  
Line 13: Line 13:
 
Clôner le dépôt git depuis Gitorious :
 
Clôner le dépôt git depuis Gitorious :
 
* Sur https://gitorious.org/le-loop-blog/le-loop-blog
 
* Sur https://gitorious.org/le-loop-blog/le-loop-blog
−
* Faire <tt>Clôner</tt> pour obtenir une copie en local.
+
* Cliquer sur le bouton <tt>Clôner</tt> pour créer votre propre espace de travail sur Gitorious.
 +
 
 
Puis dans un shell :
 
Puis dans un shell :
−
   $ git clone git://git@gitorious.org/MONBLAZE/le-loop-blog
+
  $ MOI='Mon blaze sur Gitorious'
−
Ce qui a pour effet de créer votre propre espace de travail sur Gitorious.
+
   $ git clone <nowiki>git://gitorious.org/~${MOI}/le-loop-blog/${MOI}s-le-loop-blog.git</nowiki>
  
 
== Routine ==
 
== Routine ==
Line 51: Line 52:
 
=== Faire valider la mise à jour ===
 
=== Faire valider la mise à jour ===
  
−
Retourner sur [https://gitorious.org/le-loop-blog/le-loop-blog Gitorious] et cliquer sur <tt>Merge request</tt>
+
Retourner sur [https://gitorious.org/le-loop-blog/le-loop-blog Gitorious] et cliquer sur <tt>Request merge</tt>.
  
−
Puis soumettre un message pour proposer les changements en expliquant le tout. Un des membres du loop responsable du blog intégrera les changements sur le serveur.
+
Puis soumettre un message pour proposer les changements en expliquant le tout. Un des membres du [https://gitorious.org/+leloop groupe Le Loop] intégrera les changements sur le serveur.
  
 
== Ajouter un post ==
 
== 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.
+
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.
  
−
# éditer le fichier "_posts/042 - Un loopiot dans l'espace.markdown"
+
Il suffit de créer un nouveau fichier dans le dossier <tt>_posts</tt>  ;
−
# la structure d'un post est la suivante :
+
  $ 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: "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 (tous les champs possible sont dans [http://docs.blogofile.com/en/latest/posts.html#yaml-header la doc]):
+
  ---
−
** '''categories''' : liste de catégories dans lequel le post se situe (si une catégorie n'existe pas, elle est créée)
+
  categories: comm
−
** '''date''' : date du post (pour antidater, c'est toujours pratique)
+
  date: 2042/10/10 10:10:10
−
** '''title''' : titre du post (/!\ ne pas mettre d'accents ici /!\)
+
  title: Le Loop envoi son premier hacker dans l'espace
−
** '''author''' : nom de l'auteur du post (donc toi !)
+
  author: guyzmo
−
** '''summary''' : résumé du post (ce champ est utilisé pour les résumés apparaîssant en index) (/!\ ne pas mettre d'accents ici /!\)
+
  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 !
  
−
* 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 [http://en.wikipedia.org/wiki/Markdown markdown]. (on peut utiliser aussi .textile pour le format [http://en.wikipedia.org/wiki/Textile_(markup_language) textile], .rst pour le format [http://docutils.sourceforge.net/rst.html restructured text] ou .html pour le format HTML).
+
=== 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]):
 +
* <tt>categories</tt> : liste de catégories dans lequel le post se situe (si une catégorie n'existe pas, elle est créée)
 +
* <tt>date</tt> : date du post (pour antidater, c'est toujours pratique)
 +
* <tt>title</tt> : titre du post (/!\ ne pas mettre d'accents ici /!\)
 +
* <tt>author</tt> : nom de l'auteur du post (donc toi !)
 +
* <tt>summary</tt> : 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 :
 +
* <tt>.markdown</tt> : le formatage de l'article est en [http://en.wikipedia.org/wiki/Markdown markdown]
 +
* <tt>.textile</tt> : format [http://en.wikipedia.org/wiki/Textile_(markup_language) textile]
 +
* <tt>.rst</tt> : format [http://docutils.sourceforge.net/rst.html reStructuredText]
 +
* <tt>.html</tt> : format HTML
  
 
== Modifier le code ==
 
== Modifier le code ==
  
−
Les fichiers en .mako sont des fichiers de [http://www.makotemplates.org/docs/syntax.html syntaxe mako].
+
Les fichiers en <tt>.mako</tt> 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 94: Line 105:
 
=== Pages statiques ===
 
=== Pages statiques ===
  
−
* how.html.mako : contient le texte de la page "how"
+
* <tt>how.html.mako</tt> : contient le texte de la page "how"
−
* what.html.mako : contient le texte de la page "what"
+
* <tt>what.html.mako</tt> : contient le texte de la page "what"
−
* when.html.mako : contient le texte de la page "when"
+
* <tt>when.html.mako</tt> : contient le texte de la page "when"
−
* where.html.mako : contient le texte de la page "where"
+
* <tt>where.html.mako</tt> : contient le texte de la page "where"
  
 
=== Pages dynamiques ===
 
=== Pages dynamiques ===
  
−
* feeds
+
==== Feeds ====
−
** '''_templates/atom.mako''' : contient le feed type atom
+
* <tt>_templates/atom.mako</tt> : contient le feed type atom
−
** '''_templates/rss.mako''' : contient le feed type rss
+
* <tt>_templates/rss.mako</tt> : contient le feed type rss
  
−
* structure des pages
+
==== 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>
+
* <tt>_templates/head.mako</tt> : contient les liens vers les feuilles de styles, les scripts JS etc.. tout ce qui va au milieu de <tt><nowiki><head></head></nowiki></tt>
−
** '''_templates/header.mako''' : en-tête de chaque page (contient le titre, l'heisenberg et les bandeaux-menus)
+
* <tt>_templates/header.mako</tt> : 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
+
* <tt>_templates/footer.mako</tt> : 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)
+
* <tt>_templates/site.mako</tt> : structure de toute page du site (avec l'inclusion des blocks head/header/footer)
−
** '''_templates/post.mako''' : structure et affichage d'un post
+
* <tt>_templates/post.mako</tt> : structure et affichage d'un post
−
** '''_templates/post_excerpt.mako''' : structure et affichage d'un résumé de post
+
* <tt>_templates/post_excerpt.mako</tt> : structure et affichage d'un résumé de post
  
−
* structure du site
+
==== Structure du site ====
−
** '''_templates/base.mako''' : permet l'affichage d'une page (à ne pas modifier)
+
* <tt>_templates/base.mako</tt> : permet l'affichage d'une page (à ne pas modifier)
−
** '''_templates/permapage.mako''' : structure de la page de consultation d'un post
+
* <tt>_templates/permapage.mako</tt> : 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)  
+
* <tt>_templates/chronological.mako</tt> : affiche tous les posts de blog en format paginé (correspond aussi à l'index du site)  
  
−
=== style, scripts et images ===
+
=== 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 126: Line 137:
 
   blink.js
 
   blink.js
 
   $ ls img/
 
   $ 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
+
   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 ===
+
=== 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
+
  $ ls _controllers/blog/
−
    __init__.py   chronological.py  post.py
+
  archives.py categories.py  chronological.py feed.py __init__.py  permapage.py  post.py
−
    archives.py    feed.py
+
−
    categories.py  permapage.py
+
  
 
* '''__init__.py''' : initialise l'environnement du blog
 
* '''__init__.py''' : initialise l'environnement du blog
Line 147: Line 157:
 
* '''post.py''' : génère l'objet post contenant un article
 
* '''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..)
+
Les modules python ne sont à hacker que pour changer le comportement du site web (ajouter un champ aux posts etc..)
  
 
== Version courte ==
 
== Version courte ==
−
   # aptitude install python-setuptools git
+
   # apt-get install python-setuptools git
−
   # easy_install Blogofile
+
   # pip install Blogofile
 
   https://gitorious.org/le-loop-blog/le-loop-blog ↔ <tt>Clone</tt>
 
   https://gitorious.org/le-loop-blog/le-loop-blog ↔ <tt>Clone</tt>
−
   $ <éditeur> *.mako css/* js/* img/*
+
   $ git clone <nowiki>git://gitorious.org/~${MOI}/le-loop-blog/${MOI}s-le-loop-blog.git</nowiki>
−
   $ blogofile build
+
  $ $EDITOR *.mako css/* js/* img/*
−
  $ blogofile serve
+
   $ blogofile build && blogofile serve
−
  <zieute>
+
 
   $ firefox http://127.0.0.1:8080/ &
 
   $ firefox http://127.0.0.1:8080/ &
 
   $ git add %fichiers%
 
   $ git add %fichiers%
 
   $ 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://gitorious.org/le-loop-blog/le-loop-blog ↔ <tt>Merge request</tt>
+
   https://gitorious.org/le-loop-blog/le-loop-blog ↔ <tt>Request merge</tt>
 
   $ echo 'debout molasse' | mail webmaster@leloop.org
 
   $ echo 'debout molasse' | mail webmaster@leloop.org
  
  
 
[[Category:www.leloop.org]]
 
[[Category:www.leloop.org]]

Revision as of 20:35, 25 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 : 

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

Obtenir le code source

Clôner le dépôt git depuis Gitorious :

Puis dans un shell : 

 $ MOI='Mon blaze sur Gitorious'
 $ git clone git://gitorious.org/~${MOI}/le-loop-blog/${MOI}s-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 Gitorious : 

 $ git push origin master

Faire valider la mise à jour

Retourner sur Gitorious et cliquer sur Request merge.

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.

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 :

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

 # apt-get install python-setuptools git
 # pip install Blogofile
 https://gitorious.org/le-loop-blog/le-loop-blog ↔ Clone
 $ git clone git://gitorious.org/~${MOI}/le-loop-blog/${MOI}s-le-loop-blog.git 
 $ $EDITOR *.mako css/* js/* img/*
 $ 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://gitorious.org/le-loop-blog/le-loop-blog ↔ Request merge
 $ echo 'debout molasse' | mail webmaster@leloop.org
Retrieved from "http://wiki.leloop.org/index.php?title=Howto:Mise_à_jour_du_site_web&oldid=2012"