Présence en ligne de l'organisation Solutech

1. Contexte et Objectifs

Solutech, PME spécialisée dans les services informatiques, ne disposait d'aucune présence web professionnelle : pas de site vitrine, pas de référencement, aucune maîtrise de son image en ligne. Léo Martin, responsable SI et donneur d'ordres, m'a confié le déploiement du site corporate de l'entreprise sur une VM dédiée (Wordpress, IP 10.2.2.20) du réseau lab 10.2.2.0/24.

La mission couvrait l'ensemble du cycle de vie d'un service web : déploiement de l'infrastructure (stack LAMP), installation et configuration du CMS WordPress, application de la charte graphique Solutech, référencement naturel (SEO on-page), mesure d'audience respectueuse du RGPD, mise en conformité juridique (LCEN, RGPD, cookies), puis mise en service formelle par une recette (8 tests + PV signé) et un accompagnement des utilisateurs via un guide.

Objectif : livrer un service web WordPress opérationnel, visible, conforme, documenté et recetté, que les collaborateurs non techniciens de Solutech peuvent utiliser en autonomie.

2. Besoins identifiés

  • Présence : disposer d'un site vitrine professionnel qui reflète l'identité de Solutech (logo, slogan, couleurs #1A3A5C / #E8A020, typographies Montserrat Alternates et Instrument Serif) et présente son offre (Support informatique, Administration systèmes et réseaux, Mise à disposition de services), avec un formulaire de contact exploitable.

  • Infrastructure : héberger ce site sur un serveur Linux propre, dédié à ce seul service (une VM = un service), avec une IP fixe, une base de données isolée et un compte SQL applicatif respectant le principe du moindre privilège.

  • Visibilité : rendre le site compréhensible par les moteurs de recherche (URL lisibles, titres et méta-descriptions, sitemap XML, robots.txt) et mesurer son audience sans transférer les données des visiteurs hors de l'Union européenne.

  • Conformité : respecter les obligations légales d'un site professionnel — mentions légales (LCEN), politique de confidentialité et consentement aux traceurs (RGPD) — et définir une politique de réponse en matière d'e-réputation.

  • Mise en service : valider formellement le service avant livraison (tests d'intégration côté technicien, tests d'acceptation côté client, PV Go/No-Go) et fournir aux collaborateurs un support écrit leur permettant de publier sans mon aide.

3. Solution technique

  • Socle Debian 13 industrialisé : template tpl-debian13 (golden image) puis Full Clone vers la VM de service Wordpress, personnalisée (hostname wordpress, IP fixe 10.2.2.20, DNS, /etc/hosts). Justification : partir d'une image propre évite d'hériter des configurations d'un autre service, et les snapshots nommés garantissent un retour arrière à chaque palier.

  • Stack LAMP + WordPress : Apache2 (VirtualHost dédié solutech-web.conf, mod_rewrite, AllowOverride All), MariaDB (base wp_solutech en utf8mb4, utilisateur wp_user@localhost limité à cette base), PHP 8 avec les extensions requises par WordPress. Justification : WordPress est le CMS de référence, gratuit, qui sépare le contenu de la présentation ; une installation manuelle me permet de maîtriser chaque couche pour diagnostiquer une panne (page blanche, erreur 500, erreur de connexion BDD).

  • Thème GeneratePress + CSS additionnel du Customizer : charte appliquée par surcharge (variables CSS :root, Google Fonts via @import) sans jamais modifier le thème parent. Justification : les modifications du thème parent seraient écrasées à la première mise à jour ; la surcharge garantit la pérennité de la charte.

  • Contact Form 7 + Flamingo : formulaire de contact et archivage des messages en base. Justification : en l'absence de serveur mail (MTA) sur la VM, Flamingo assure la traçabilité de chaque demande entrante.

  • Yoast SEO + permaliens + sitemap + robots.txt : optimisation on-page des 4 pages vitrine et backlog de configuration avancé. Justification : Yoast écrit les balises lues par les moteurs (title, meta description, canonical) et génère le sitemap ; les permaliens /%postname%/ rendent les URL lisibles pour les visiteurs comme pour les robots.

  • Matomo auto-hébergé (Alias Apache /matomo, base matomo_solutech et utilisateur matomo_user dédiés) : mesure d'audience. Justification : contrairement à Google Analytics, qui transfère les données vers des serveurs situés aux États-Unis, Matomo conserve les statistiques dans le SI de Solutech, ce qui simplifie la conformité RGPD.

  • Pages juridiques + bandeau cookies (Cookie Compliance) + tableau e-réputation : mentions légales LCEN, politique de confidentialité détaillant les traitements (formulaire, Matomo), bandeau Accepter / Refuser. Justification : un site professionnel doit identifier son éditeur et recueillir un consentement éclairé avant de déposer des traceurs d'audience.

  • Recette (6 tests d'intégration + 2 tests d'acceptation + PV Go/No-Go) et guide utilisateur d'une page : Justification : le guide rédigé avant les tests permet de vérifier qu'un non-technicien réussit à publier en suivant un support écrit, et le PV signé constitue la preuve formelle de la mise en service.

4. Réalisation

Étape 0 — Socle Linux

  • Configuration du réseau NAT VMware (VMnet8) : sous-réseau 10.2.2.0/24, passerelle 10.2.2.2, plage DHCP .100–.200 excluant l'adresse de service .20.

  • Création du template tpl-debian13 par Full Clone d'un snapshot Debian propre, puis snapshot 00-template-debian-propre.

  • Clonage de la VM Wordpress et personnalisation : hostname wordpress via hostnamectl, IP fixe 10.2.2.20 dans /etc/network/interfaces, résolveurs DNS dans /etc/resolv.conf, correction de /etc/hosts. Contrôle de la connectivité (ping 10.2.2.2, ping 8.8.8.8, ping google.fr) puis snapshot 00-Debian-propre.

Étape A — Stack LAMP et WordPress

  • Installation d'Apache2, MariaDB, PHP et de ses extensions (php-mysql, php-xml, php-curl, php-gd, php-mbstring, php-zip, php-intl, libapache2-mod-php), services activés au démarrage avec systemctl enable --now.

  • Création de la base wp_solutech (charset utf8mb4, collation utf8mb4_unicode_ci) et de l'utilisateur applicatif wp_user@localhost, avec des droits limités à wp_solutech.*, vérifiés par SHOW GRANTS.

  • Téléchargement de l'archive officielle latest.tar.gz, déploiement dans /var/www/html/solutech-web/, attribution des fichiers à www-data et configuration de wp-config.php (constantes DB_*).

  • Création du VirtualHost solutech-web.conf (DocumentRoot, bloc <Directory> avec AllowOverride All, journaux dédiés), activation du site et de mod_rewrite, désactivation de 000-default, contrôle apache2ctl configtest puis rechargement d'Apache.

  • Installation de WordPress via l'assistant web (titre Solutech, compte admin-solutech, indexation désactivée), vérifications finales (systemctl status, curl, journal d'erreurs) puis snapshot 01-WordPress-operationnel.

