Loomio

Migration a GitHub / Jekyll

RJ
Raphael Jolivet Public Seen by 32

Bonjour,

J'ai expérimenté récemment la possibilité d'héberger le site entièrement sur GitHub, et en utilisant le générateur de site statique Jekyll (supporté nativement par Github).

En pratique, GitHub héberge automatiquement certains repository sur le domaine github.io.
Il est possible de configurer un nom de domaine pour qu'il pointe de manière transparente sur GitHub.

Jekyll est un petit moteur de site qui transforme des templates en HTML.
Les avantages sont nombreux :

  • Réutilisation des en-tetes pieds de page ou tout autre bout de HTML
  • Possibilité pour les contributeurs de faire un clone du site et de nous montrer le résultat de leurs changements avant approbation
  • Possibilité décrire le contenu au format Markdown (plus de HTML pour le texte)
  • Hébergement gratuit

Je vous invite à aller jeter un oeil au code : en particulier, les dossiers _layout et _includes contiennents respectivement les template et les bouts de code réutilisables.

Voici le rendu du site sur github.io

J'en ai aussi profité pour intégrer les changements relatifs a l'agenda, et ajouté un Player de vidéo directement au chargement de la page a droite : C'est plus attirant pour l’œil.

Il y a encore des soucis de mise en page (CSS), et le site n'est pas a jour avec la dernière version, mais c'est plus un "proof-of-concept', et on pourra intégrer les changements plus tard.

Merci de me dire ce que vous en pensez.

QG

Quentin Grimaud Sat 21 Mar 2015

Ah super ! J'avais repéré cette manière de faire (Jekyll + github) et l'avais trouvée très pertinente pour notre besoin. J'avais commencé à passer du temps à me renseigner dessus, mais j'avais pas encore eu le temps de coder quoi que ce soit. Je suis totalement pour !

Par contre dans la version du site que tu montres, je vois plusieurs problèmes :
- l'élément du menu du haut sélectionné (par exemple Accueil initialement) a un problème d'affichage, il y a une barre horizontale grise.
- l'item de menu Agenda a une icone alors que les autres non, donc c'est pas très cohérent
- je préfère la version actuelle de la boite "Explications en vidéo"
- la boite "Abonnez-vous à la newsletter" apparaît en bas à gauche ce qui fait pas terrible (elle devrait rester dans le menu de droite selon moi)
- il y a trop de choses dans le menu de droite à mon gout
- la page "Les solutions", "Participez", et "Agenda" ont leur zone de contenu qui ne prend pas toute la largeur alors qu'il n'y a pas de menu de droite, ce qui n'est pas terrible

H

Hydronium Sun 22 Mar 2015

Cette solution semble prometteuse et je suis totalement d'accord avec les remarques de Quentin.

DU

[deactivated account] Sun 22 Mar 2015

A priori je n'aurais pas été très favorable à héberger le site ailleurs que sur une machine qui nous appartient, mais je n'ai que des échos positifs de personnes qui utilisent GitHub pour héberger de petits sites et puis vu les problèmes avec ChicagoVPS autant ne pas tout héberger sur la même machine.

Cette solution permet de simplifier la gestion, d'améliorer le travail collaboratif et de remettre en place un système de suivi des modifications (ce qui en plus d'être pratique est important pour les mises à jour que les admins peuvent faire sans vote). :)

J'ai aussi quelques questions/remarques à ajouter à celles déjà formulées par @quentingrimaud :
- Si il faut faire des corrections au niveau du layout du site, est-ce que ce ne serait pas une bonne idée de migrer vers la dernière version de bootstrap (pour corriger les petits défauts de la version que nous utilisons actuellement)?
- Tant qu'à corriger la boite "Explications en vidéo", pourquoi ne pas en faire une version sans bouton comme ici par exemple ?
- Il faudra faire attention aux adresses mail de la page de contact sur un site 100% hébergé sur GitHub
- Je suis un peu perplexe par rapport au fait de mettre l'agenda et 'include de la page fb le-message dans la colonne de droite. Certes ça donne plus de visibilité à l'agenda mais ça "alourdi" aussi le site et rend la navigation moins aisée sur un smartphone. Dans un premier temps, j'utiliserais plutôt la page actualités pour cela.

