---
title: VertiWiki — Moteur de Wiki Markdown 100% Statique, Fichier Unique, Sans Backend
description: Zéro serveur Node.js, zéro compilation, rendu instantané côté client avec Marked v15, DOMPurify, bascule de thèmes sur GPU et optimisation IA native (AEO).
tags: [vertiwiki, documentation, moteur, markdown-wiki, sans-backend, fichier-unique, aeo, static-wiki]
layout: landing
contentWidth: full
---

# VertiWiki

> Pour l'index complet de la documentation et la navigation des agents, consultez [llms.txt](/llms.txt).

<div class="landing-page">

<!-- =========================================================
HERO SECTION
========================================================= -->
<section class="hero-wrap">
<div class="landing-container">
<div class="hero-meta-bar">
<span class="hero-status-dot"></span>
<span>Zéro Runtime Serveur &bull; Pipeline 100% Navigateur &bull; Bundle Autonome 4 Mo</span>
</div>

<h1 class="hero-heading">
100% Statique, Fichier Unique
<span class="accent-gradient">Moteur de Wiki &amp; Documentation</span>
</h1>

<p class="hero-lead-text">
Déposez simplement un fichier autonome <code>index.html</code> à côté de vos fichiers Markdown. Aucun pipeline de compilation Node.js, aucune base de données et aucune commande de reconstruction. Compilation instantanée côté client avec Marked v15, DOMPurify, KaTeX, Prism, Mermaid et gestion dynamique des thèmes sur GPU.
</p>

<div class="hero-cta-group">
<a href="quickstart.md" class="btn-hero-primary">
<span>Démarrer en 5 Minutes</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a>
<a href="concepts/architecture.md" class="btn-hero-secondary">
<span>Explorer l'Architecture</span>
</a>
</div>
<div class="hero-quick-command">
<span class="cmd-prefix">$</span>
<code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code>
</div>
</div>
</section>

<!-- =========================================================
DOCUMENTATION HUB (6 INTERACTIVE SECTIONS)
========================================================= -->
<section class="landing-section" id="hub">
<div class="landing-container">
<span class="section-eyebrow">Centre de Documentation</span>
<h2 class="section-title">Accès Direct aux Guides d'Ingénierie</h2>
<p class="section-desc">
Explorez des tutoriels pas à pas, des schémas d'architecture, des runbooks opérationnels et le catalogue API complet.
</p>

<div class="hub-grid">
<a href="quickstart.md" class="hub-card">
<div class="hub-card-icon">🚀</div>
<div class="hub-card-title">
<span>Démarrage Rapide</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Guide pratique en 5 minutes avec exemples de code exécutables, configurations rapides et modèles minimaux.</p>
</a>

<a href="concepts/architecture.md" class="hub-card">
<div class="hub-card-icon">🏛️</div>
<div class="hub-card-title">
<span>Architecture Système</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Explorez le pipeline côté client sans backend, les machines à états et la topologie C4.</p>
</a>

<a href="configuration/overview.md" class="hub-card">
<div class="hub-card-icon">⚙️</div>
<div class="hub-card-title">
<span>Guide de Configuration</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Découvrez tous les paramètres de schéma, les modes d'affichage, l'i18n et l'image de marque.</p>
</a>

<a href="operations/runbook.md" class="hub-card">
<div class="hub-card-icon">🛠️</div>
<div class="hub-card-title">
<span>Opérations &amp; Runbooks</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Procédures d'hébergement sur Cloudflare Pages, AWS CloudFront, Vercel et diagnostics en production.</p>
</a>

<a href="reference/api.md" class="hub-card">
<div class="hub-card-icon">📖</div>
<div class="hub-card-title">
<span>Catalogue API TypeScript</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Signatures TypeScript complètes, tableaux détaillés de paramètres, hooks et interfaces limites.</p>
</a>

<a href="concepts/workflows.md" class="hub-card">
<div class="hub-card-icon">🔄</div>
<div class="hub-card-title">
<span>Flux d'Exécution</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Flux complet requête-réponse, routage, assainissement DOM et diagrammes de séquence d'hydratation.</p>
</a>
</div>
</div>
</section>

