Labomedia Ressources

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Cherche CMS pour micro site ou comment réaliser un site web statique simple et efficace ?======

=====Donnée du problème=====
Où comment réaliser une page web qui affiche successivement à chaque rechargement un article différent dans un ordre donné. Avec un système très léger mais ergonomique quand à la modification des articles.


=====Solutions évoquées - comparatif =====
  * [[https://gohugo.io/|Hugo]] : Framework léger demandant des connaissances en : terminal unix, ssh, git + github/gitlab, markdown, CSS : ça fait bcp pour une seule page non ?
  * [[https://getgrav.org/|GRAV]] : Framework lourd permettant de générer des sites statiques demandant des connaissances en : terminal unix, ssh, git, markdown, PHP, YAML, HTML, CSS, Javascript : hors sujet donc, au même titre que [[https://jekyllrb.com/|Jekyll]].
  * [[https://www.gatsbyjs.com/|Gatsby]] Pour faire des sites rapides et solides avec 2000+ plugins
  * [[http://picocms.org/|PicoCMS]] Un CMS flat file "simple et stupide" mais aussi rapide avec une application Nextcloud pour l'associer à son nuage
  * [[https://docs.getpelican.com/en/stable/|Pelican]] qui sert pour le site suivant [[https://solar.lowtechmagazine.com/fr/|https://solar.lowtechmagazine.com/fr/]]
  * [[https://getpublii.com/|GetPublii]] CMS statique avec GUI pour créer des sites web sûrs, rapides et élégants.
  * [[https://www.typesettercms.com/|Typesetter CMS]] The Faster and Easier CMS
  * [[https://framagit.org/framasoft/PrettyNoemieCMS|PrettyNoemieCMS]] Utilisé par Framasite, léger et élégant
  * [[https://github.com/josephernest/void|Void]] : Très simple d'utilisation, demandant des connaissances en : markdown, FTP (+ CSS pour designer un peu si besoin).
  * [[https://github.com/josephernest/bloggggg|Bloggggg]] is a simple blogging tool. Responsive (mobile phone, tablet). Search by #tag available. Flat files (no database). Uses Markdown syntax.+ made by Joseph
  * [[https://www.pmwiki.org/|pmWiki]] : C'est un wiki (ya rien d'autre à dire, ça suffit :p ).
  * [[http://www.logz.org/|Logz]] : Easter Egg de la liste.
  * [[https://www.getlektor.com/|Lektor]] un extra-terrestre qui est un entre deux entre le CMS et le "flat files" statique.
  * HTML / CSS : quitte à apprendre un truc, autant que ça serve dans le futur, [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3|suis la voie du sage]]
  * [[https://grow.io/|Grow]] Grow est un générateur de site statique optimisé pour la construction de microsites localisés hautement interactifs.
  * [[https://sutty.nl/|Sutty]] Site web statique, projet orienté vers les activistes, [[https://0xacab.org/sutty|code source ici]]
  * [[https://www.11ty.dev/|11ty]] S'appuie sur NodeJS, Eleventy a été créé en JavaScript comme alternative à Jekyll.
  * [[https://cecil.app/|Cecil]] Une initiative française : pas de serveur ni base de données, performances et sécurité
  * [[https://wordpress.org/|WordPress]] : ne demande aucune connaissance lourde à apprendre avant de pouvoir créer un contenu, mais effectivement, c'est un moteur complet pour 1 seule page (encore que c'est discutable). Demande d'installer le site par FTP (ou en 1 click chez certains hébergeurs), et de le relier à une base de données.
  * [[https://hotglue.me/|HotGlue]] pas complètement frugal mais un moteur de site qui marche à la colle
  * [[https://tina.io/|Tina]] Tina permet aux développeurs de créer une expérience d'édition visuelle personnalisée avec controle de version via Git, parfaitement adaptée à leur site web ou à leur application, tout en prenant en charge un large éventail de types de contenu tels que Markdown, MDX et JSON.

==== Ressources, références ====
  * [[https://jamstack.org/generators/|Un comparatif de 357 générateurs de sites]]
  * [[https://www.nextinpact.com/article/43397/derriere-retour-au-web-statique-reappropriation-dun-numerique-pour-tous|
Un article de NextImpact à ce sujet]]
  * Des designs open https://beautifulopen.com/
  * Des [[https://opensourcedesign.net/resources/|ressources open source]] pour les sites web
  * D'autres [[http://ressources.editions-ultra.org/|ressources libres
]]
{{::voidhome.png|}}

=====Solution Hugo par Max. B=====

Tout est déjà fait ici [[https://gitlab.com/pages/hugo|https://gitlab.com/pages/hugo]] ^^.
==== Tuto pour créer un site web avec hugo déployé automatiquement sur gitlab-pages ====

Voici un petit tuto en français, à la fraiche du matin, il faut compter moins de 30 min.

Mon dépôt de ce tuto sur framagit : https://framagit.org/mxbossard/test-hugo/
Site démo réalisé avec ce tuto ce matin : https://mxbossard.frama.io/test-hugo/

=== Pour tester sur son pc, avec un terminal ===

  - Tu commence par installer git si tu ne l'a pas déjà : sudo apt-get install git
  - Ensuite tu clone le dépôt avec : git clone https://gitlab.com/pages/hugo.git
  - Là, il faut s'accrocher, c'est probablement le plus compliqué, installer hugo (pleins de possibilités), je propose la méthode officiel : https://gohugo.io/getting-started/installing/
  - Tu entre dans ce répertoire du projet git avec la commande : cd hugo
  - Tu configure la première ligne du fichier config.toml comme suit : baseurl = "/"
  - Tu édite le fichier .gitlab-ci.yml en modifiant la ligne '- hugo' par '- hugo --baseURL https://MON_COMPTE.frama.io/MON_DEPOT/'
  - Tu démarre le serveur de test en local avec la commande : hugo server
  - Tu visualise le rendu à l'adresse : http://localhost:1313/
  - Le site ce paramètre dans le fichier config.toml
  - Ensuite, on peut modifier les fichiers qui correspondent chacun à une page dans le repertoire content/

=== Pour déployer ===

  - Je suppose que tu as un compte framagit (ou gitlab). Ton compte s'appele MON_COMPTE. Nous allons y créer en ligne de commande le dépot MON_DEPOT.
  - Tu versionne tout avec git : git add -A ; git commit -m "Initialisation de mon site avec hugo et gitlab-pages."
  - Tu ajoute ton dépot sur ton espace framagit (ou gitlab) : git remote add monDepot https://framagit.org/MON_COMPTE/MON_DEPOT.git (attention, si ton dépot s'appelle "monSite", l'URL se termine par "/monSite.git")
  - Tu créé ce nouveau dépôt MON_DEPOT sur ton espace : git push --set-upstream monDepot master (attention, le dépôt sera privé par défaut, tu peux le rendre public dans les options de framagit)
  - Ton site web est déjà en cours de déploiement. Tu peux suivre le pieline ici : https://framagit.org/MON_COMPTE/MON_DEPOT/pipelines
  - Quand tout est vert ton site est déployé ici : https://MON_COMPTE.frama.io/MON_DEPOT/

=== Pour pousser des modifications ===

  - Tu modifie le fichier config.toml, les contenus dans le repertoire content/ dans lequel tu peux ajouter de nouvelles pages, et eventuellement le thème dans le repertoire themes/beautifulhugo/
  - Lorsque tu juge que c'est publiable, tu commit avec : git add -A ; git commit -m "MON_MESSAGE"
  - Tu publie avec la commande : git push

Existe t'il quelque chose d'une qualité pro aussi avancé plus simple ?

**Pour aller plus loin :**
  * la doc d'hugo : https://gohugo.io/documentation/
  * git + ssh
  * changer le theme
  * ajouter un nom de domaine par dessus les gitlab-pages
  * ...





=====Solution en python=====
  * [[https://python.doctor/page-python-serveur-web-creer-rapidement|python.doctor  Créer un serveur web rapidement en python]]

=====Solution O. Baudu - site 100% FTP HTML=====
Pour commencer, je vous invite à télécharger un logiciel qui s'appelle [[https://filezilla-project.org/download.php?type=client|FileZilla]] 
  * 
  * Ce logiciel est un logiciel dit de FTP, pour File Transfert Protocol.
  * Pour vous qui maîtrisez la langue de Tupac, j'imagine que ce nom est explicite.
  * Ce logiciel va donc vous permettre de transférer des fichiers de votre ordinateur vers un autre ordinateur ; en l’occurrence le serveur qui héberge le site.
  * Mais il va aussi vous permettre de transférer des fichiers de cet autre ordinateur vers le votre.

Pour cela il vous faut :
  * - l'adresse de cet autre ordinateur : xxxxxx
  * - le protocole utilisé, car il en existe plusieurs : SFTP
  * - le numéro de la porte d'entrée de l'ordinateur par laquelle tu veux passer : 22
  * - le type d'identification que tu souhaites emprunter:  Normal
  * - ton nom/login : xxxxxxx
  * - le mot du passage : xxxxxxxx

Il te faut alors renseigner toutes ces informations dans le "Gestionnaire de site" auquel tu accèdes en faisant "fichier > gestionnaire de site" et, après avoir créer un "Nouveau site".
Pour vous aider, je vous invite à vous référer à la capture d'écran n°1 disponible en pièce jointe.
Si tout se passe bien après avoir cliqué sur "connexion" un petit message concernant le chiffrement devrait apparaître.
Je n'en connais plus la nature, mais il faut dire que l'on est d'accord.

Tu devrais alors voir apparaître sur la moitié droite du logiciel le contenu du site de la radio.
Sur la moitié gauche, tu devrait voir le contenu de ton ordinateur.
Dont je ne connais pas l’arborescence parce qu'il s'agit de Windows.
Ta mission est donc de naviguer par ce biais jusqu'à ton bureau sur lequel tu auras préalablement créé un dossier avec le nom de ton choix ("coco" pour la suite).

La partie gauche de FileZilla est composée de deux fenêtres, la plus hautes rends compte de l'arborescence.
Celle du dessous, du contenu des dossiers parcourus.
Une fois le dossier "coco", cette dernière fenêtre devrait donc être vide (au détail près d'un petit dossier avec ".." (c'est en fait un lien pour remonter l'arborescence))
Ta nouvelle mission est donc désormais de scroller dans le contenu du dossier de l'ordinateur distant pour voir apparaître "xxxxxx.php".
Puis de double cliquer dessus.
Cette opération va copier ce fichier sur ton ordinateur dans le dossier "coco".

Je t'invite donc à l'ouvrir dans un éditeur de texte et à en appréhender la structure simplissime.
  * À le modifier à ta convenance.
  * À en enregistrer les modifications.
  * Puis à le téléverser vers le dossier distant en double cliquant dessus dans le fenêtre de gauche de FileZilla.

On t'informera alors que ce fichier existe déjà.
  * Ce qui est normal.
  * Et si tu veux vraiment le remplacer.
  * Je te laisse ici faire appel à ton libre arbitre pour répondre à cette question.

Si tu as décidé de le remplacer.
  * Alors, je t'invite à ouvrir la page xxxxxxx pour observer la magie opérer : http://xxxxxxxx


{{tag>web cms micro-site}}