RJ

Raphael Jolivet Sun 22 Mar 2015

Salut, merci pour vos retours.

Je viens d'ajouter un petit tutoriel au README pour expliquer comment contribuer avec Git/Jekyll.

Je suis d'accord que la colonne de droite est trop lourde maintenant. Je ne laisserais que les vidéos + l'agenda (qui montre que le groupe est actif), mais pas le-message.org.

J'enleverais presque la carte pour la mettre dans un nouvel onglet aussi / Je trouve ca lourd.

Pour la vidéo, je suis assez content de moi :) : Les éléments graphiques sont beaucoup plus visibles / attirants à l'oieil que les long textes, et les vidéos sont assez ludiques.

Pour les "bugs" du menu c'est du à l'icone de l'agenda, trop grosse.
Je trouve le menu un peu austère pour l'instant, et je serais pour qu'on trouve une petite icone claire pur chacune.

Pour les formulaires de contact Jekyll conseille d'utiliser getsimpleform, qui offre un service gratuit de forulaire de contact.

Je trouve aussi dommage qu'il n'y ai pas d'ognlet pour envoyer directement au Wiki des GVs (avec une eptites icone de Wikipedia) : C'est une mine d'informations.

Mais ca commence à faire beaucoup de rubriques : Pas sur que ca tienne encore en horizontal ...

De manière générale, je pense que la migration à Git pourrait nous permettre de lancer un "concours de design" pour améliorer le thème du site et le rendre ergonomique : Je ne suis pas un expert en web design et en usability : Je suis sur que d'autres GVs auraient des idées sur la manière d'intégrer au mieux toutes ces informations (vidéos, agenda, groupes facebook, Wiki, argumentaires, liens, ...)

Je vais faire une version qui corrige les bugs d'affichage et enlever les publis de la page le-message.org. si vous y intégrez les différences avec le site actuel, ça pourra faire une bonne base de travail.

Je vais ajouter des propositions pour voter.

RJ

Raphael Jolivet started a proposal Sun 22 Mar 2015

Migration à Git/Jekyll Closed Sun 29 Mar 2015

Outcome
by Hydronium Tue 16 May 2017

Proposition acceptée.

Agree - 5
Abstain - 1
Disagree - 0
Block - 0
6 people have voted (9%)
QG

Quentin Grimaud
Agree
Sun 22 Mar 2015

Je suis d'accord sur le principe de passer à Jekyll (même si on perdra des contributeurs potentiels car la barrière technique pour proposer un changement augmente sur certains aspects). Mais pas d'accord que le nouveau site intègre plein de modifs

DU

[deactivated account]
Agree
Mon 23 Mar 2015

Ok pour Jekyll

BD

Benoît Daroussin
Agree
Mon 23 Mar 2015

J'ai du mal à visualiser tout ce que ça implique mais ça me parait intéressant. Notamment : "Possibilité pour les contributeurs de faire un clone du site et de nous montrer le résultat de leurs changements avant approbation"

CV

Catherine Vergnaud
Abstain
Fri 27 Mar 2015

Juste une question : que deviennent les sites déjà réalisés ? Faudra-t-il tout refaire ?

RJ

Raphael Jolivet Sun 22 Mar 2015

A mince, on peut pas faire plusieurs prpositions ?
Je voulais créeer d'autres pour :
- La prévisualisation de la vidéo à droite
- L'agenda à droite
- Les publi de la page le-message
- Les icônes sur le menu
- Un nouveau menu "Wiki"

DU

[deactivated account] Sun 22 Mar 2015

Non, en fait loomio est prévu pour fonctionner de la manière suivante : quelqu'un soumet une idée, on en discute et lorsqu'un consensus semble se dessiner, on formule une proposition qui est soumise au vote.
Il y a moyen de proposer des amendements sur une proposition une fois que le vote est terminé.

