Différences

Ci-dessous, les différences entre deux révisions de la page.

--- cherche_cms_pour_micro_site-realiser_un_site_web_statique [2020/05/28 09:34] – ↷ Nom de la page changé de cherche_cms_pour_micro_site à cherche_cms_pour_micro_site-realiser_un_site_web_statique Benjamin Labomedia
+++ cherche_cms_pour_micro_site-realiser_un_site_web_statique [2023/10/18 09:04] (Version actuelle) – [Solutions évoquées - comparatif] Benjamin Labomedia
@@ Ligne 1: / Ligne 1: @@
-====== Cherche CMS pour micro site ======
+====== 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 de toto=====
 =====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}}