Étape B — Charte graphique, pages et SQL

  • Installation et activation du thème GeneratePress, puis configuration de l'identité du site dans le Customizer : titre, slogan B2B, logo (texte alternatif « Logo Solutech ») et icône du site (PNG carré ≥ 512 px distinct du logo).

  • Rédaction du CSS additionnel : import des polices Google Fonts, variables --color-primary, --color-accent, --font-heading, --font-body, puis application sur les sélecteurs identifiés avec l'inspecteur du navigateur (F12).

  • Création des pages dans Gutenberg : Services (trois axes de l'offre), Accueil (titres H2/H3, bouton lié à la page Services, tableau des services), Contact (coordonnées publiques, shortcode Contact Form 7, mention RGPD) et Actualités, désignée comme page des articles dans Réglages → Lecture.

  • Test du formulaire de contact : message archivé dans Flamingo → Messages entrants malgré l'erreur d'envoi attendue (absence de MTA).

  • Création du menu principal (Accueil, Services, Contact), suppression de la page d'exemple.

  • Connexion à MariaDB avec le compte applicatif wp_user et rédaction d'une requête SELECT prouvant l'existence des pages publiées dans wp_posts, puis snapshot 02-charte-graphique.

Étape C — SEO, audience, juridique et mise en service

  • Passage des permaliens en « Titre de la publication » et contrôle des liens du menu (aucune erreur 404).

  • Installation de Yoast SEO (entité Entreprise « Solutech », indexation autorisée), avancement de la Liste des tâches jusqu'à 9/11 et optimisation des 4 pages vitrine (expression clé, titre SEO, slug, méta-description) jusqu'à l'obtention de la pastille orange.

  • Vérification du sitemap (curl -sL http://10.2.2.20/sitemap_index.xml), création du robots.txt via l'éditeur de fichiers de Yoast avec la directive Sitemap:, puis snapshot 03-seo-optimise.

  • Installation de Matomo : extension php-bcmath, archive officielle dans /var/www/html/matomo/, base matomo_solutech et utilisateur matomo_user, Alias Apache /matomo, assistant de configuration (site suivi = http://10.2.2.20), puis connexion à WordPress via le plugin Connect Matomo et un jeton d'API.

  • Publication des pages Mentions légales et Politique de confidentialité (tableau finalité / base légale / durée de conservation), lien vers la politique depuis la page Contact, création d'un menu Footer affiché via un widget de pied de page.

  • Installation de Cookie Compliance for WordPress en mode Banner Only : message mentionnant Matomo, boutons Accepter / Refuser, lien vers la politique de confidentialité, aucune acceptation forcée.

  • Création des comptes métier lmartin (Administrateur) et pdurand (Éditeur), rédaction du guide utilisateur d'une page, exécution des 8 tests dans l'ordre imposé (guide → tests → PV), remplissage du PV Go/No-Go puis snapshot 04-presence-en-ligne.

5. Preuves de réalisation

Preuve 1 : Stack LAMP opérationnelle

Stack LAMP

Légende : Terminal SSH connecté à la VM wordpress affichant le résultat des commandes systemctl status apache2 mariadb et php -v. Les deux services apparaissent à l'état active (running) et enabled, ce qui signifie qu'ils tournent actuellement et redémarreront automatiquement au boot de la VM. La version de PHP 8 est affichée, confirmant la présence de la dernière couche de la stack.

Ce que ça démontre : Les trois couches LAMP tournent sur la VM Wordpress et sont persistantes, condition indispensable pour qu'un site puisse être servi durablement.

Preuve 2 : Site WordPress en ligne

WordPress en ligne

Légende : Navigateur du poste client Windows affichant l'accueil du site WordPress Solutech à l'adresse http://10.2.2.20, barre d'URL visible. Le site ne présente plus la page par défaut « It works! » d'Apache, ce qui prouve que le VirtualHost solutech-web sert bien le dossier /var/www/html/solutech-web/ et que le site par défaut a été désactivé.

Éléments techniques visibles : - URL en adresse IP fixe 10.2.2.20 (pas de nom de domaine en lab) - Rendu PHP exécuté par Apache (et non téléchargement du code source) - Connexion PHP ↔ MariaDB fonctionnelle (aucune erreur de base de données)

Ce que ça démontre : Le CMS répond en HTTP depuis le poste client et le back-office est accessible, base de toute recette client.

Preuve 3 : CSS additionnel complet

CSS additionnel

Légende : Capture de l'écran Apparence → Personnaliser → CSS additionnel, montrant l'intégralité du code saisi. En première ligne, l'@import Google Fonts charge les polices Montserrat Alternates et Instrument Serif. Le bloc :root déclare les variables de la charte (--color-primary: #1A3A5C, --color-accent: #E8A020, --font-heading, --font-body), consommées ensuite par les sélecteurs via var(...) : en-tête bleu (.site-header), titre du site en blanc, slogan en orange accent, titres H1–H3 en bleu et en Montserrat Alternates, corps de texte en Instrument Serif. Un changement de charte ne demande donc de modifier qu'une seule ligne. L'aperçu du site à droite de l'écran permet de constater l'effet immédiat des règles.

Éléments techniques visibles : - @import Google Fonts placé en première ligne - Variables CSS de couleurs et de typographies nommées par rôle - Sélecteurs identifiés avec l'inspecteur du navigateur (F12), adaptés au HTML de GeneratePress - Sélecteur à deux classes pour le slogan (gestion de la spécificité CSS) - Surcharge stockée en base par le Customizer, sans modification du style.css du thème parent

Ce que ça démontre : Mon CSS additionnel applique la charte Solutech (couleurs et typographies) par surcharge, sans toucher au thème parent, ce qui garantit que l'identité visuelle survit aux mises à jour.

Preuve 4 : Requête SQL sur les pages publiées

Requête SQL

Légende : Terminal SSH connecté à la VM wordpress, client MariaDB ouvert avec le compte applicatif wp_user (commande mysql -u wp_user -p wp_solutech, invite MariaDB [wp_solutech]>), c'est-à-dire le même compte que celui déclaré dans wp-config.php, et non root. La requête SELECT interroge la table wp_posts en filtrant sur le type de contenu (post_type = 'page', pour exclure articles et médias) et sur le statut (post_status = 'publish', pour exclure brouillons et corbeille). Le résultat liste les pages Accueil, Actualités, Contact et Services, et confirme que la page d'exemple n'y figure plus.

Éléments techniques visibles : - Connexion en compte applicatif à moindre privilège - Requête en lecture seule (SELECT), sans modification de la base - Filtres WHERE sur post_type et post_status - Sortie tabulaire listant les pages vitrine publiées

Ce que ça démontre : Un SELECT sur wp_posts prouve qu'Accueil, Services et Contact existent en base au statut publié, ce qui permet de diagnostiquer l'état du site même si le back-office est inaccessible.

Preuve 5 : Charte graphique sur le front

Charte Solutech

Légende : Page d'accueil du site vue depuis le poste client. L'en-tête bleu #1A3A5C affiche le logo Solutech, le titre en blanc et le slogan en orange #E8A020. L'onglet du navigateur présente l'icône du site Solutech. Le menu principal ne contient que les trois pages vitrine (Accueil, Services, Contact). Le corps de page reprend la maquette demandée : titres H2/H3 en Montserrat Alternates, bouton lié à la page Services, tableau des trois pôles d'activité et paragraphes en Instrument Serif.

Éléments techniques visibles : - Logo et icône du site (deux fichiers distincts) - Slogan lisible sur le fond bleu - Menu principal limité à Accueil | Services | Contact - Typographies de la charte perceptibles sur les titres et le corps

Ce que ça démontre : Logo, slogan, icône, navigation, couleurs et typographies Solutech sont visibles sur le front, ce qui assure une image en ligne conforme à la charte de l'entreprise.

Preuve 6 : Référencement Yoast SEO

Yoast — Pages

Légende : Liste des pages dans wp-admin → Pages. La colonne SEO de Yoast affiche une pastille orange (« Analyse SEO : OK ») sur les quatre pages vitrine : Accueil, Services, Contact et Actualités. Pour chacune, l'expression clé principale, le titre SEO, le slug et la méta-description ont été alignés.

Yoast — Liste des tâches

Légende : Écran Yoast SEO → Liste des tâches affichant le compteur 9/11. Les tâches de configuration (configuration initiale, lisibilité, méta-descriptions par défaut, fichier llms.txt, suppression des contenus d'exemple, création de l'article « Sauvegardes ») sont terminées. Les deux tâches « Améliorez le SEO de vos contenus récents » restent volontairement ouvertes, l'objectif du lab étant l'orange et non le vert.

Éléments techniques visibles : - Permaliens lisibles (/services/, /contact/) visibles dans les slugs - 4 pastilles orange sur les pages vitrine - Backlog de configuration à 9/11

Ce que ça démontre : Les quatre pages vitrine sont optimisées on-page et la configuration Yoast est avancée, ce qui rend le site compréhensible par les moteurs de recherche et améliore sa visibilité.

Preuve 7 : Mesure d'audience Matomo

Matomo

Légende : Console Matomo accessible à http://10.2.2.20/matomo/, onglet Visiteurs en temps réel. Au moins une visite est enregistrée sur le site Solutech, avec les pages consultées et la source de la visite. Le suivi fonctionne grâce au plugin Connect Matomo qui injecte le code de suivi JavaScript sur le front WordPress. Le site suivi est bien http://10.2.2.20 (la vitrine) et non l'URL de la console.

Éléments techniques visibles : - Alias Apache /matomo sur le même VirtualHost que WordPress - Visite enregistrée avec pages vues et source identifiée - Statistiques stockées dans la base matomo_solutech sur la VM

Ce que ça démontre : L'audience du site est mesurée et les données restent hébergées dans le SI de Solutech, un argument de conformité RGPD face à Google Analytics.

Preuve 8 : Conformité juridique et e-réputation

Juridique

Légende : Capture réalisée en navigation privée. En bas de page, le pied de page affiche les liens vers les Mentions légales (obligation LCEN : identité de l'éditeur, directeur de publication, hébergeur) et vers la Politique de confidentialité (obligation RGPD : finalité, base légale et durée de conservation des traitements liés au formulaire de contact et à Matomo). Le bandeau cookies est visible en bas de l'écran, avec un bouton Accepter, un bouton Refuser et un lien vers la politique de confidentialité, sans acceptation forcée au défilement.

Politique d'e-réputation :

Source État constaté Action recommandée
Google / indexation Site en lab non exposé ; indexation autorisée, sitemap déclaré dans le robots.txt Soumettre le sitemap dans Google Search Console lors de la mise en production
Avis / fiches Aucune fiche d'établissement créée (hors périmètre lab) Créer la fiche en production ; réponse aux avis par Léo Martin sous 48 h, ton courtois et factuel
Outil d'alerte Non créé en lab À mettre en production (alerte sur le nom « Solutech »)

Ce que ça démontre : Le footer légal, le bandeau de consentement et la politique de réponse en ligne sont en place, ce qui assure la conformité LCEN / RGPD du site et la maîtrise de l'image de Solutech.

Preuve 9 : Plan de tests et PV de recette

Annexe vérifiable : Recette — 8 tests et PV Go/No-Go

Légende : Capture du document de recette contenant 6 tests d'intégration (T01 à T06 : services actifs, site et back-office accessibles, charte et navigation, SEO avec sitemap et robots.txt, Matomo) et 2 tests d'acceptation (U01 : Léo Martin publie un article en suivant le guide et le retrouve sur la page Actualités ; U02 : un visiteur accède au footer légal, au bandeau cookies et au formulaire de contact, avec preuve dans Flamingo). Le PV indique le nombre de tests réussis et la décision Go/No-Go, et porte la signature du client (formateur) après contrôle.

Ce que ça démontre : Huit tests exécutés et un PV signé valident formellement la mise en service du site auprès du client.

Preuve 10 : Guide utilisateur

Annexe vérifiable : Guide utilisateur — 1 page

Légende : Capture du guide d'une page destiné à Léo Martin et à l'équipe non technicienne, organisé en 5 rubriques : se connecter au back-office, publier une actualité, modifier une page, consulter les statistiques Matomo et contacter le support en cas de problème. Le guide a été rédigé avant les tests, puisque le test d'acceptation U01 consiste justement à le suivre pour publier un article.

Ce que ça démontre : Un guide d'une page rend les utilisateurs autonomes sur la publication de contenu et réduit les sollicitations du support.