Documentation · Configuration & Déploiement
Configuration & Déploiement
Dev local, Git, Cloudflare Pages, Formspree, Brevo, Analytics, Search Console. Tout ce qu'il faut pour mettre le site en production et le maintenir opérationnel.
Cloudflare Pages
GitHub
Formspree · Brevo
01
Développement local
⚠
Ne JAMAIS ouvrir les fichiers HTML directement avec
file://. Le fetch des fichiers i18n JSON est bloqué par la politique Same-Origin du navigateur. Toujours utiliser un serveur HTTP local.Option A — Python
cd truvector-v3/
python -m http.server 8080
# → http://localhost:8080
Aucune installation. Python 3 requis (pré-installé sur macOS/Linux).
Option B — Node.js serve
npx serve .
# → http://localhost:3000
Node.js requis. Téléchargement unique de serve via npx.
Option C — VS Code
Extension Live Server (ritwickdey.liveserver). Clic droit sur index.html → Open with Live Server. Rechargement automatique à chaque sauvegarde.
Vérifications rapides
# Syntaxe JS
node --check assets/js/components.js
node --check assets/js/main.js
# Accolades CSS équilibrées
python3 -c "c=open('assets/css/truvector.css').read();print('OK' if c.count('{') == c.count('}') else 'ERREUR')"
# Test calcul root path
node -e "
['/', '/index.html', '/legal/x.html', '/products/ironlock/x.html'].forEach(p => {
const s = p.split('/').filter(Boolean);
const d = Math.max(0, s.length - 1);
const r = d === 0 ? './' : '../'.repeat(d);
console.log(p.padEnd(35), '->', r);
});
"
02
Git & GitHub
Workflow quotidien
# Vérifier les changements
git status
git diff
# Committer et déployer
git add .
git commit -m "feat: description courte"
git push origin main
# → Cloudflare Pages déploie automatiquement
Convention commits
| Préfixe | Usage | Exemple |
|---|---|---|
| feat: | Nouvelle fonctionnalité | feat: ajout article blog fingerprint |
| fix: | Correction de bug | fix: navbar invisible thème light |
| content: | Mise à jour contenu | content: mise à jour changelog v2.1 |
| style: | CSS/design uniquement | style: amélioration contraste light |
| config: | Configuration | config: ajout endpoint Formspree |
| docs: | Documentation | docs: mise à jour README |
Branches recommandées
main ← Production (déploiement auto)
dev ← Développement en cours
feature/xxx ← Fonctionnalité spécifique
# Travailler sur une feature
git checkout -b feature/blog-article-fingerprint
# ... développement ...
git checkout main
git merge feature/blog-article-fingerprint
git push
.gitignore recommandé
# Système
.DS_Store
Thumbs.db
*.log
# IDE
.vscode/
.idea/
# Node (si utilisé pour tests)
node_modules/
03
Setup Cloudflare Pages
1
Créer le projet Cloudflare Pages
- Dashboard Cloudflare → Pages → Create a project
- Connect to Git → GitHub → Autoriser l'accès
- Sélectionner le repo
truvector-site - Framework preset :
None - Build command : (vide)
- Build output directory :
/(racine) - Cliquer Save and Deploy
2
Vérifier le premier déploiement
URL de preview générée automatiquement :
truvector.pages.dev (ou similaire). Tester : logo, navbar, thèmes, liens.
3
Configurer le domaine custom
Voir section Domaine custom.
4
Activer l'observabilité
Dans
wrangler.jsonc, "observability": {"enabled": true} est déjà configuré. Vérifier dans le dashboard : Pages → truvector → Observability.
✓
Après configuration, chaque
git push origin main déclenche automatiquement un déploiement Cloudflare Pages. Délai habituel : 30 à 90 secondes.
04
Domaine custom truvector.dev
1
Ajouter le domaine dans Cloudflare Pages
Dashboard → Pages → truvector → Custom domains → Add custom domain →
truvector.dev.2
Configurer les DNS
Si le domaine est déjà géré par Cloudflare DNS :
# Cloudflare ajoute automatiquement le CNAME :
truvector.dev → truvector.pages.dev (CNAME, proxied)
Si le domaine est chez un autre registrar, pointer les nameservers vers Cloudflare ou ajouter manuellement le CNAME.
3
Vérifier HTTPS automatique
Cloudflare génère automatiquement un certificat SSL Let's Encrypt. Attendre 5-15 minutes. Vérifier
https://truvector.dev.4
Redirect www → apex
Dans Cloudflare DNS, ajouter un CNAME
www → truvector.dev (proxied). Cloudflare gère la redirection automatiquement.
05
Headers HTTP & Cache (_headers)
/* ← Toutes les pages
X-Frame-Options: SAMEORIGIN ← Iframes internes OK
X-Content-Type-Options: nosniff ← Anti-MIME sniffing
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()
X-XSS-Protection: 1; mode=block
/assets/* ← JS, CSS, images
Cache-Control: public, max-age=31536000, immutable ← 1 an
/*.html ← Pages HTML
Cache-Control: public, max-age=3600, must-revalidate ← 1 heure
/sitemap.xml
Cache-Control: public, max-age=86400 ← 24 heures
⚠
Ne pas utiliser X-Frame-Options: DENY — cela bloque
truvector-promo.html chargée en iframe sur la page d'accueil. SAMEORIGIN permet les iframes du même domaine uniquement.À propos du cache des assets
max-age=31536000, immutable (1 an) signifie que le navigateur ne rechargera jamais les assets une fois en cache. C'est optimal pour la performance, mais si tu modifies truvector.css sans changer son nom, les utilisateurs qui ont l'ancienne version en cache ne verront pas les changements pendant 1 an.
Solution : Pour une mise à jour critique du CSS ou JS, renommer le fichier (ex: truvector-v3.1.css) et mettre à jour toutes les références HTML.
06
Redirections (_redirects)
# Format : /source /destination code_HTTP
/products/ironlock /products/ironlock/index.html 301
/blog /blog/index.html 301
/downloads /downloads/index.html 301
/index.html / 301
# Ajouter vos propres redirections :
# /ancienne-url /nouvelle-url 301
# /ironlock /products/ironlock/index.html 301
💡
Cloudflare Pages supporte jusqu'à 100 redirections dans
_redirects. Pour des cas plus complexes (regex, headers conditionnels), utiliser un Cloudflare Worker.
07
Formspree — Formulaires de contact
1
Créer un compte Formspree
formspree.io → Sign up. Plan gratuit : 50 soumissions/mois.
2
Créer un formulaire
Dashboard → New Form → Nommer "TRUvector Contact" → Copier l'endpoint :
https://formspree.io/f/XXXXXXXX3
Configurer contact.html
<!-- contact.html, ligne ~50 -->
<form id="contact-form"
action="https://formspree.io/f/XXXXXXXX"
method="POST">
4
Configurer pricing.html
<!-- pricing.html, ligne ~60 -->
<form id="pricing-form"
action="https://formspree.io/f/XXXXXXXX"
method="POST">
<!-- Peut être le même endpoint ou un endpoint dédié -->
5
Configurer les notifications email
Dans Formspree Dashboard → Form Settings → Notifications → Email to :
contact@truvector.dev. Configurer aussi le sujet et le spam filter.6
Tester le formulaire
Soumettre un message de test. Vérifier la réception email. Vérifier l'affichage du message de confirmation vert dans la page.
ℹ
Le champ honeypot
<input name="_gotcha" style="display:none"> est présent dans les deux formulaires. Formspree l'utilise pour filtrer les bots automatiquement.
08
Brevo — Newsletter
1
Créer un compte Brevo
brevo.com → Plan gratuit : 300 emails/jour, contacts illimités.
2
Récupérer la clé API et l'ID de liste
Settings → API Keys → Copier la clé. Contacts → Lists → Créer une liste "TRUvector Newsletter" → Copier l'ID (ex: 5).
3
Modifier main.js — handler newsletter
// Dans assets/js/main.js
// Remplacer le handler newsletter par :
document.addEventListener('submit', async e => {
const form = e.target;
if (!form.id?.includes('newsletter')) return;
e.preventDefault();
const email = form.querySelector('input[type=email]')?.value;
if (!email) return;
try {
const resp = await fetch('https://api.brevo.com/v3/contacts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'api-key': 'VOTRE_CLE_API_BREVO'
},
body: JSON.stringify({
email: email,
listIds: [5], ← Remplacer par votre LIST_ID
updateEnabled: true
})
});
if (resp.ok || resp.status === 204) {
// Afficher le message de succès
}
} catch (err) {
console.error(err);
}
form.reset();
});
⚠
Sécurité : Ne jamais committer la clé API Brevo dans Git. Utiliser une variable d'environnement Cloudflare Pages ou une solution de proxy Worker. La clé API Brevo en dur dans le JS frontend est accessible à tous.
09
Configuration des téléchargements
Option A — GitHub Releases (recommandé)
# URL format GitHub Releases :
https://github.com/clode666/[repo]/releases/
download/v2.0/ironlock-v2.0-windows-x64.zip
# Avantages :
# - Gratuit et illimité
# - Historique versions automatique
# - SHA-256 vérifiable via GitHub UI
# - Téléchargements comptabilisés
Option B — Cloudflare R2
# URL format R2 public bucket :
https://pub-XXXX.r2.dev/
ironlock-v2.0-windows-x64.zip
# Avantages :
# - Bandwidth gratuit (egress = 0€)
# - Signed URLs pour accès payant futur
# - Même infra que Cloudflare Pages
10
Analytics & Monitoring
Cloudflare Web Analytics
Activé automatiquement par Cloudflare Pages. Accès depuis le dashboard.
Données disponibles : Visiteurs uniques, pages vues, pays, navigateurs, Core Web Vitals (CLS, FCP, LCP, FID), bande passante.
Conformité RGPD : Zéro cookie, zéro fingerprinting. Conforme sans bannière de cookies.
Accès : Dashboard Cloudflare → Pages → truvector → Analytics
Erreurs console navigateur
Erreurs normales à ignorer (non bloquantes) :
beacon.min.js CORS— Analytics Cloudflare bloqué par Firefox Enhanced Tracking Protection. Non bloquant.sha512 integrity mismatch— Idem, script analytics Cloudflare injecté automatiquement.babel.min.js.map 404— Source map manquante danstruvector-promo.html. Cosmétique.truvector-cube.png 404— Image manquante danstruvector-promo.html. À corriger ou ignorer.
11
Google Search Console
1
Vérifier le domaine
Google Search Console → Add Property → Domaine :
truvector.dev. Méthode de vérification recommandée : DNS TXT record (via Cloudflare).2
Soumettre le sitemap
Sitemaps → Add sitemap →
https://truvector.dev/sitemap.xml. Google commencera l'indexation sous 24-72h.3
Vérifier l'indexation
URL Inspection → coller une URL → Vérifier que Google l'a bien indexée. Si non, demander l'indexation manuellement.
12
Rollback
Via Cloudflare Pages (le plus rapide)
1
Ouvrir le dashboard
Dashboard → Pages → truvector → Deployments
2
Trouver la version précédente
La liste montre tous les déploiements avec date, hash Git et statut. Identifier la dernière version stable.
3
Rollback en 1 clic
Cliquer sur le déploiement → Rollback to this deployment. Effet immédiat (< 30 secondes).
Via Git (rollback permanent)
# Voir les commits récents
git log --oneline -10
# Revenir au commit précédent (conserve l'historique)
git revert HEAD
git push
# Revenir en force (détruit l'historique — à éviter)
git reset --hard HEAD~1
git push --force-with-lease
⚠
Préférer le rollback Cloudflare (1 clic) au git reset --force. Le rollback Cloudflare ne touche pas à l'historique Git.
13
Checklist de lancement complet
✅ Déjà fait (V3)
Cloudflare Pages connecté au repo GitHub
Domaine truvector.dev configuré + HTTPS
_headers sécurité configurés
_redirects configurés
sitemap.xml et robots.txt présents
OG tags et canonical sur toutes les pages
Schema.org JSON-LD sur index + IronLock + Blog
Thèmes Dark/Light/Contrast fonctionnels
i18n FR/EN fonctionnel
Recherche Ctrl+K fonctionnelle
⬜ À faire
Configurer endpoint Formspree dans contact.html
Configurer endpoint Formspree dans pricing.html
Brancher Brevo newsletter dans main.js
Ajouter vrais liens de téléchargement (downloads/index.html)
Mettre les SHA-256 réels dans downloads/index.html
Compléter mentions-legales.html (SIRET, adresse)
Soumettre sitemap à Google Search Console
Remplacer contact@truvector.dev dans contact.html
Rédiger les 5 articles de blog manquants
Tester formulaires contact en production