Ressources pour fabriquer son site web

Publié le : · Édité le : · Tags : Ressources, Tech, Web

Différentes astuces pour publier un site web ou un blog sur les internettes.

Je fais des sites perso depuis plus de 5 ans, j'ai validé 3 ans de formation en web-design, et pourtant, je me sens encore novice dans ce domaine. Peut-être parce que je n'y ai jamais vraiment travaillé, et que je me spécialise en sites statiques. Les sites de e-commerce ou les CMS comme Wordpress sont des boîtes noires opaques pour moi.

Cela dit, j'ai développé une certaine expertise des sites statiques avec le temps, et j'aimerais donc réunir et partager les ressources et connaissances qui m'aident ou qui m'ont aidée :)

#Pourquoi faire un site ou un blog perso ?

Bon, évidemment, y'a autant de bonnes raisons que de personnes qui font des sites. Mes raisons ? Expérimenter de nouvelles choses, m'exprimer sur une plateforme qui m'appartient, réduire ma dépendance aux réseaux sociaux, me permettre d'archiver mes pensées et mes expériences à un endroit, partager des trucs cool avec des inconnu·es, participer à repeupler un web plus convivial et non marchand…

Certaines raisons sont personnelles tandis que d'autres sont plutôt universelles. D'un point de vue politique et stratégique, dépendre d'une plateforme comme facebook ou instagram pour publier sa vie, ses événements, ses tracts et son organisation politique, c'est mettre beaucoup de pouvoir dans une entreprise qui ne cherche qu'à monétiser votre temps de cerveau et qui n'hésite pas à censurer tout ce qui n'est pas assez bankable.

D'autre raisons :

#Site statique ou site dynamique

Demandons à Wikipedia la différence entre un site statique ou dynamique :

Une page web statique est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande, c'est-à-dire qu'à un moment donné tous les internautes qui demandent la page reçoivent le même contenu.

À l'inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l'ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu'au moment de sa consultation.

Basiquement, là où un site dynamique vous demandera toute une machinerie pour générer les pages à la volée, un site statique est une bête page HTML plus ou moins fancy qui ne demande qu'un serveur web pour tourner. C'est économe en ressources, et c'est aussi bien plus sécurisé puisque l'on n'a pas de base de donnée potentiellement exposée ni de script côté serveur.
Ça a aussi l'avantage d'être plus facilement maintenable sur le long terme, puisque vous ne dépendez pas d'un plugin qui a arrêté ses mises à jour de sécurité ou autre. Aussi, qui dit économe en ressources, dit économe en prix !
Il existe beaucoup de solutions gratuites ou très peu chères pour héberger son site statique, et même l'auto-hébergement est relativement accessible avec des solutions comme Yunohost.

Au niveau des désavantages, il y en a quand même quelques uns : À part en "trichant" (en utilisant un service tiers ou en hébergeant la partie commentaire ailleurs), ce n'est pas possible d'avoir de système de commentaire sur votre blog statique. De la même manière, même si il existe des solutions statiques clé en main comme Publii, la plupart des générateurs de sites statiques n'ont pas d'interface graphique et demandent de maîtriser le Markdown, au minimum, au contraire de CMS dynamiques comme Wordpress.

Aussi, de la même manière, si on veut personnaliser son site ou son blog fait avec un générateur statique, il faudra mettre les mains dans le cambouis et apprendre un minimum de bases de HTML et de CSS. Ces langages ont beau être simples à prendre en main, ça reste une barrière non négligeable pour des personnes non-techniques qui ne veulent pas se contenter d'un thème trouvé sur internet.

Cela étant dit, les compétences que vous acquerrez en faisant votre site seront toujours utiles dans 10 ans, et probablement dans 20 ans aussi ! Dans tous les cas, votre site web sera toujours en ligne quand les géants du net d'aujourd'hui auront mis la clé sous la porte ;)

Dans ce billet, je parlerais surtout de générateurs de sites statiques, vu que c'est ce que je connais. Je vais aussi partager des ressources plus généralistes sur les hébergeurs, les noms de domaines, etc.

#Des ressources pour bien commencer

#Générateurs de sites statiques (SSG)

Un générateur de sites statiques (ou SSG, Static Site Generator), c'est un outil qui permet de générer un site en HTML / CSS en utilisant des templates pour ne pas avoir à dupliquer le code répétitif sur chaque pages (HEAD, header, footer, etc.). Ils permettent aussi d'écrire ses pages en Markdown, un langage très simple, pour générer ensuite l'équivalent en HTML.

Chaque SSG se démarque par le langage dans lequel il a été écris, la structure des sites qu'il permet de générer, le langage de templating qu'il utilise, etc.

SSGDateLangageLangage de templatingType de site conseilléSpécificités
Jekyll2008RubyLiquidBlogs, pages, GitHub PagesIntégré à GitHub Pages, très grande communauté, plugins
Pelican2008PythonJinja2 (similaire à Liquid)Blogs, documentationÉcosystème Python, plugins
MkDocs2012PythonJinja2 (similaire à Liquid)DocumentationConçu pour documentation, navigation automatique
Hugo2013GoGo templates (⚠️ pas évident si on ne connait pas le Go)Blogs, docs, sites rapides et volumineuxAccent sur la rapidité de génération, nombreux thèmes
Cobalt2014RustLiquidBlogs personnelsLéger, simplicité, inspiré de Jekyll
Publii2016Electron (JavaScript)Handlebars, MustacheBlogs, sites, utilisateurs non-techniquesApplication desktop, orienté utilisateurs non développeurs
Eleventy (11ty)2018JavaScript (Node.js)Nunjucks, Liquid, Handlebars, Mustache, EJSBlogs, sites marketing, projets multi-formatTrès flexible, multi-template, léger
Zola2018RustTera (similaire à Jinja et Liquid)Blogs, docs, sitesTrès rapide, binaire unique, pas de dépendances externes