<!-- =========================================================
ARCHITECTURAL BLUEPRINT (THE 6 PILLARS)
========================================================= -->
<section class="landing-section landing-section-subtle" id="blueprint">
<div class="landing-container">
<span class="section-eyebrow">Architecture Technique</span>
<h2 class="section-title">Conçu pour la Pérennité &amp; la Vitesse</h2>
<p class="section-desc">
Six piliers architecturaux fondamentaux qui éliminent la complexité de backend et garantissent la fiabilité à long terme.
</p>

<div class="blueprint-grid">
<div class="blueprint-card">
<span class="blueprint-num">01 / RUNTIME CÔTÉ CLIENT</span>
<h3 class="blueprint-title">Zéro Backend &amp; Zéro Compilation</h3>
<p class="blueprint-body">
Aucun pipeline serveur, aucun processus Node.js et aucune commande de reconstruction. Déposez <code>index.html</code> dans n'importe quel dossier et diffusez statiquement.
</p>
<span class="blueprint-tag">DOMPurify &bull; Marked v15 &bull; Routeur SPA</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">02 / BUNDLE FICHIER UNIQUE</span>
<h3 class="blueprint-title">Distribution Autonome en Fichier Unique</h3>
<p class="blueprint-body">
Compilé via Vite 6 avec <code>vite-plugin-singlefile</code>. Marked v15, DOMPurify, KaTeX, Prism et Mermaid sont tous intégrés dans un bundle autonome de 4 Mo.
</p>
<span class="blueprint-tag">Zéro Modules Node &bull; Portable Hors Ligne</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">03 / PÉRIMÈTRE DE SÉCURITÉ</span>
<h3 class="blueprint-title">Défense en Profondeur</h3>
<p class="blueprint-body">
L'isolation automatique des iframes impose <code>allow-presentation</code> tout en bloquant les tentatives d'évasion de cadre. Les protocoles dangereux sont purgés.
</p>
<span class="blueprint-tag">DOMPurify Stricte &bull; Invariant Zéro-XSS</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">04 / AEO &amp; DÉCOUVERTE D'AGENTS</span>
<h3 class="blueprint-title">Arborescence Sémantique de Crawl &amp; AEO</h3>
<p class="blueprint-body">
L'arbre sémantique intégré permet une indexation instantanée par Googlebot sans SSR, combiné aux microdonnées dynamiques Schema.org <code>TechArticle</code> et <code>llms.txt</code>.
</p>
<span class="blueprint-tag">AgentDocsSpec &bull; llms.txt &bull; JSON-LD</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">05 / MOTEUR DE THÈMES SUR GPU</span>
<h3 class="blueprint-title">Thèmes Découplés &amp; 11 Préréglages</h3>
<p class="blueprint-body">
Permute les variables CSS sur <code>document.documentElement</code> en moins d'1ms sans rechargement. Supporte les fichiers JSON externes via le dossier <code>themes/</code>.
</p>
<span class="blueprint-tag">11 Préréglages &bull; Obsidian &bull; Editorial &bull; Nord</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">06 / RECHERCHE EN MÉMOIRE</span>
<h3 class="blueprint-title">Recherche Instantanée Côté Client (&fnof;K)</h3>
<p class="blueprint-body">
Recherche ultrarapide en mémoire avec MiniSearch. Inclut la recherche floue (fuzzy), la tokenisation automatique, les raccourcis clavier (<code>&fnof;K</code> ou <code>/</code>) et le filtrage par langue.
</p>
<span class="blueprint-tag">MiniSearch &bull; Moins d'une ms &bull; Latence Zéro</span>
</div>
</div>
</div>
</section>

<!-- =========================================================
DETERMINISTIC 10-STEP PIPELINE
========================================================= -->
<section class="landing-section" id="pipeline">
<div class="landing-container">
<span class="section-eyebrow">Architecture du Cycle de Vie</span>
<h2 class="section-title">Pipeline de Rendu Déterministe en 10 Étapes</h2>
<p class="section-desc">
Comment VertiWiki transforme le Markdown brut en une interface de documentation interactive et sécurisée en quelques millisecondes.
</p>