Tu peux ouvrir plusieurs discussions en parallèle, c'est mieux car cela permet à chacun de se prononcer individuellement sur chacun des points sans risque de voir l'ensemble des propositions rejetées à cause d'un point qui serait litigieux.
Ceci dit ça amène une certaine lourdeur surtout lorsqu'on veut proposer plusieurs changements mineurs (dans ce cas, je prend la température lors de la phase discussion et si je ne vois pas d'opposition, j'ouvre le vote).

PS: Selon nos règles, la durée du vote est fixée à 7 jours et non 3 jours comme Loomio le propose par défaut.

DU

[deactivated account] Sun 22 Mar 2015

Pour la migration, il faudra faire bien attention de partir de la version de production; les sources de Github que tu as utilisé comme point de départ ne sont plus à jour.

La vidéo ne fonctionne pas chez moi dans ta version mais je suppose que tu veux l'afficher dans la colonne de droite comme on faisait avant cette proposition ?

En ce qui concerne la carte sur la page d’accueil, moi aussi je trouve cela plutôt lourd mais c'est une décision qui à été validée par la communauté. Ceci dit rien n'est gravé dans le marbre et tu es libre de faire une nouvelle proposition. Un onglet me semble toutefois excessif, je préfère un site simple et léger.

Les icônes dans le menu, bof bof... j'accroche pas et dans le version actuelle du site, ça va rendre la navigation horrible sur smartphone en mode portrait (la page actualité est déjà de trop... On devrait remplacer ce menu par une liste déroulante quand l'écran est trop étroit).
Pour rendre le site un peu moins austère, on pourrait peut-être ajouter une couleur où mettre une des couleurs peu utilisées un peu plus en avant ou mettre des contrastes un peu plus prononcés... C'est du boulot pour un graphiste.

QG

Quentin Grimaud Sun 22 Mar 2015

je viens de passer la durée de cette proposition de 3 à 7 jours

RJ

Raphael Jolivet Mon 23 Mar 2015

Ok on peut le faire en deux temps effectivement :
Migrer d'abord, puis voter chaque modif.

Pourriez vous mettre le depot principal a jour avec la derniere version SVP ?
https://github.com/swergas/GentilsVirusSite ( https://github.com/swergas/GentilsVirusSite )

Je me chargerais du merge.

Le 22 mars 2015 19:07, Quentin Grimaud (Loomio) a écrit :

Quentin Grimaud
est d'accord sur la proposition: Migration à Git/Jekyll

Je suis d'accord sur le principe de passer à Jekyll (même si on perdra des contributeurs potentiels car la barrière technique pour proposer un changement augmente sur certains aspects). Mais pas d'accord que le nouveau site intègre plein de modifs

