Joachim
Un ami, qui avait connu l'époque du HTML et CSS dans Myspace et des blogs pimpés à la main, m'a demandé comment il pourrait se faire un site web aujourd’hui en 2024 ou 5. J'ai mis mes idées à plat dans cet article, autant que ça serve au plus grand monde.
C'est pas le panorama le plus exhaustif des manières de faire du web, mais c’est plusieurs pistes à explorer.
https://blog.professeurjoachim.com/billet/2024-12-15-bon-tu-veux-te-faire-ton-site-web
Joachim
@ouvaton désolé, je parle des expériences personnelles 🥲
Ouvaton Coop
😭
Nous ne sommes pas cités pour l'hébergement du site 😭
Joachim
@LibreFaso j’ai utilisé Hugo mais pas Pélican. J’ai préféré donner plus d’info sur Eleventy (le plus proche en terme de fonctionnalité) parce que c’est celui que je connais le mieux, et le plus pertinent pour quelqu’un qui ne connaît que le JavaScript et un peu de PHP.
LibreFaso
Intéressant, merci.
Mais y'a pas un mot sur Hugo ou Pélican ?
Même pas pour dire dans quelle catégorie de solutions ils se rangent ?
Joachim
@sebastienserre alors j’ai pas pour mission ici de défendre point par point l’honneur d’un CMS par rapport à un autre, mais pour la phrase que tu relèves :
Avec Kirby tu peux définir nativement des champs différents dans chaque type de page (via les blueprints pour l’entrée et le template pour l’affichage). WordPress ne permet l’ajout de champs typés en plus des champs “de base” qu’avec un plugin (et sa version Pro payante), qui ne fonctionne pas toujours bien avec d’autres plugins (multilangue, etc.)
Sébastien Serre :wordpress:
@joachim pas sur de comprendre "tu ne peux pas adapter chaque type de page à son contenu ;" à propos de WordPress
SI tu suis la WP Hierarchy, tu fais ce que tu veux https://wpshout.com/wordpress-template-hierarchy/
Joachim
@gilou merci ! Tu n’es pas le seul à le mentionner, @Tomek en parlait aussi : https://mstdn.nrkn.fr/@Tomek/113658069636840248, il faudra que je regarde !
Comme je ne parle que d’expériences personnelles (pour pas enduire d’erreur l’ami à qui je dédie mon article), je n’ai pas abordé les CMS que je ne connais et maîtrise pas.
Gilou
@joachim salut, a tu regardé pluxml, https://pluxml.org/
J'ai viré mon gros WordPress bien lourdeau, donwgrader mon serveur et viré ma bdd
Avec un base de connaissance html css c'est juste easy
Joachim
@turb ah oui ! En effet c’est pertinent. Je n’ai pas (encore) parlé de la partie HTML+CSS, mais je pense que tu pourrais trouver des pistes du côté de ce que @fvsch propose (et a mis à jour), des gabarits simples : https://fvsch.com/gabarits-html
Je pense que ça sera une des principales ressources que je vais lister quand j’attaquerai mon article sur « comment faire une page web quand on connaît les principes du html et du css mais qu’on n’a pas eu l’occasion d’en faire de manière professionnelle, alors qu’on veut se faire une page simple » (je retravaillerai le titre, mais c’est grosso modo le point de vue que j’adopterai pour la suite de cet article)
Turb
@joachim
Il y quelque temps j'ai voulu faire une petite landing page en HTML minimaliste, avec titre, sous-titres, paragraphe, listes. Tout ce qu'il me fallait c'était une CSS pour rendre ça joli.
Ben j'ai galéré pour trouver ça. Par contre des frameworks pour faire des trucs dynamiques avec du PHP et/ou du JavaScript ou du docker j'en ai trouvés...
Naïvement je pensais qu'il existerait un site répertoriant différents designs de page HTML tout bêtes.
Joachim
@LibreFaso oui, le chapitre sur Eleventy pourrait concerner Hugo (ou Pélican bien que j’aie pas d’expérience). En revanche, Hugo comme Eleventy ont des spécificités qui les rendent uniques—les contenus peuvent être identiques (une hiérarchie de répertoires et fichiers Markdown), mais 11ty permet beaucoup plus dans ses templates (plus de langages pour les templates, possibilité de langage de template dans les fichiers de contenus, frontmatter plus riche (via JS), etc.)
Et personnellement j’ai trouvé le langage de templates de Hugo plutôt abscons et peu adapté à une personne qui ne fait que peu de code.
LibreFaso
Donc Eleventy serait l'équivalent fonctionnel de Hugo ou Pélican ?
C'est cette partie de ton texte que je dois adapter si je pars sur du Hugo (ou du Pélican) ?
Marie et Julien
@joachim je ne retrouve évidemment plus le lien, mais tu as vu passer récemment le site en anglais style "web for the people" qui reprend les bases ? Ça me fait penser à cette saine démarche.
nicolas ⁂
@mariejulien @joachim C’est celui là je pense ? https://htmlforpeople.com (j’avais ça en marque-pages aussi : https://thebasics.dev )
Joachim
@nclm @mariejulien ah je connaissais pas The Basics ! Merci :)
L’idée de cet article c’était pas « comment coder du HTML » mais plutôt « quel est le meilleur moyen d’avoir un contenu (markdown, mettons) converti en HTML que je sais* coder »… en revanche ça sera hyper pertinent pour mon article sur comment faire un template
* le « que je sais coder » sera plutôt « dont je connais les bases mais saurai trouver la doc par moi-même »
Joachim
Turb
Joachim
@julienbidoret @nclm @mariejulien (ah oui j’étais sur mon mobile et je rentrais de soirée, j’avais pas vu ça)
Julien Bidoret
@joachim
The Basics, only 149$.
(Ça peut être légitime, entendons-nous bien, mais bon 🙄).
Joachim
@nicolashognon alors je te dirais d’instinct, ne laisse pas la technique entraver le contenu.
Dans le sens où : ce qui est important c’est la contribution. Si la personne qui fait la contribution est à l’aise avec le workflow que tu installes, c’est génial. Selon qui va utiliser/mettre à jour le site, et la fréquence, tu n’as pas forcément envie de devoir faire le support pour chaque mise à jour (dans le sens : rappeler le workflow à la personne, et/ou réapprendre toi-même, potentiellement lutter contre l’enfer des dépendances, etc).
nikohog 🚴👨💻🎮👨🍳🍺🍞📷
@joachim il faut que je me motive à rafraichir le site de la compagnie de Maud et en profiter pour peut être quitter Wordpress. Faut juste que j'en trouve un qu'elle peut gérer (mais du markdown ça pourrait le faire). Je serais assez pour un système de génération de site statique et un petit script pour l'upload ftp (et le tout stocker/backuper sur un drive)
Joachim
Le pire quand tu écris un article qui est déjà long, c’est quand les discussions amènent des angles hyper pertinents et tu ne te vois pas détricoter en partie ton article pour y ajouter toutes les idées.
Mais en même temps c’est pas forcément des idées qui seraient intéressantes à développer toutes seules dans un nouvel article. Ou peut-être en fait si ?
Joachim
@temptoetiam oui ! Mais là je suis en train de réfléchir sur la manière d’inclure un article dans un autre article (aller au delà du simple lien)
Abie
@joachim ben c'est bien à ça que sert l'aspect modulaire des blog, non ?
Joachim
@temptoetiam là je suis totalement dans la démarche que je mentionne dans mon article
> (à part si tu es comme moi et que tu modifies l’interface plus souvent que tu ne postes sur ton blog).
Abie
@joachim Joachim inspectant son interface
http://blog.apahau.org/seminaire-ecritures-de-lhistoire-de-lart-lhistoire-de-lestampe-1700-1945-18-decembre-2024-remi-mathis-seance-en-hybride/
Abie
@joachim Vraiment, loin de moi l'idée de te Abiesplainer le web, ce serait ridicule, mais pour avoir des bidules déroulables j'avais mis des <summary>
Joachim
@sebastienserre merci !
Sébastien Serre :wordpress:
@joachim Si t'as un soucis de multilingue un jour avec WP, je dcois pouvoir t'aider....
Joachim
@Julianoe merci ! de toute façon il y aura toujours plus de solutions pertinentes que de temps pour tout tester et recommander, donc au final ça sera toujours : fais comme tu trouves le plus pratique et rendez-vous en ligne :)
Julianoë
@joachim j'aime beaucoup l'angle de cet article ! Pratico pratique et qui part d'une intention simple : je veux mettre mes trucs sur internet et avoir mon propre site, comment je fais ?
Good job ! Comme discuté dans les réponses, quelle que soit la façon il ne faut pas hésitez à y adjoindre / annoter d'autres infos qui te viennent 👍
Joachim
Jme dis que je vais apporter des précisions/modifications/ajouts à un article. Qu’est-ce que je commence par faire ? 30 lignes de CSS pour faire apparaître (ou disparaître) une mise en avant des paragraphes affectés dans mon texte.
Et pendant ce temps je rédige rien.
Jme fatigue parfois un peu.
(mais ça devrait avoir une tête pas mal)
Joachim
@julienw hum, les pages perso free ? Il faut que je me renseigne !
Sinon, glitch.com ou yay.boo ou omg.lol je crois, mais j’ai jamais testé les deux derniers
Julien W.
@joachim Merci pour le partage !
Une idée pour de l'hébergement gratuit aujourd'hui? (Sans git)
Joachim
@julienw mais c’est une bonne idée d’info à ajouter !
Joachim
@nhoizey Ah yes merci, je vais les inclure dans mon update !
Nicolas Hoizey
@julienw @alwaysdata a un plan gratuit avec 100 Mo de stockage (mais il me semble qu'il y a une contrainte de connexion mensuelle ou un truc du genre, je trouve pas la doc)
SInon Netlify Drop : https://app.netlify.com/drop
Joachim
En cherchant quels FAI proposent encore des pages perso, je découvre que les pages perso Numéricable vont être supprimées en mars 2025, après la suppression de celles d’Orange en septembre 2023.
Il existe des noms pour les gens qui prennent ce genre de décision de supprimer une partie du patrimoine du web, mais je déshonorerais l’éducation que mes parents m’ont donnée si je formulais ces noms ici. Sans compter les infarctus ou risques de procès par les personnes visées.
https://assistance.sfr.fr/gestion-client/pack-option/pages-perso.html
Joachim
@emmanuelc à mon avis pas énorme en ressource serveur, en revanche en salaire je pense pas que c’est géré par un novice sorti d’école… je te laisse calculer 😬
Emmanuel 🌱
@joachim Je me demande quelles économies ils feront avec ça.
Ça sera une grande perte documentaire, tristement.
Joachim
Allez, quelques petits ajouts à mon article.
J’avais pas pensé à inclure #Scribouilli, les hébergeurs sympa comme @ouvaton ou les @ChatonsOrg, et le gratuit de @alwaysdata , et j’ai rajouté quelques paragraphes de transition entre entre contenu et technique, et comment le contenu va pousser à certains choix.
Joachim
@Khrys l’auto-hébergement style Yunohost c’est un autre chapitre…
Khrys
@joachim Tu ne parles pas de Yunohost ? 🤔 (avec la brique internet ou sans)
Sinon, il faut savoir que certains FAI de la @federationfdn opposent aussi des services d'hébergement : https://www.ffdn.org/fr/services
Joachim
@nclm ah je connaissais pas chez.com ! En revanche si c’est réellement du PHP 5, je veux pas condamner mes lecteurs et lectrices à l’incompatibilité avec les outils que je recommande !
nicolas ⁂
@joachim Et pour utiliser l’hébergement Free sans être chez Free il y a http://chez.com
(J’espère vraiment que Free ne va pas fermer leurs pages perso comme Orange et SFR, j’ai plein plein plein de vieux sites en free.fr. Et comme Free avait racheté Alice qui avait racheté Tiscali qui avait racheté Libertysurf, mes vieilles pages Libertysurf sont encore en ligne, hébergées chez Free aussi ! C’est la meilleure continuité de service gratuit que j’ai vu.)
Joachim
@julienbidoret peut-être, si j’arrive à aller jusqu’au bout :)
Ça serait l’occasion idéale d’experiepenter le web to print !
Julien Bidoret
@joachim
Eh eh.. Ça y est, t'es parti pour faire le manuel du web :)
Ouvaton Coop
Merci 🙏🏻
Joachim
@nhoizey je me doutais bien que quelqu’un avait fait un setup Eleventy pour Obsidian, merci pour la suggestion ! L’idée dans la progression de l’article c’était d’abord de glisser le concept de générateur de site statique avec Eleventy (le mode le plus permissif), puis une application extrêmement ciblée du concept avec Quartz (un mode plus contraint). Quartz se veut très simple et “opinioneux”, tandis que (à première vue) le setup 11ty ne protège pas l’utilisateur de la complexité possible de 11ty même s’il prend beaucoup de décisions
L’ami à qui j’ai destiné cet article connaît déjà Obsidian donc je ne me suis pas étalé sur la présentation de l’outil, en plus de ça je l’utilise pas donc j’avais pas envie d’en parler plus que ça au risque de dire des conneries. Quartz peut fonctionner avec ou sans donc il y a le choix :)
Nicolas Hoizey
@joachim et sinon, pour un même style de rendu façon Wiki ET utilisation de Eleventy, et même à priori possibilité de publier via Obsidian, il y a https://eleventy-notes.sandroroth.com/
Nicolas Hoizey
@joachim je viens enfin de commencer la lecture de ton article, c'est génial. 👍
En lisant la section « Jardin web : Quartz », je clique sur le premier lien, et en voyant à quoi ça ressemble, je me dis « ah mais Obsidian Publish est aussi une solution pour ça… », et en lisant un peu plus loin, un lien vers la doc Obsidian entre parenthèses… 🤔
Et ensuite Obsidian comme premier argument dans « Le bon ».
Ça vaudrait sans doute le coup d’évoquer Obsidian un peu plus tôt dans cette section, non ?
GNU social JP is a social network, courtesy of GNU social JP管理人. It runs on GNU social, version 2.0.2-dev, available under the GNU Affero General Public License.
All GNU social JP content and data are available under the Creative Commons Attribution 3.0 license.