Outils pour utilisateurs

Outils du site


cherche_cms_pour_micro_site-realiser_un_site_web_statique

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

  • Hugo : Framework léger demandant des connaissances en : terminal unix, ssh, git + github/gitlab, markdown, CSS : ça fait bcp pour une seule page non ?
  • 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.
  • 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 Jekyll.
  • Void : Très simple d'utilisation, demandant des connaissances en : markdown, FTP (+ CSS pour designer un peu si besoin).
  • pmWiki : C'est un wiki (ya rien d'autre à dire, ça suffit :p ).
  • Logz : Easter Egg de la liste.
  • Pelican qui sert pour le site suivant https://solar.lowtechmagazine.com/fr/
  • 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, suis la voie du sage
  • Grow Grow est un générateur de site statique optimisé pour la construction de microsites localisés hautement interactifs.
  • Sutty Site web statique, projet orienté vers les activistes, code source ici

Solution Hugo par Max. B

Tout est déjà fait ici 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

  1. Tu commence par installer git si tu ne l'a pas déjà : sudo apt-get install git
  2. Ensuite tu clone le dépôt avec : git clone https://gitlab.com/pages/hugo.git
  3. 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/
  4. Tu entre dans ce répertoire du projet git avec la commande : cd hugo
  5. Tu configure la première ligne du fichier config.toml comme suit : baseurl = “/”
  6. Tu édite le fichier .gitlab-ci.yml en modifiant la ligne '- hugo' par '- hugo –baseURL https://MON_COMPTE.frama.io/MON_DEPOT/'
  7. Tu démarre le serveur de test en local avec la commande : hugo server
  8. Tu visualise le rendu à l'adresse : http://localhost:1313/
  9. Le site ce paramètre dans le fichier config.toml
  10. Ensuite, on peut modifier les fichiers qui correspondent chacun à une page dans le repertoire content/

Pour déployer

  1. 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.
  2. Tu versionne tout avec git : git add -A ; git commit -m “Initialisation de mon site avec hugo et gitlab-pages.”
  3. 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”)
  4. 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)
  5. 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
  6. Quand tout est vert ton site est déployé ici : https://MON_COMPTE.frama.io/MON_DEPOT/

Pour pousser des modifications

  1. 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/
  2. Lorsque tu juge que c'est publiable, tu commit avec : git add -A ; git commit -m “MON_MESSAGE”
  3. Tu publie avec la commande : git push

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

Pour aller plus loin :

Solution en python

Solution O. Baudu - site 100% FTP HTML

Pour commencer, je vous invite à télécharger un logiciel qui s'appelle 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
cherche_cms_pour_micro_site-realiser_un_site_web_statique.txt · Dernière modification: 2020/09/15 13:36 par Benjamin Labomedia