<div class="pipeline-grid">
<div class="pipeline-step">
<span class="pipeline-index">01</span>
<div class="pipeline-details">
<h4>Analyse du Hash &amp; Paramètres de Requête</h4>
<p>Résout <code>#/chemin.md</code> ou le paramètre <code>?page=</code> pour les réécritures de négociation de contenu.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">02</span>
<div class="pipeline-details">
<h4>Récupération Asynchrone des Ressources</h4>
<p>Télécharge le fichier Markdown via <code>fetch()</code> avec résolution déterministe des sous-dossiers et repli 404.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">03</span>
<div class="pipeline-details">
<h4>Analyse du Frontmatter YAML</h4>
<p>Extrait les métadonnées d'en-tête, l'auteur, les étiquettes personnalisées et les surcharges de thème/layout.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">04</span>
<div class="pipeline-details">
<h4>Hooks de Cycle de Vie beforeParse</h4>
<p>Traite les macros personnalisées, y compris les onglets de code (<code>::: tabs</code>), détails repliables et badges.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">05</span>
<div class="pipeline-details">
<h4>Compilation Marked v15 &amp; DOMPurify</h4>
<p>Compile CommonMark + GFM et applique un assainissement strict Zéro-XSS avec bac à sable d'iframes.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">06</span>
<div class="pipeline-details">
<h4>Hooks de Cycle de Vie afterParse</h4>
<p>Permet aux extensions d'inspecter ou de modifier le HTML sécurisé avant son injection dans le DOM.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">07</span>
<div class="pipeline-details">
<h4>Montage dans le DOM &amp; Résolution de Liens</h4>
<p>Injecte le HTML dans <code>#verti-app</code> et réécrit les chemins relatifs (<code>../guide.md</code> &rarr; <code>#/guides/guide.md</code>).</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">08</span>
<div class="pipeline-details">
<h4>Plugins afterRender</h4>
<p>Initialise la coloration syntaxique Prism, les formules KaTeX, les diagrammes Mermaid et le zoom d'images.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">09</span>
<div class="pipeline-details">
<h4>Table des Matières (TOC) &amp; Scrollspy</h4>
<p>Construit l'arborescence des titres et active <code>IntersectionObserver</code> pour le suivi de la section active.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">10</span>
<div class="pipeline-details">
<h4>Indexation de Recherche &amp; Microdonnées AEO</h4>
<p>Indexe les tokens dans MiniSearch et met à jour les microdonnées Schema.org <code>TechArticle</code> JSON-LD.</p>
</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
TECHNICAL COMPARISON MATRIX
========================================================= -->
<section class="landing-section landing-section-subtle" id="comparison">
<div class="landing-container">
<span class="section-eyebrow">Comparaison Technique</span>
<h2 class="section-title">Pourquoi les Développeurs Choisissent VertiWiki</h2>
<p class="section-desc">
Voyez comment VertiWiki se compare aux générateurs de sites statiques classiques et aux wikis traditionnels.
</p>

