1200 views
 owned this note
<i class="fa fa-tag"></i> Lyon <i class="fa fa-clock-o"></i> :::info [Ce tutoriel permet d'apprivoiser la **syntaxe Markdown** (nécessaire pour éditer ce pad)](https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/). ::: ###### Tags: `La MYNE` `admin` `GT-SI` `site internet` # [Site Internet] Foire aux questions et prise en main ## 0- A propos Foire au question et tutoriel pour rédiger des articles et comprendre le principe du site internet de la MYNE. :::success * **++[Tutoriel de Comment contribuer au site internet de la MYNE](https://pad.lamyne.org/GYRgRgTALAHA7HAtMAbABgIaKumiwCcBApvsQSmDBgKxrADMUQA)++** ::: ## 1- Le principe Le site internet a été refait en décembre 2016 puis mis à jour début 2017. Il permet de regrouper tous les contenu du [blog wordpress](https://lapaillassaone.wordpress.com) et du strikingly initié en 2014. Ce site unique doit permettre de : * donner des informations sur les activités de la MYNE * regrouper les info et communiquer sur les projets * informer sur les évènements Il est auto- hébergé sur Indiehoster et facile à transformer sur Git Hub. ## 2- Principe de base Le site est construit en markdown sous GitHub, de manière à ce que chaque page soient directement "préformatés". (Ces formats sont codés dans les fichiers "layout" créés par Tim avec le groupe SI-IT en décembre 2016.) La page d’accueil appelle les autres pages. Chaque page correspond ensuite à un fichier sous gitHub. Les dossiers dans lesquels apparaissent les fichiers permettent à la page d'accueil de connaitre le format à adapter. ## 3- Modifier un contenu **Modifier le contenu en local avec hugo** (permet de modifier les contenus à partir d'un clone des pages du site situés en local sur l'ordinateur et d'une visualisation des modifications en local) **1 - Avant toute chose, vous devez avoir accès aux dossier du site sur GitHub** Connectez vous avec votre compte github au projet : [](https://github.com/LPS-MYNE/website.git)[https://github.com/LPS-MYNE/website.git](https://github.com/LPS-MYNE/website.git) **2 - Téléchargez Hugo sur votre ordinateur** * Choisissez la bonne configuration sur [](https://github.com/LPS-MYNE/website/tree/master/bin)https://github.com/LPS-MYNE/website/tree/master/bin ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_9519487c1e8b3927c191a9e25e25f443.png) Pour les mac le plus simple est de suivre ce tutoriel qui installe hugo avec brew : [](http://macappstore.org/hugo/)http://macappstore.org/hugo/[ ](http://macappstore.org/hugo/) **3 - Téléchargez les contenus du site en local :** * Dans le terminal de l'ordinateur taper : (Manipulation à faire seulement la première fois) après * git clone [](https://github.com/LPS-MYNE/website.git)[https://github.com/LPS-MYNE/website.git](https://github.com/LPS-MYNE/website.git) Manipulation à faire seulement la première fois * cd website * se positionner dns le repertoire "website" qui contient le fichier config * grace à ce fichier config, hugo a tous les éléments pour lancer le serveur * git pull Pour mettre à jour le dossier Ensuite faire les modification en local sur votre ordinateur Pour visualiser les modification en local voir ci dessous **4 - Visualisez la version locale du site avec hugo** * hugo server -w * Pour lancer le serveur avec hugo Une version locale du site est maintenant visible sur: [](http://localhost:1313/)[http://localhost:1313/](http://localhost:1313/)[ ](http://localhost:1313/) * a taper dans un navigateur internet C'est à dire qu'il peut être ouvert et visible dans le navigateur et toute modification effectuée dans les contenus en local est directement visible. sauf les modifications dans config.yaml qui nécessitent de redémarrer le serveur. **5 - Faire les modifications en local** Les commandes précédentes ont permis de télécharger un clone des contenus du site sur votre ordinateur. Allez chercher ces dossiers et ouvrez les avec un éditeur de texte (pas word ou office) ex : [](https://atom.io/)https://atom.io/ Modifier les contenus en Markdown Les besoins de modification sont ici : [](https://framacalc.org/=Site_La_Myne)https://framacalc.org/=Site_La_Myne[ ](https://framacalc.org/=Site_La_Myne) **6- Transférer les modifications à l'administrateur sur git hub** une fois les modifications faites en local revenez au terminal (nouvelle fenêtre au besoin) pour les soumettre à l'administrateur du website github (branche maj) ou les transmettre directement sur le site (branche master) : Dans le terminal (nouvelle fenêtre si besoin): * git cd website (pour se repositionner dans le git "website") * git checkout -b maj (permet de se positionner dans la branche "maj", qui est une copie du site qui n'est pas encore publiée) * (optionnel : taper git status pour savoir quels fichiers ont été modifiés en local par rapport aux fichiers de la branche maj) * git add . ajouter tous les fichiers modifiés qu'il faudra commiter (le point permet de spécifier que tous les fichiers modifiés seront proposés comme modifications) * git commit -m "Your message...." par Your message, on entend descriptif/titre de la modif apportée * git push origin master (ou maj selon la branche) envoyer les fichiers modifiés dans la branche maj ou master du website. Si on a pas terminé quelque chose (ex: un article incomplet), on peut le mettre sur la branche maj. * Dans github, vous pouvez voir vos modifications dans la branche maj. Vous pouvez ensuite demander l'ajout/transfert à la branche master en cliquant sur le bouton "pull request" (en haut à droite). Si vous le souhaitez, vous pouvez directement pusher les modifications dans la branche master : git push origin master ATTENTION un push sur la branche master met directement en ligne la modification. => Il faudrait bosser sur 2 branches. ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_3fe1f5510b1d93b676f83a6d7371a232.png) **Ajouter une nouvelle fiche projet à partir du Terminal** * hugo new project/nomduprojet.fr.md Un nouveau document sera directement crée dans content/project avec la trame à remplir. **A partir de Prose.io** (facilite l'edition en markdown) Prose provides a beautifully simple content authoring environment for [CMS-free websites](http://developmentseed.org/blog/2012/07/27/build-cms-free-websites/). It's a web-based interface for managing content on [GitHub](http://github.com). Use it to create, edit, and delete files, and save your changes directly to GitHub. Host your website on [GitHub Pages](http://pages.github.com) for free, or set up your own [GitHub webhook server](http://developmentseed.org/blog/2013/05/01/introducing-jekyll-hook/). * Ouvrez www.prose.io * Autorisez prose à accéder à vos données github * Vous tombez sur la page d'acceuil de votre compte github, mais en plus beau : ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_4e91f470b2c999f3f52825de0d10f10d.png) L'avantage est qu'il est possible de prévisualiser l'article (à droite) : ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_85acfa7c2eab4199d1e146919cfaa060.png) **A partir de Git Hub directement** (Attention, cela ne permet par de voir les modifications directement) * créer un compte GitHub : [](https://github.com/)[https://github.com/](https://github.com/) * Connectez vous à GitHub * rejoignez le groupe LPS-MYNE [](https://github.com/LPS-MYNE)https://github.com/LPS-MYNE[ ](https://github.com/LPS-MYNE) * abonnez vous au projet [LPS-MYNE/website ](https://github.com/LPS-MYNE/website.git) ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_798e41e49871f44ac521e5f6c7a4bbcc.png) * Faut il etre administrateur du groupe pour accéder aux modifications ? vous tombez sur l'architecture suivante : ! ![](https://hot-objects.liiib.re/pad-lamyne-org/uploads/upload_2588cf49a59fb287052a33d8c59ff52a.png) * chercher le fichier que vous souhaitez modifier dans content * ouvrez les fichiers .md * Ecrivez vos modifications * Décrivez votre modification <undefined><li>**Avec l'editeur Vim**</li></undefined> i Pour Editer esc Pour quitter l'édition :wq Pour enregister ## 4- Coder en Markdown :::info [Ce tutoriel permet d'apprivoiser la **syntaxe Markdown** (nécessaire pour éditer ce pad)](https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/). ::: git status : permet de voir le statut des modifications --- # Licence Ce document est mis à disposition selon les termes de la [Licence juridique Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). <img style="display: block; margin: 0 auto;" src="https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png">