Répondez à ce courrier directement ou visualisez-le sur www.loomio.org ( https://www.loomio.org/m/OfVoCLZQ/migration-a-git-jekyll?utm_campaign=thread_mailer&utm_medium=email&utm_source=new_vote ).

Désactiver les courriers électroniques ( https://www.loomio.org/email_actions/unfollow_discussion/81369/3Yrxz3n9yzyqA9DtnB4A ) pour cette discussion.

Changez vos paramètres de notification ( https://www.loomio.org/email_preferences?unsubscribe_token=3Yrxz3n9yzyqA9DtnB4A&utm_campaign=thread_mailer&utm_medium=email&utm_source=new_vote ) pour vous désabonner de ces courriers électroniques.

DU

[deactivated account] Mon 23 Mar 2015

Si tu veux je te donnerai les sources à la clôture du vote (il y a un autre vote en cours) et on risque de s'emmêler les pinceaux si on ne fait pas les choses dans l'ordre, en plus il n'y a que @quentingrimaud qui à accès au dépot principal.

Je te suggères de déjà bosser sur le formulaire de contact puisque ce point est un pré-requis au retour sur GitHub (sinon on pourra utiliser jekyll mais on devra rester sur notre machine)

RJ

Raphael Jolivet Mon 23 Mar 2015

@Pierre Yves :
Ok.

Quand quelqu'un soumet le formulaire, c'est la personne uniquement qui reçoit un email ?
Il n'y a pas d'email "gentilsVirus" general ?
Ce serait plus simple.

Dans tous les cas, il faut que les gens qui veulent recevoir des email via le formulaire (ou le mail golbal) s'inscrivent ici :

https://getsimpleform.com/ ( https://getsimpleform.com/ )

En mettant votre email et cliquant dans "send me a token" et en ,'envoyant le "FORM API token" recu par email :
C'est votre clef publique.

Merci d'avance.

Le 23 mars 2015 11:27, Pierre-Yves (Loomio) a écrit :

Si tu veux je te donnerai les sources à la clôture du vote (il y a un autre vote en cours ( https://www.loomio.org/d/FIBlhuqK/changement-de-titre-logo-et-changements-techniques )) et on risque de s'emmêler les pinceaux si on ne fait pas les choses dans l'ordre, en plus il n'y a que @quentingrimaud qui à accès au dépot principal.

Je te suggères de déjà bosser sur le formulaire de contact puisque ce point est un pré-requis à la mise en place de la solution que tu proposes.

Répondez à ce courrier directement ou visualisez-le sur www.loomio.org ( https://www.loomio.org/d/QYADCy59/migration-a-github-jekyll?utm_campaign=thread_mailer&utm_medium=email&utm_source=new_comment#comment-579492 ).

Désactiver les courriers électroniques ( https://www.loomio.org/email_actions/unfollow_discussion/81369/3Yrxz3n9yzyqA9DtnB4A ) pour cette discussion.

Changez vos paramètres de notification ( https://www.loomio.org/email_preferences?unsubscribe_token=3Yrxz3n9yzyqA9DtnB4A&utm_campaign=thread_mailer&utm_medium=email&utm_source=new_comment ) pour vous désabonner de ces courriers électroniques.

DU

[deactivated account] Mon 23 Mar 2015

@benoitdaroussin @hydronium @quentingrimaud voir commentaire ci-dessus.

PS: @raphaeljolivet @quentingrimaud : vous pouvez virer le footer de loomio dans les mails quand vous fais un reply svp? dans le GUI ça ne passe pas super bien

DU

[deactivated account] Mon 23 Mar 2015

Pour l'installation sous Ubuntu 14.x ou Linux Mint 17.x, voici les commandes à lancer :

  1. Installer Ruby
  2. Installer NodeJs (à partir de Jekyll 3 ce ne sera plus un prérequis, mais pour le moment c'est obligatoire)
  3. Installer Jekyll (ne mettez pas les paramètres --no-rdoc --no-ri si vous voulez installer la doc en local; moi je la consulte toujours en ligne).
sudo apt-get install ruby ruby-dev make rake
sudo apt-get install nodejs
sudo gem install jekyll --no-rdoc --no-ri

Sinon juste après avoir terminé l'installation, j'ai trouvé ce tuto qui me semble assez bien fait.

CV

Catherine Vergnaud Fri 27 Mar 2015

Je n'y connais absolument rien en outil informatique.
Ma question sera donc : faudra-t-il tout refaire ?

DU

[deactivated account] Fri 27 Mar 2015

Non, on va repartir de l'existant.
Dans une première étape on va uniquement migrer vers jekyll sans rien changer au contenu et au design.

Raphaël a été un peu trop enthousiaste; il pensait qu'on pouvait proposer plusieurs amendements simultanément dans une seule proposition ;-)

CD

Christine DUFNER Sun 29 Mar 2015

idem pour moi je n'y connais rien en informatique

P

pierro78 Tue 14 Apr 2015

@hydronium remarque ( https://www.facebook.com/groups/GVDEV/permalink/539018569569202/ ) que la page "contact" ( http://gentilsvirus.org/contact.php ) est en php ... @raphaeljolivet est-ce que cela marchera sur github ?

RJ

Raphael Jolivet Tue 14 Apr 2015

Oui, on a déja proposé d'utiliser ce service :
https://getsimpleform.com/ ( https://getsimpleform.com/ )

Qui fournit la getsion de formulaire de contacts pour site "statiques"

P

pierro78 Tue 14 Apr 2015

euh ... je n ai pas l impression que getsimpleform peut faire une rotation aléatoire des contacts comme http://gentilsvirus.org/contact.php ...
@raphaeljolivet

H

Hydronium Tue 14 Apr 2015

Le script PHP que j'avais conçu permettait aussi d'afficher les téléphones sous forme d'images créées à la volée.

RJ

Raphael Jolivet Tue 14 Apr 2015

Rotation aléatoire des contacts ?
C'est a dire ?

L'ordre d'affichage est aléatoire ?
On peut faire ca avec petit bout de Javascript.
Mais quel est l'interet ?

Et pour les numéro de tel, on peut les générer une fois pour toute, ca change pas souvent.
Personnellement, image ou pas, je ne mettrais pas de téléphone sur le net.
Ce n'est pas une pratique "recommendable"

H

Hydronium Thu 23 Apr 2015

Oui l'affichage est aléatoire, en prévision du comportement qui consiste à choisir parmi trois inconnus le premier de la liste, et pour ne pas laisser penser qu'il y a un chef, un sous-chef et un sous-sous-chef.

Mettre un numéro de tel sur le net est une pratique tout à fait conseillée du point de vue de la communication, les journalistes adorent utiliser ce moyen de communication pour rentrer en contact rapidement avec quelqu'un. Ça l'est moins sur le plan de la protection de la vie privée et du spam. À chacun de voir s'il veut le mettre. En tout cas oui, on peut sans doute se passer de PHP... À toi de proposer l'alternative prête à publier ;)

H

Hydronium Sun 26 Apr 2015

Reste à la mettre en œuvre. T'as tout ce qu'il te faut, @raphaeljolivet ?

FA

Fred Armoni Tue 28 Apr 2015

quelles sont les barrières techniques? (nous n'avons déjà pas beaucoup de participants pour s'en inquiéter - moi même qui suis pourtant développeur, certes pas en appli web, j'ai du mal à vous suivre...)

P

pierro78 Tue 28 Apr 2015

à ce que je comprends le pb des images pour les numéros de téléphone étant résolu, il reste le pb de la programmation javascript pour la "rotation aléatoire" des contacts ...

QG

Quentin Grimaud Thu 9 Jul 2015

Je ne sais pas où en est @raphaeljolivet de la migration à Jekyll mais on peut aussi envisager d'utiliser https://github.com/vinyll/anywhere qui m'a l'air pas mal plus léger et facile à mettre en place :) En gros ça permet de garder un site statique en HTML, donc facile à éditer et à déployer sur un serveur, et de dire que le contenu de chaque page est chargé depuis un fichier de notre dépôt github, comme ça les gens proposent des modifs (via des pull-requests) et quand elles sont acceptées, c'est reflété directement sur le site, sans besoin qu'un admin mette à jour le site. Ça ressemble pas mal à l'idée d'avoir comme contenu de chaque page du site uneiframe (ou équivalent) contenant une page du wiki des GV.

QG

Quentin Grimaud Sat 19 Dec 2015

OK il faut vraiment qu'on relance ce chantier... J'ai l'impression que la dernière chose qu'il nous manque pour avancer c'est une solution pour envoyer des emails à des gens sans que les adresses email des destinataires n'apparaissent dans le code source qui est public, et de préférence sans passer par un service externe dont on pourrait douter de la fiabilité. Des idées ? @pierro78 @hydronium

Une idée : on pourrait peut être juste avoir une page relai hébergée sur un autre serveur que github et qui n'est pas open source et qui se charge d'envoyer l'email ? Par exemple le formulaire de contact enverrait vers cette page (), et l'un des paramètres serait le nom du destinataire. La page à partir du nom, déduit l'adresse email et fait l'envoi d'email, et affiche une confirmation.

P

pierro78 Sun 20 Dec 2015

ton idee a l air bonne @quentingrimaud : le html simple en Jekyll sur github, le code "serveur" sur notre serveur (genre serveur:gentilsvirus.org/contact.php) ...