Création d'un site, de A à Z

Ce guide te conduit pas à pas, dans l'ordre exact à suivre, de l'instance fraîchement installée jusqu'à un site publié en ligne. Il s'adresse aux profils métier : chef de projet, webmaster, agence, ou client final qui gère son propre site. Aucune compétence technique avancée n'est requise—le but est de te donner un fil rouge clair, applicable sans hésitation, pour ne rien oublier.

Avant de commencer. Tu dois être connecté avec un compte ayant le rôle Administrateur (owner) ou Chef projet (admin). Certaines étapes (sécurité, SMTP, tokens API) sont réservées à l'Administrateur. Si tu démarres une instance neuve, consulte d'abord la page Premiers pas pour l'initialiser et créer le compte propriétaire.

Vue d'ensemble du workflow

La création d'un site se déroule toujours dans le même ordre logique. Chaque étape prépare la suivante : sans layout global tu ne peux pas voir tes pages correctement, sans header/footer remplis tes pages auront des zones vides, sans SMTP les formulaires ne pourront pas envoyer d'email. Respecte la séquence ci-dessous pour éviter de revenir en arrière :

Réglages → Général (identité du site)
Réglages → Branding sidebar (apparence de l'admin)
Configuration → Layout global (squelette HTML)
Configuration → Header / Footer (contenu des zones partagées)
Pages (Accueil, À propos, Contact)
Blog (optionnel)
Cocon SEO (optionnel)
Réglages → SMTP (envoi d'email)
Build & Publication
Réglages → Sécurité : Mode Production

Compte environ 1 à 2 heures pour un site vitrine simple (accueil, à propos, contact). Compte une demi-journée si tu veux activer le blog et un premier cocon SEO.

Étape 1 — Réglages → Général

Cette étape établit l'identité publique du site. Tout ce que tu remplis ici se retrouvera dans les balises <title>, les métadonnées SEO, le sitemap, et même dans la barre supérieure de l'admin.

Dans le menu de gauche, déplie Réglages puis clique sur Général. Renseigne :

Nom du site : le nom commercial, par exemple « Acme SPRL ». Il s'affiche dans le topbar de l'admin et dans le titre des pages publiées.
URL du site : l'adresse finale en production, exemple https://www.acme.be. Sans le / final. Cette URL est utilisée pour le sitemap.xml, robots.txt et les liens canoniques—ne la laisse pas vide.
Langue par défaut : fr dans la majorité des cas. Cette langue alimente l'attribut lang du layout.
Favicon : glisse une image carrée (idéalement 512×512 px). Le cropper se déclenche automatiquement, recadre puis convertit en WebP 512×512. Tu verras immédiatement l'aperçu dans l'onglet du navigateur.
Slug admin : par défaut l'admin est accessible sur /admin. Tu peux le changer en /pilotage, /console, ou un mot opaque. C'est une mesure simple mais efficace contre les scans automatisés.

Clique sur le bouton orange Enregistrer en bas de la section. Un toast de confirmation apparaît en haut à droite.

Attention au slug admin. Si tu changes le slug, note-le bien ! L'ancienne URL deviendra un 404. Garde une copie dans ton gestionnaire de mots de passe à côté du login.

Étape 2 — Branding de la sidebar admin

Cette section n'a aucun impact sur le site public—elle personnalise uniquement l'admin pour rassurer le client quand il s'y connecte. Très utile en agence : ton client voit immédiatement son logo et non le nôtre.

Toujours dans Réglages → Général, descends jusqu'à la section Branding sidebar :

Photo de profil : image ronde affichée en haut de la sidebar. Charge la photo du gérant, le logo carré ou une icône.
Slogan : courte phrase sous le nom, exemple « Pilotage de votre site web ».
Logo footer : petit logo affiché en bas de la sidebar (sous la liste des modules). Souvent identique au favicon, en version plus large.

Enregistre. Recharge la page (F5) pour voir le rendu.

Étape 3 — Configuration → Layout global

Le layout global est le squelette HTML qui enveloppe toutes les pages publiques de ton site. Il contient le <head>, le <header>, le <footer> et un emplacement central où chaque page vient s'insérer. Sans layout actif, les pages ne peuvent pas être construites.

Va dans Configuration → Layout global. Tu as deux options :

Option A — Choisir un layout depuis la bibliothèque

Si une bibliothèque de layouts a été préparée (par ton agence, ou via une extension), la liste s'affiche directement. Clique sur l'aperçu qui te convient, puis sur Activer.

Option B — Uploader ton propre layout

Clique sur le bouton Uploader un layout. Sélectionne un fichier .html contenant impérativement :

Une structure HTML5 complète (<!doctype html>, <html>, <head>, <body>).
Un <header> et un <footer>.
Surtout, le marqueur central : <main data-cms-slot="content"></main>. C'est dans ce slot que chaque page sera injectée au build.

Une fois uploadé, le layout apparaît dans la liste. Clique sur Activer. Un indicateur vert confirme que ce layout est désormais celui appliqué par défaut à toutes les pages.

Annotations data-cms dans le layout. Tout élément du header ou du footer marqué data-cms="logo", data-cms="menu", data-cms="phone", etc. sera automatiquement détecté et exposé dans l'étape 4 comme un champ éditable. Plus ton layout est bien annoté, plus tu auras de souplesse côté admin sans toucher au HTML.

Étape 4 — Header et Footer

Va dans Configuration → Header / Footer. L'admin scanne automatiquement le layout actif et affiche un champ pour chaque attribut data-cms détecté. Tu n'as plus qu'à remplir.

Exemples typiques :

Champ	Type	Exemple
logo	Image	logo-acme.svg
menu	Liste de liens	Accueil, Services, À propos, Contact
phone	Texte	+32 2 123 45 67
email	Texte	contact@acme.be
address	Texte multiligne	Rue de la Loi 16, 1000 Bruxelles
mentions	Lien	/mentions-legales
copyright	Texte	© 2026 Acme SPRL

Enregistre. Tu peux prévisualiser le rendu via le bouton Voir le site du topbar.

Étape 5 — Créer les pages essentielles

Maintenant que le squelette est prêt, tu peux créer les pages de contenu. Pour un site vitrine basique, démarre avec ce trio :

Accueil : la page d'entrée, slug / ou /accueil.
À propos : présentation de l'entreprise, slug /a-propos.
Contact : coordonnées et formulaire, slug /contact.

Va dans Pages dans le menu de gauche. Clique sur le bouton orange Ajouter une page en haut à droite. Tu as deux choix :

Depuis la bibliothèque : choisis un template prêt à l'emploi (hero, services, contact…). C'est le mode le plus rapide.
Upload HTML personnalisé : charge un fichier .html annoté avec des attributs data-cms sur les zones éditables (titres, paragraphes, images, boutons). Chaque data-cms="hero_title" deviendra un champ dans le builder.

Une fois la page créée, l'éditeur visuel s'ouvre. Modifie titres, textes, images en cliquant simplement dessus—l'iframe à droite te montre le rendu en temps réel. Pour les détails du builder, consulte la page dédiée Builder visuel.

Répète l'opération pour chaque page : À propos, puis Contact. N'oublie pas de cliquer sur Enregistrer à chaque fois.

Astuce de gain de temps. Crée d'abord l'Accueil, puis duplique-la pour gagner du temps si tes autres pages utilisent une structure proche. Tu peux ensuite ajuster titres et contenus sans repartir d'une page vide.

Étape 6 — Activer le blog (optionnel)

Si ton client souhaite publier régulièrement (actualités, articles SEO, newsletter), le blog natif est rapidement opérationnel. Sinon, saute cette étape.

Va dans Réglages → Blog. Configure le template d'article (HTML annoté data-cms) qui servira de base à tous les nouveaux articles. Tu peux uploader le tien ou utiliser un template fourni.
Définis l'URL de base du blog (par exemple /blog) et la pagination (8 ou 12 articles par page).
Va dans Blog → Catégories et crée 2 à 5 catégories. Garde-les larges : « Actualités », « Conseils », « Études de cas ».
Va dans Blog → Articles et clique Nouvel article. Remplis titre, catégorie, tags, puis rédige ou clique sur Générer avec l'IA si la clé Claude/GPT est configurée.

Pour les détails (IA, featured image, tags, brouillon vs publié), consulte la page Blog.

Configuration IA préalable. Pour générer du contenu automatiquement, tu dois d'abord ajouter ta clé API (Claude ou OpenAI) dans Réglages → IA. Cette section est réservée à l'Administrateur (owner ou admin).

Étape 7 — Lancer un cocon SEO (optionnel)

Le cocon SEO permet de générer en masse des pages localisées (service × ville, produit × zone…) avec un template paramétré et l'IA. Si ton site a une dimension SEO locale, c'est un levier puissant. Sinon, saute cette étape.

Procédure :

Va dans Cocon SEO et clique sur Nouveau content group.
Donne-lui un nom (ex. : « Plombier par ville ») et upload un template HTML avec des variables {{service}} et {{ville}}.
Renseigne les valeurs de chaque variable : par exemple service = « Plomberie, Sanitaire, Chauffage » et ville = « Bruxelles, Liège, Namur ». Cela donne 3×3 = 9 combinaisons.
Définis les patterns : schéma du titre {{service}} à {{ville}}, du slug /{{service}}-{{ville}}, de la meta description.
Lance d'abord un brouillon (1 page) pour vérifier que le rendu IA correspond à tes attentes—couleurs, ton, structure.
Si tout est OK, lance la génération batch. Le quota anti-spam (5 pages / 7 jours) protège contre l'explosion accidentelle—tu peux l'ajuster par groupe.

Quota et ordre parent/enfant. Si ton cocon contient des pages parents et enfants, les parents doivent être générés et buildés AVANT que les enfants ne se débloquent. C'est volontaire : cela garantit la cohérence sémantique du maillage interne.

Détails complets sur la page Cocon SEO.

Étape 8 — Configurer le SMTP

Sans SMTP, deux choses ne fonctionnent pas : les formulaires (la soumission ne peut pas être envoyée par email) et la 2FA email (impossible de recevoir le code de vérification au login). Configure-le dès maintenant.

Va dans Réglages → Général → SMTP (section en bas) ou directement Réglages → SMTP selon la version. Renseigne :

Champ	Exemple
Hôte	smtp.gmail.com / mail.infomaniak.com / smtp.office365.com
Port	587 (STARTTLS) ou 465 (SSL)
Utilisateur	noreply@acme.be
Mot de passe	mot de passe d'application (jamais le mot de passe principal)
Expéditeur (From)	Acme <noreply@acme.be>

Clique sur Envoyer un email de test. Vérifie ta boîte de réception (et les spams !). Tant que ce test n'est pas vert, ne passe pas à la suite.

Gmail et 2FA. Si tu utilises un compte Gmail, tu dois créer un mot de passe d'application dans les paramètres de sécurité Google. Le mot de passe normal est refusé depuis 2022.

Étape 9 — Build et publication

Tout ton travail jusqu'ici existe en base de données. Le build transforme ces données en fichiers HTML statiques placés dans le dossier public/, qui est servi par le serveur web (Plesk ou autre).

Procédure :

Va dans Build dans le menu de gauche.
Vérifie la liste des pages et articles à inclure. Tu peux voir le statut du dernier build (date, durée, succès).
Clique sur le bouton orange Lancer un build.
Attends quelques secondes (pour un petit site) à 1-2 minutes (pour un cocon de 100+ pages). Une barre de progression apparaît.
Une fois terminé, clique sur Voir le site dans le topbar pour ouvrir l'URL publique. Navigue, vérifie le rendu sur mobile et desktop, teste les liens.

Le build régénère aussi automatiquement sitemap.xml et robots.txt à la racine du site. C'est ce sitemap que tu fourniras à Google Search Console.

Le build est idempotent. Tu peux le relancer autant de fois que tu veux. Il ne casse rien et ne supprime jamais le contenu en base. À chaque modification importante, relance un build pour publier les changements.

Étape 10 — Activer le Mode Production

Par défaut l'instance démarre en mode développement : la 2FA est désactivée pour faciliter les premiers tests. Une fois le site livré au client, passe en Mode Production pour forcer la double authentification.

Va dans Réglages → Sécurité (réservé à l'Administrateur/owner).
Bascule l'interrupteur Mode Production sur ON.
Coche l'option 2FA email obligatoire.
Enregistre.

À partir de ce moment, chaque login déclenche un envoi de code à 6 chiffres par email (via le SMTP configuré à l'étape 8). C'est pourquoi le SMTP doit absolument fonctionner avant cette étape.

Checklist finale avant de livrer le site

Avant de remettre les clés au client, passe cette checklist :

Nom du site et URL renseignés dans Réglages → Général.
Favicon visible dans l'onglet du navigateur.
Layout global actif et toutes les pages s'affichent correctement.
Header et footer remplis (logo, menu, contacts, mentions).
Au minimum 3 pages publiées (Accueil, À propos, Contact).
Test du formulaire de contact : l'email arrive bien.
Test 2FA : code reçu, login fonctionnel.
Sitemap.xml accessible à https://ton-domaine/sitemap.xml.
Compte client créé avec le rôle Client (editor) et mot de passe communiqué via canal sécurisé.
Compte propriétaire (owner) sécurisé, mot de passe stocké dans un gestionnaire.
Mode Production activé, 2FA obligatoire.

Et après ? Consulte Cas d'usage agence pour les bonnes pratiques de remise au client (formation, accès, sauvegardes) et Bonnes pratiques pour les points d'attention SEO, performance et accessibilité.