- Remplacer hooklab.fr par hooklab.eu partout (domaine réel du site) - Ajouter instructions hosts file (Mac/Windows) pour tester WordPress sans toucher au DNS Vercel existant - Ajouter note Phase 6 : DNS à faire en dernier, Vercel reste intact https://claude.ai/code/session_01PzA98VhLMmsHpzs7gnLHGs
22 KiB
Plan de déploiement HookLab — Sites Artisans
PHASE 1 — Serveur OVH (toi + moi)
1.1 — VPS ✅ FAIT
- VPS OVH commandé — IP :
51.83.162.147/ host :vps-9993ccd0.vps.ovh.net - Ubuntu 22.04 LTS
- WordOps installé et accessible sur
https://51.83.162.147:22222
1.2 — Accès SSH ✅ FAIT
Note : Sur OVH Ubuntu, l'utilisateur par défaut est
ubuntu, pasroot.ssh root@IP→ Permission denied (c'est normal)
# Connexion correcte :
ssh ubuntu@51.83.162.147
# Pour passer root une fois connecté :
sudo -i
1.3 — Stack LEMP ✅ FAIT (via WordOps)
WordOps gère Nginx, PHP 8.2, MariaDB, Redis automatiquement. Pas besoin d'installer manuellement.
1.4 — Certbot ✅ FAIT (via WordOps)
WordOps intègre Let's Encrypt nativement.
1.5 — Pare-feu
# À vérifier une fois connecté en SSH :
sudo ufw status
# Si inactif :
sudo ufw allow OpenSSH
sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow 22222 # WordOps backend
sudo ufw enable
PHASE 2 — WordPress Multisite (toi + moi)
Objectif : Un seul WordPress qui héberge tous les sites clients. Chaque client = un sous-site isolé avec son propre accès.
Avec WordOps, les étapes 2.1 à 2.4 se font en 2 commandes.
2.1 à 2.4 — Installation WordPress Multisite via WordOps ✅ FAIT
# Commandes déjà exécutées :
ssh ubuntu@51.83.162.147
sudo wo site create hooklab.eu --wp --wpsubdomain
Mode choisi : sous-domaines Chaque client aura son propre sous-domaine :
cyprien.hooklab.eu,dupont.hooklab.eu, etc. (Nécessite un enregistrement DNS wildcard*.hooklab.eu → 51.83.162.147)
# Si HTTPS pas encore activé :
sudo wo site update hooklab.eu --letsencrypt
# Voir les identifiants WP admin et BDD :
sudo wo site info hooklab.eu
2.5 — Accéder au tableau de bord WordPress
WordOps a créé ton WordPress. Voici comment y accéder.
Récupérer le mot de passe WordPress :
# Dans le terminal SSH :
sudo wo site info hooklab.eu
# → Affiche : URL admin, login, mot de passe, identifiants BDD
Se connecter à WordPress :
- Ouvre ton navigateur
- Va sur
http://hooklab.eu/wp-login.php - Saisis le login et mot de passe affichés par
wo site info - Tu es dans le tableau de bord WordPress
Le DNS n'est pas encore configuré ? Pas de problème. Ajoute cette ligne sur ton PC pour simuler le DNS uniquement chez toi : Vercel reste en ligne pour tout le monde — toi seul vois le WordPress.
Mac/Linux :
sudo nano /etc/hosts→ ajoute51.83.162.147 hooklab.euWindows : Bloc-notes (admin) → ouvre
C:\Windows\System32\drivers\etc\hosts→ ajoute51.83.162.147 hooklab.euQuand tout est prêt pour basculer : supprime cette ligne + fais le DNS OVH (Phase 6).
Accéder à l'administration réseau (Multisite) :
- En haut à gauche, clique sur "Mes sites" → "Administration du réseau"
- OU va directement sur
http://hooklab.eu/wp-admin/network/ - C'est depuis là que tu gères TOUS les sites clients
2.6 — Installer les plugins essentiels (réseau)
Les plugins installés depuis l'administration réseau sont disponibles pour tous les sous-sites. Tu les installes une fois, tu les actives sur chaque sous-site.
Aller dans les plugins réseau :
- Administration réseau → menu gauche → "Extensions" → "Ajouter"
Installer chaque plugin (même procédure pour tous) :
- Dans la barre de recherche, tape le nom du plugin
- Clique sur "Installer maintenant"
- Clique sur "Activer sur le réseau" (pas juste "Activer")
Plugins à installer dans cet ordre :
-
Kadence Theme (thème de base)
- Menu gauche → Apparence → Thèmes → Ajouter
- Recherche :
Kadence - Clique "Installer" puis "Activer"
-
Kadence Blocks (constructeur de pages)
- Extensions → Ajouter → Recherche :
Kadence Blocks - Installer → Activer sur le réseau
- Extensions → Ajouter → Recherche :
-
Rank Math SEO (référencement Google)
- Extensions → Ajouter → Recherche :
Rank Math - Installer → Activer sur le réseau
- Suivre l'assistant de configuration qui s'ouvre automatiquement
- Extensions → Ajouter → Recherche :
-
WP Super Cache (performances — gratuit)
- Extensions → Ajouter → Recherche :
WP Super Cache - Installer → Activer sur le réseau
- Extensions → Ajouter → Recherche :
-
Wordfence Security (protection contre les hackers)
- Extensions → Ajouter → Recherche :
Wordfence - Installer → Activer sur le réseau
- Il te demandera un email pour les alertes → entre le tien
- Extensions → Ajouter → Recherche :
-
UpdraftPlus (sauvegardes automatiques)
- Extensions → Ajouter → Recherche :
UpdraftPlus - Installer → Activer sur le réseau
- Réglages → UpdraftPlus → Onglet "Réglages"
- Fréquence : Quotidien (fichiers) / Quotidien (BDD)
- Destination : Google Drive ou Dropbox (connexion en 2 clics)
- Extensions → Ajouter → Recherche :
-
NS Cloner (dupliquer des sites — gratuit)
- Extensions → Ajouter → Recherche :
NS Cloner - Installer → Activer sur le réseau
- (Sert à créer rapidement un nouveau site client depuis un template)
- Extensions → Ajouter → Recherche :
-
WPForms Lite (formulaire de contact)
- Extensions → Ajouter → Recherche :
WPForms - Installer → Activer sur le réseau
- Extensions → Ajouter → Recherche :
2.7 — Structure des sous-sites
hooklab.eu ← Site principal (vitrine HookLab)
cyprien.hooklab.eu ← Site de Cyprien (maçon)
dupont.hooklab.eu ← Site de M. Dupont (plombier)
martin.hooklab.eu ← Site de M. Martin (paysagiste)
DNS requis (Phase 6) :
Type A *.hooklab.eu → 51.83.162.147(wildcard — un seul enregistrement pour tous)
2.8 — Créer le premier sous-site client (exemple)
- Administration réseau → "Sites" → "Ajouter"
- Remplis le formulaire :
- Adresse du site :
cyprien(donneracyprien.hooklab.eu) - Titre du site :
Cyprien Maçonnerie - Langue : Français
- Email admin : ton email (ou celui du client)
- Adresse du site :
- Clique "Ajouter un site"
- Le site est créé instantanément
2.9 — Donner accès à un client
Le client peut modifier son site sans toucher aux autres.
- Administration réseau → "Sites" → clique sur le nom du site client
- Clique sur "Utilisateurs"
- Clique "Ajouter un utilisateur existant" ou "Ajouter un nouvel utilisateur"
- Entre l'email du client
- Rôle : choisir "Administrateur" (il ne peut gérer QUE son sous-site)
- Clique "Ajouter un utilisateur"
- Le client reçoit un email avec ses identifiants
Le client voit uniquement son propre tableau de bord. Il ne peut pas accéder aux autres sites ni installer des thèmes/plugins.
PHASE 3 — Design avec Kadence (toi)
Kadence est un constructeur de pages visuel — tu glisses-dépose des blocs. Pas besoin de coder.
3.1 — Configurer le thème Kadence (couleurs + polices)
- Va sur un sous-site client :
cyprien.hooklab.eu/wp-admin - Menu gauche → "Apparence" → "Personnaliser"
- Un panneau s'ouvre à gauche, l'aperçu du site à droite
Couleurs :
- Clique "Général" → "Couleurs"
- Couleur principale : entre le code couleur HookLab (ex:
#FF6B2B) - Couleur secondaire : entre la deuxième couleur
- Les changements s'appliquent partout en temps réel
Polices :
- Clique "Typographie"
- Police des titres : choisis dans la liste (Google Fonts incluses)
- Police du corps de texte : idem
- Taille recommandée : 16-18px pour le corps de texte
Logo :
- Clique "En-tête" → "Logo"
- Clique "Sélectionner le logo" → téléverse le logo du client
- Clique "Publier" en haut pour sauvegarder
3.2 — Créer la page d'accueil avec Kadence Blocks
Créer une nouvelle page :
- Menu gauche → "Pages" → "Ajouter"
- Titre :
Accueil - En haut à droite, clique sur les 3 points → "Éditeur de code" si tu vois du code (sinon tu es déjà en mode visuel — c'est bien)
Utiliser les modèles Kadence (le plus rapide) :
- Dans l'éditeur, clique sur le bouton "Kadence" (icône bleue en haut)
- → "Bibliothèque de designs"
- Choisis un modèle de page d'accueil pour artisan
- Clique "Importer" → la page se remplit automatiquement
- Tu n'as plus qu'à remplacer les textes et photos
Sinon, construire bloc par bloc :
Bloc HERO (grande bannière en haut) :
- Clique "+" pour ajouter un bloc → cherche "Row Layout" (Kadence)
- Choisis la disposition : 1 colonne pleine largeur
- Ajoute dedans un bloc "Titre avancé" (Kadence Advanced Text)
- Tape :
Maçon à [Ville] — Devis Gratuit - En dessous, ajoute un bloc "Bouton avancé" (Kadence Advanced Button)
- Texte du bouton :
Demander un devis gratuit - Lien du bouton :
#contact(pointe vers la section contact plus bas)
Section SERVICES (3 colonnes) :
- Ajoute un bloc "Row Layout" → choisis 3 colonnes égales
- Dans chaque colonne, ajoute :
- Une icône (bloc "Icon" Kadence)
- Un titre (ex: "Rénovation de façade")
- Un texte court (2-3 lignes de description)
Section AVIS CLIENTS :
- Ajoute un bloc "Row Layout" → fond de couleur légèrement grisé
- Ajoute un bloc "Témoignage" (Kadence Testimonial)
- Remplis : nom client, texte de l'avis, note (étoiles)
- Duplique le bloc pour avoir 3 avis côte à côte
Section CONTACT :
- Ajoute un bloc "Row Layout"
- Ajoute le bloc "WPForms" et sélectionne le formulaire de contact
- À côté (colonne de droite), ajoute les coordonnées :
- Téléphone (bloc Titre)
- Adresse (bloc Paragraphe)
- Horaires
Publier la page :
- En haut à droite : clique "Publier"
- Menu gauche → "Réglages" → "Lecture"
- "La page d'accueil affiche" → sélectionne "Une page statique"
- "Page d'accueil" → choisis
Accueil - Clique "Enregistrer les modifications"
3.3 — Créer les autres pages
Même procédure pour chaque page. Voici le contenu minimum.
Page "À propos" :
- Photo du client (artisan au travail)
- Son histoire / ses années d'expérience
- Ses certifications / qualifications (RGE, Qualibat, etc.)
- Pourquoi lui plutôt qu'un autre
Page "Réalisations" :
- Galerie de photos (bloc Galerie WordPress ou Kadence Gallery)
- Catégories par type de travaux
- Chaque photo avec une courte légende
Page "Contact" :
- Formulaire WPForms (nom, email, téléphone, message, type de travaux)
- Adresse + carte Google Maps intégrée (Bloc HTML → colle le code d'intégration Google Maps)
- Numéro de téléphone cliquable (important sur mobile)
Page "Devis gratuit" :
- Formulaire WPForms plus détaillé
- Champs : type de travaux, surface, ville, description, photos à joindre
- Message de confirmation : "Réponse sous 24h"
Pages légales obligatoires :
- "Mentions légales" — nom, adresse, SIRET du client
- "Politique de confidentialité" — WordPress en génère une automatiquement (Menu → Réglages → Confidentialité)
3.4 — Configurer le header et footer
Header (en-tête) :
- Apparence → Personnaliser → "En-tête"
- Ajoute le logo à gauche
- Menu de navigation à droite : Accueil / Services / Réalisations / Contact
- Optionnel : numéro de téléphone visible dans le header (très utile sur mobile)
Créer le menu de navigation :
- Apparence → "Menus"
- Clique "Créer un menu" → nom :
Menu principal - Ajoute les pages : Accueil, Réalisations, Contact, Devis gratuit
- Clique "Enregistrer le menu"
- En bas, coche "Menu principal" pour l'emplacement
Footer (pied de page) :
- Apparence → Personnaliser → "Pied de page"
- Colonne 1 : logo + slogan
- Colonne 2 : liens rapides (mêmes que le menu)
- Colonne 3 : coordonnées + réseaux sociaux
- Barre du bas : "© 2025 Nom du client — Mentions légales"
3.5 — Vérifier le rendu mobile
- Dans le Personnaliseur (Apparence → Personnaliser)
- En bas à gauche, clique sur l'icône téléphone 📱
- Vérifie que tout est lisible et bien aligné
- Le texte ne doit pas être trop petit
- Les boutons doivent être facilement cliquables au doigt
- Clique "Publier" quand tout est bon
PHASE 4 — Blog + SEO (toi)
Le blog sert à attirer des visiteurs depuis Google. Chaque article bien écrit = plus de clients potentiels.
4.1 — Configurer Rank Math SEO
- Menu gauche → "Rank Math" → "Assistant de configuration"
- Suis l'assistant :
- Type de site : Site d'une entreprise locale
- Nom du site : nom du client (ex: "Cyprien Maçonnerie")
- Logo : téléverse le logo
- À l'étape "Sitemap" : laisse tout activé par défaut → Continuer
- À l'étape "Optimisation" : clique "Analyse SEO" pour voir le score actuel
- Clique "Terminer"
Configurer les informations locales (important pour artisans) :
- Rank Math → "Réglages" → "Recherche locale"
- Type : Entreprise locale
- Nom : nom complet du client
- Adresse : adresse complète
- Téléphone : numéro du client
- Horaires : jours et heures d'ouverture
- Clique "Enregistrer les modifications"
Cela génère automatiquement les données Schema.org — Google affiche les infos directement dans les résultats de recherche.
4.2 — Créer des articles de blog SEO
Chaque article doit cibler une recherche précise que les gens font sur Google.
Exemples d'articles à créer pour un maçon à Lyon :
"Combien coûte une rénovation de façade à Lyon ?"
"Maçon à Lyon : comment choisir le bon artisan ?"
"Ravalement de façade Lyon : prix et délais en 2025"
"Extension de maison à Lyon : maçon ou constructeur ?"
Créer un article :
- Menu gauche → "Articles" → "Ajouter"
- Titre : la question ou le mot-clé exact (ex: "Maçon Lyon — Devis Gratuit en 24h")
- Contenu : minimum 600 mots, structuré avec des titres H2 et H3
- Image mise en avant : une vraie photo du chantier du client
- En bas de page, le panneau Rank Math apparaît :
- Mot-clé principal : tape le mot-clé ciblé (ex: "maçon Lyon")
- Rank Math donne un score sur 100 — vise au moins 70
- Il te dit exactement quoi corriger (titre trop court, pas assez de mots-clés, etc.)
- Clique "Publier"
Structure d'un bon article (exemple) :
H1 : Maçon à Lyon — Cyprien Maçonnerie, devis gratuit sous 24h
H2 : Nos services de maçonnerie à Lyon
H3 : Rénovation de façade
H3 : Construction de mur
H3 : Extension de maison
H2 : Pourquoi choisir Cyprien Maçonnerie ?
H2 : Zone d'intervention
H2 : Demander un devis gratuit
4.3 — Connecter Google Search Console
Google Search Console dit à Google que ton site existe et le surveille.
- Va sur
https://search.google.com/search-console - Connecte-toi avec un compte Google
- Clique "Ajouter une propriété"
- Entre l'URL :
https://cyprien.hooklab.eu - Méthode de vérification : choisis "Google Analytics" ou "Balise HTML"
- Avec Rank Math, c'est automatique :
- Rank Math → Général → Google Search Console → clique "Connecter"
- Suis les étapes de connexion Google
- Une fois vérifié, clique "Demander l'indexation" sur les pages importantes
- Va dans "Sitemaps" → entre :
sitemap_index.xml→ clique "Envoyer"
4.4 — Optimiser chaque page existante pour le SEO
Pour chaque page publiée (Accueil, Contact, Réalisations...) :
- Ouvre la page en édition
- En bas, panneau Rank Math → entre le mot-clé principal de la page
- Clique sur "Modifier le snippet" pour personnaliser :
- Titre SEO : "Maçon Lyon — Cyprien Maçonnerie | Devis Gratuit" (60 caractères max)
- Meta description : "Maçon à Lyon depuis 15 ans. Rénovation de façade, extension, gros œuvre. Devis gratuit sous 24h. Appelez le 06 XX XX XX XX." (155 caractères max)
- Score Rank Math : vise 70+
- Clique "Mettre à jour"
PHASE 5 — Template client réutilisable (toi)
Une fois le premier site fait, les suivants sont créés en 1h au lieu de 5h.
5.1 — Sauvegarder le premier site comme template
- Sur le premier site client terminé (ex:
cyprien.hooklab.eu) - Dans l'admin de CE sous-site → Extensions → "NS Cloner"
- Clique "Clone Site"
- Site source :
cyprien.hooklab.eu - Nouveau sous-domaine :
template(donnetemplate.hooklab.eu) - Nouveau titre :
TEMPLATE ARTISAN - Clique "Cloner" → le site est dupliqué en 30 secondes
Ce site
template.hooklab.euest ton modèle de base. Ne le publie pas — c'est juste pour dupliquer.
5.2 — Créer un nouveau site client depuis le template
Quand tu signes un nouveau client :
Étape 1 — Dupliquer le template
- Administration réseau → NS Cloner
- Source :
template.hooklab.eu - Nouveau sous-domaine :
martin(→martin.hooklab.eu) - Nouveau titre :
Martin Paysagiste - Clique "Cloner"
Étape 2 — Personnaliser le site
- Va sur
martin.hooklab.eu/wp-admin - Apparence → Personnaliser → change les couleurs selon le client
- Remplace le logo par le logo du client
- Édite chaque page → remplace textes et photos
Ce qu'il faut changer sur chaque page :
- Nom de l'artisan partout dans les textes
- Ville(s) d'intervention
- Services proposés (différents d'un artisan à l'autre)
- Photos (demande les vraies photos du client)
- Numéro de téléphone
- Email de contact
- Adresse et zone d'intervention
- Avis clients (demande 3 vrais avis au client)
- Prix indicatifs si le client l'accepte
Étape 3 — Configurer Rank Math pour ce client
- Rank Math → Réglages → Recherche locale
- Mets les infos de Martin Paysagiste (nom, adresse, téléphone)
Étape 4 — Créer l'accès client
- Administration réseau → Sites →
martin.hooklab.eu→ Utilisateurs - Ajouter l'email de Martin, rôle : Administrateur
- Martin reçoit un email avec ses identifiants
- Il peut se connecter sur
martin.hooklab.eu/wp-login.php
Étape 5 — Connecter son domaine (si le client a le sien)
Voir Phase 6.2
5.3 — Checklist de livraison client
Avant de livrer le site au client :
- [ ] Toutes les pages publiées et vérifiées
- [ ] Formulaire de contact testé (envoie un vrai message)
- [ ] Email de réception du formulaire vérifié
- [ ] Numéro de téléphone cliquable sur mobile
- [ ] Site testé sur mobile ET desktop
- [ ] HTTPS activé (cadenas vert dans le navigateur)
- [ ] Score PageSpeed > 80 (test sur pagespeed.web.dev)
- [ ] Rank Math configuré sur toutes les pages
- [ ] Google Search Console connecté
- [ ] Sitemap soumis à Google
- [ ] Mentions légales présentes
- [ ] Politique de confidentialité présente
- [ ] Accès client créé et testé
Formation client (15 min en visio) :
Montrer :
1. Comment se connecter (wp-login.php)
2. Comment modifier un texte (cliquer sur la page → modifier)
3. Comment changer une photo
4. Comment voir les messages du formulaire de contact
5. Comment créer un article de blog
PHASE 6 — DNS (toi + moi)
Le DNS c'est comme un annuaire téléphonique : il dit aux navigateurs "pour hooklab.eu, va à l'IP 51.83.162.147".
6.1 — Configurer le DNS de hooklab.eu (OVH)
A faire en dernier, une fois que tout est prêt sur WordPress. Avant ça, utilise le hosts file pour tester (voir étape 2.5). La bascule prend 5 min et le site Vercel reste en ligne jusqu'au moment où tu valides.
Connexion à l'espace OVH :
- Va sur
https://www.ovhcloud.com/fr/ - Clique "Espace client" en haut à droite
- Connecte-toi avec ton compte OVH
Accéder à la zone DNS :
- Menu gauche → "Web Cloud"
- Clique sur "Noms de domaine"
- Clique sur
hooklab.eu - Clique sur l'onglet "Zone DNS"
Ajouter les enregistrements :
Clique "Ajouter une entrée" et répète pour chaque ligne :
| Type | Sous-domaine | Cible | TTL |
|---|---|---|---|
| A | (vide = hooklab.eu) | 51.83.162.147 |
3600 |
| A | * |
51.83.162.147 |
3600 |
| A | www |
51.83.162.147 |
3600 |
Le
*(wildcard) couvre automatiquement tous les sous-domaines :cyprien.hooklab.eu,martin.hooklab.eu, etc. Un seul enregistrement pour tous les clients.
Valider :
- Clique "Valider" après chaque entrée
- La propagation DNS prend 5 à 30 minutes (parfois jusqu'à 24h)
6.2 — Domaine custom pour un client (optionnel)
Si un client veut son propre domaine (ex:
martin-paysagiste.fr) au lieu demartin.hooklab.eu.
Dans la zone DNS du domaine client (chez son registrar) :
| Type | Sous-domaine | Cible |
|---|---|---|
| A | (vide) | 51.83.162.147 |
| A | www |
51.83.162.147 |
Dans WordPress (Network Admin) :
- Administration réseau → Sites →
martin.hooklab.eu - Clique "Modifier"
- Change "Adresse du site" →
https://martin-paysagiste.fr - Clique "Enregistrer"
Activer le HTTPS pour ce domaine :
# Dans le terminal SSH :
ssh ubuntu@51.83.162.147
sudo wo site update hooklab.eu --letsencrypt
# WordOps détecte automatiquement les nouveaux domaines
6.3 — Activer le HTTPS (cadenas vert)
# Dans le terminal SSH, une seule commande :
sudo wo site update hooklab.eu --letsencrypt
WordOps génère automatiquement les certificats SSL pour :
hooklab.eu*.hooklab.eu(tous les sous-domaines clients)Le certificat se renouvelle automatiquement tous les 90 jours.
6.4 — Vérifications finales après DNS
- Ouvre
https://hooklab.eu→ doit afficher ton site (avec cadenas vert) - Ouvre
https://cyprien.hooklab.eu→ doit afficher le site de Cyprien - Teste le formulaire de contact → vérifie que tu reçois l'email
- Teste depuis un téléphone → le site doit être lisible et rapide
- Va sur
https://pagespeed.web.dev/→ entre l'URL → score doit être > 80 - Va sur
https://search.google.com/search-console→ demande l'indexation
Récapitulatif
| Phase | Responsable | Durée estimée |
|---|---|---|
| 1 — Serveur OVH | toi + moi | 1h |
| 2 — WordPress Multisite | toi + moi | 1-2h |
| 3 — Design Kadence | toi | 3-5h par template |
| 4 — Blog + SEO | toi | ongoing |
| 5 — Template client | toi | 1h par client |
| 6 — Migration DNS | toi + moi | 30min |
Dernière mise à jour : 2026-02-24