<div class="comparison-wrap">
<table class="matrix-table">
<thead>
<tr>
<th>Caractéristique Architecturale</th>
<th class="col-verti">Standard VertiWiki</th>
<th>SSG Traditionnels (Docusaurus, VitePress)</th>
<th>Wikis Classiques (DokuWiki, MediaWiki)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Modèle d'Hébergement</strong></td>
<td class="col-verti">100% Statique (Serveur HTTP, CDN, S3, Git Pages)</td>
<td>Artefact de build statique (Nécessite CI/CD)</td>
<td>Serveur PHP / Node / Base de données</td>
</tr>
<tr>
<td><strong>Mise à Jour du Contenu</strong></td>
<td class="col-verti">0s (Actualisation immédiate à l'édition de .md)</td>
<td>30s - 3min (Recompilation CI/CD &amp; déploiement)</td>
<td>Écriture directe en BDD ou verrou de fichier</td>
</tr>
<tr>
<td><strong>Moteur de Recherche</strong></td>
<td class="col-verti">MiniSearch côté client (Latence nulle)</td>
<td>Algolia DocSearch ou JSON volumineux</td>
<td>Recherche SQL côté serveur</td>
</tr>
<tr>
<td><strong>Diagrammes &amp; Formules</strong></td>
<td class="col-verti">Mermaid &amp; KaTeX natifs côté client</td>
<td>Plugins et transformations au build</td>
<td>Extensions serveur (Mathoid, Graphviz)</td>
</tr>
<tr>
<td><strong>Surface d'Attaque</strong></td>
<td class="col-verti">Isolation stricte DOMPurify, zéro vecteur serveur</td>
<td>Risque sur la chaîne de paquets npm au build</td>
<td>Injections SQL, failles PHP</td>
</tr>
<tr>
<td><strong>Optimisation IA Autonome</strong></td>
<td class="col-verti">Natif llms.txt + Schema.org JSON-LD</td>
<td>Intégration manuelle requise</td>
<td>Inexistante</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

<!-- =========================================================
QUICKSTART (3 STEPS)
========================================================= -->
<section class="landing-section" id="quickstart">
<div class="landing-container">
<span class="section-eyebrow">Démarrage</span>
<h2 class="section-title">Prêt en 3 Étapes Simples</h2>
<p class="section-desc">
Aucun pipeline de build Node.js complexe et aucune base de données requise.
</p>

<div class="quickstart-steps">
<div class="qs-step-card">
<span class="qs-step-num">ÉTAPE 01</span>
<h3 class="qs-step-title">Rédigez le Contenu en Markdown</h3>
<p class="qs-step-desc">
Créez votre fichier <code>index.md</code>, vos sous-dossiers (ex. <code>concepts/</code>) et votre menu dans <code>navigation.md</code>.
</p>
<div class="qs-code-box">mkdir -p my-wiki &amp;&amp; touch index.md navigation.md</div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">ÉTAPE 02</span>
<h3 class="qs-step-title">Téléchargez le Moteur</h3>
<p class="qs-step-desc">
Téléchargez le bundle autonome précompilé directement depuis les releases GitHub dans votre dossier racine.
</p>
<div class="qs-code-box"><code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code></div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">ÉTAPE 03</span>
<h3 class="qs-step-title">Déployez &amp; Hébergez N'importe Où</h3>
<p class="qs-step-desc">
Déployez sur GitHub Pages, Cloudflare Pages, S3 ou testez en local avec n'importe quel serveur HTTP statique.
</p>
<div class="qs-code-box">npx serve . # ou python3 -m http.server</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
FREQUENTLY ASKED QUESTIONS
========================================================= -->
<section class="landing-section landing-section-subtle" id="faq">
<div class="landing-container">
<span class="section-eyebrow">Foire Aux Questions</span>
<h2 class="section-title">Éclaircissements Techniques</h2>
<p class="section-desc">
Réponses aux questions architecturales sur l'exécution côté client, la sécurité, l'indexation et les performances.
</p>

<div class="faq-grid">
<details class="faq-item">
<summary class="faq-summary">
<span>Comment fonctionne VertiWiki sans compilation sur serveur ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki s'exécute à 100% dans le navigateur du client. Lorsqu'une page est demandée, il télécharge le fichier Markdown brut via <code>fetch()</code>, extrait le frontmatter YAML, applique les hooks du pipeline, compile avec Marked v15, assainit avec DOMPurify et monte le résultat dans le DOM en moins de 2 millisecondes.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Comment fonctionne la résolution des liens relatifs dans les sous-dossiers ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki intègre un transformateur automatique de liens (<code>router.transformLinks()</code>) qui calcule les chemins relatifs selon l'emplacement du fichier actif, garantissant que les liens Markdown et les images s'affichent fidèlement quelle que soit la profondeur de l'arborescence.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>En quoi l'optimisation AEO aide-t-elle les agents et robots IA ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
À chaque changement de page, VertiWiki génère automatiquement des microdonnées Schema.org <code>TechArticle</code> et <code>BreadcrumbList</code> en JSON-LD, met à disposition l'index structuré <code>llms.txt</code> conforme à la spécification AgentDocsSpec et propose un bouton dédié de copie Markdown pour les agents IA.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>VertiWiki peut-il fonctionner complètement hors ligne ou en réseau isolé ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Oui. Toutes les feuilles de style, polices WOFF2, formules KaTeX et bibliothèques Mermaid sont intégrées directement dans le fichier <code>index.html</code>. Avec un serveur statique local (ex. <code>python3 -m http.server</code>), il fonctionne à 100% sans connexion internet.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Comment créer et charger des préréglages de thèmes personnalisés ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Créez des fichiers JSON dans le dossier <code>themes/</code> définissant les variables CSS pour les modes clair et sombre. Enregistrez-les dans <code>config.json</code> sous <code>"customThemes"</code> et ils deviennent immédiatement sélectionnables sans compilation de code.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Comment les moteurs de recherche indexent-ils VertiWiki sans SSR ?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki intègre un <strong>Arbre Sémantique de Crawl</strong> directement dans le shell HTML initial. Les robots de recherche comme Googlebot découvrent des liens hypertextes classiques vers chaque document dès la première requête HTTP.
</div>
</details>
</div>
</div>
</section>

<!-- =========================================================
BOTTOM CALL TO ACTION
========================================================= -->
<section class="landing-section">
<div class="landing-container">
<div class="bottom-cta-box">
<h2 class="bottom-cta-title">Prêt à Découvrir la Documentation Zero-Backend ?</h2>
<p class="bottom-cta-desc">
Explorez le portail de documentation VertiWiki directement dans votre navigateur ou inspectez le code source sur GitHub.
</p>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
<a href="quickstart.md" class="btn-hero-primary">Ouvrir la Documentation</a>
<a href="https://github.com/Octadira/vertiwiki" target="_blank" rel="noopener noreferrer" class="btn-hero-secondary">Dépôt GitHub</a>
</div>
</div>
</div>
</section>

<!-- =========================================================
RICH SITE FOOTER
========================================================= -->
<footer class="site-footer">
<div class="landing-container">
<div class="footer-grid">
<div class="footer-brand">
<h3>
<img src="../assets/logo.svg" width="22" height="22" alt="Logo VertiWiki" />
<span>VertiWiki</span>
</h3>
<p>
Moteur de wiki et documentation Markdown 100% statique, en un seul fichier, conçu pour 2026 et au-delà.
</p>
</div>

<div class="footer-col">
<h4>Documentation</h4>
<ul>
<li><a href="quickstart.md">Démarrage Rapide en 5 Minutes</a></li>
<li><a href="installation.md">Installation &amp; Hébergement</a></li>
<li><a href="concepts/architecture.md">Aperçu de l'Architecture</a></li>
<li><a href="configuration/overview.md">Configuration &amp; Thèmes</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Ingénierie &amp; API</h4>
<ul>
<li><a href="reference/api.md">Catalogue API TypeScript</a></li>
<li><a href="reference/boundary-interfaces.md">Interfaces Limites</a></li>
<li><a href="guides/development.md">Guide de Développement</a></li>
<li><a href="configuration/security.md">Sécurité &amp; Politiques CSP</a></li>
<li><a href="sitemap.md">Plan Visuel du Site</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Open Source</h4>
<ul>
<li><a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">Licence MIT</a></li>
<li><a href="../llms.txt" target="_blank">Index llms.txt</a></li>
<li><a href="../robots.txt" target="_blank">robots.txt</a></li>
<li><a href="Changelog.md">Notes de Version</a></li>
</ul>
</div>
</div>

<div class="footer-bottom">
<div>&copy; 2026 Contributeurs VertiWiki. Publié sous Licence MIT.</div>
<div>Conçu pour 2026 et au-delà &bull; Propulsé par VertiWiki</div>
</div>
</div>
</footer>

</div>
