Démarrer un projet

Guide complet pour créer un nouveau site, le déployer en production, et adapter le boilerplate selon vos besoins.

Créer un nouveau projet

1. Copier le boilerplate

Dupliquez le dossier site-system/ et renommez-le avec le nom de votre projet :

cp -r site-system/ mon-projet/
cd mon-projet/

2. Personnaliser la charte graphique

Ouvrez core/css/tokens.css et modifiez les variables CSS :

:root {
  /* Couleurs */
  --color-primary: #2563eb;     /* Couleur principale */
  --color-secondary: #7c3aed;   /* Couleur secondaire */
  --color-bg: #ffffff;          /* Fond */
  --color-text: #1e293b;        /* Texte */

  /* Polices */
  --font-sans: 'Inter', sans-serif;
  --font-heading: 'Inter', sans-serif;

  /* Arrondis, espacements, etc. */
}

Voir Design Tokens pour la référence complète.

3. Configurer le site

Éditez config-site.js. Ce fichier centralise la configuration des modules :

COOKIES_CONFIG : IDs analytics (ga4, gtm, clarity, etc.), textes du bandeau RGPD, lien vers la politique de confidentialité
BLOG_CONFIG : connexion Baserow (voir section Site sans blog si non utilisé)
LEGAL_CONFIG : informations légales de l'entreprise (nom, SIRET, adresse, hébergeur, etc.)

Voir Cookies & Analytics pour le détail de chaque champ.

4. Remplir les informations légales

Dans config-site.js, complétez le bloc LEGAL_CONFIG avec vos informations :

window.LEGAL_CONFIG = {
  company: 'Ma Societe SAS',
  legalForm: 'SAS',
  siret: '123 456 789 00000',
  registration: 'RCS Paris',
  representative: 'Jean Dupont',
  address: '123 rue Exemple, 75000 Paris',
  phone: '+33 1 23 45 67 89',
  email: 'contact@monsite.fr',
  website: 'https://monsite.fr',
  hosting: {
    name: 'OVH',
    address: '2 rue Kellermann, 59100 Roubaix',
    url: 'https://www.ovh.com',
    contact: 'https://www.ovh.com/fr/support/'
  },
  developer: {           // Optionnel, masque si name est vide
    name: '', url: '', address: ''
  }
};

Les pages mentions-legales.html et confidentialite.html sont fournies et se remplissent automatiquement avec ces informations. Les champs vides affichent un placeholder [NOM_DU_CHAMP] pour vous aider à identifier les manques.

N'oubliez pas de configurer aussi privacyUrl dans la bannière cookies pour que le lien vers la politique de confidentialité apparaisse dans le bandeau :

banner: {
  privacyUrl: '/confidentialite.html',
  privacyText: 'Politique de confidentialite',
  // ...
}

Important : les textes légaux fournis sont des modèles génériques. Faites-les valider par un professionnel du droit avant mise en production.

Voir Pages légales pour le détail de chaque champ.

5. Composants (header, footer, card)

Chaque composant se configure directement dans le HTML via des attributs data-* (pour les valeurs simples) et des <template data-slot> (pour le contenu HTML riche).

Header : data-site-name, data-logo-link, data-logo-src, slots nav, cta, search
Footer : data-copyright, slot content
Card : data-title, data-text, data-image, data-image-alt, slot footer

Les composants (components/*.js) ne sont à modifier que si vous changez la structure HTML. Voir Composants pour le détail.

6. Créer vos pages

Copiez snippets/page.html comme modèle pour chaque nouvelle page. Structure minimale :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma Page — Mon Site</title>
  <meta name="description" content="Description SEO de la page.">

  <!-- Dark mode + Config (synchrone) -->
  <script src="core/js/darkmode.js"></script>
  <script src="config-site.js"></script>

  <!-- CSS (requis) -->
  <link rel="stylesheet" href="core/css/tokens.css">
  <link rel="stylesheet" href="core/css/base.css">
  <link rel="stylesheet" href="core/css/cookies.css">

  <!-- CSS (optionnel — ajoutez selon vos besoins) -->
  <link rel="stylesheet" href="core/css/animations.css">
  <link rel="stylesheet" href="core/css/elements.css">
  <link rel="stylesheet" href="core/css/forms.css">
  <link rel="stylesheet" href="core/css/grid.css">
  <link rel="stylesheet" href="core/css/icons.css">
  <!-- <link rel="stylesheet" href="core/css/blog.css"> -->

  <!-- Composants (synchrone) -->
  <script src="core/js/components.js"></script>
  <script src="components/header.js"></script>
  <script src="components/footer.js"></script>

  <!-- JS interactifs (defer — ajoutez selon vos besoins) -->
  <script src="core/js/animations.js" defer></script>
  <script src="core/js/elements.js" defer></script>
  <script src="core/js/forms.js" defer></script>
  <script src="core/js/icons.js" defer></script>
  <script src="core/js/params.js" defer></script>
  <script src="core/js/cookies.js" defer></script>
</head>
<body>

  <!-- Header : attributs + slots -->
  <div data-component="header"
       data-site-name="Mon Site"
       data-logo-link="/index.html">
    <template data-slot="nav">
      <a href="/index.html">Accueil</a>
      <a href="/contact.html">Contact</a>
    </template>
  </div>

  <div class="container">
    <!-- Votre contenu ici -->
  </div>

  <!-- Footer : attributs + slots -->
  <div data-component="footer"
       data-copyright="&copy; 2026 Mon Site">
    <template data-slot="content">
      <nav class="footer__links">
        <a href="/mentions-legales.html">Mentions legales</a>
        <a href="/confidentialite.html">Confidentialite</a>
      </nav>
    </template>
  </div>

</body>
</html>

7. Tester en local

Ouvrez le projet avec VS Code + Live Server ou n'importe quel serveur local :

# Option 1 : VS Code Live Server (extension)
# Clic droit sur index.html → "Open with Live Server"

# Option 2 : Python
python3 -m http.server 8000

# Option 3 : Node.js (npx)
npx serve .

Les liens internes utilisent .html pour fonctionner partout (Live Server, file://, etc.). En production, le .htaccess redirige vers des URLs propres.

Git & GitHub

Versionnez votre projet avec Git et hébergez-le sur GitHub pour collaborer, garder un historique, et faciliter le déploiement.

1. Initialiser Git

Dans le dossier de votre projet :

# Initialiser le dépôt Git
git init

# Ajouter tous les fichiers
git add -A

# Premier commit
git commit -m "Initial commit"

2. Créer le dépôt GitHub

Créez un nouveau dépôt sur github.com/new, puis liez-le à votre projet local :

# Lier le dépôt distant
git remote add origin https://github.com/votre-user/votre-projet.git

# Pousser le code
git push -u origin main

L'option -u configure le tracking : les prochains git push n'auront plus besoin de préciser origin main.

3. Workflow quotidien

Les commandes Git que vous utiliserez au quotidien :

# Voir l'état des fichiers modifiés
git status

# Voir les modifications en détail
git diff

# Ajouter tous les fichiers modifiés
git add -A

# Ajouter un fichier spécifique
git add chemin/du/fichier.html

# Créer un commit avec un message descriptif
git commit -m "Add contact page with form validation"

# Pousser sur GitHub
git push

# Récupérer les dernières modifications (si travail en équipe)
git pull

4. Bonnes pratiques commits

Un commit = une modification logique (pas 10 changements différents dans un seul commit)
Messages en anglais, courts et descriptifs : Add, Fix, Update, Remove
Exemples : "Add hero section to homepage", "Fix mobile nav toggle", "Update color tokens"

5. Fichier `.gitignore`

Assurez-vous que les fichiers sensibles ou inutiles ne sont pas versionnés :

# Fichiers à ignorer dans .gitignore
.env
.DS_Store
Thumbs.db
node_modules/
.claude/
data/consents.csv

Mise en production (Hostinger / Apache)

Déployez votre site sur un hébergement Hostinger (ou tout serveur Apache avec accès SSH) via rsync pour des mises à jour rapides et automatiques.

Prérequis

Serveur Apache avec mod_rewrite et mod_headers activés
PHP 7+ (pour api/baserow.php et api/consent.php)
Certificat SSL (Let's Encrypt ou autre)
Accès SSH activé sur l'hébergement (Hostinger : plan Premium ou supérieur)

1. Activer et configurer SSH

Sur Hostinger, allez dans hPanel → Avancé → Accès SSH et notez :

IP du serveur
Port (généralement 65002 chez Hostinger)
Nom d'utilisateur (ex: u123456789)

2. Générer une clé SSH (si pas déjà fait)

# Générer une clé SSH ed25519
ssh-keygen -t ed25519 -C "votre@email.com"

# Appuyer sur Entrée pour accepter le chemin par défaut
# Choisir un mot de passe (ou Entrée pour aucun)

3. Première connexion SSH

Connectez-vous une première fois pour accepter l'empreinte du serveur :

# Remplacez USER, IP et PORT par vos valeurs
ssh -p PORT USER@IP

# Tapez "yes" pour accepter l'empreinte
# Entrez votre mot de passe SSH
# Une fois connecté, tapez "exit" pour revenir en local

4. Copier la clé publique sur le serveur

Pour ne plus avoir à taper le mot de passe à chaque déploiement :

# Copier la clé publique (demande le mot de passe une dernière fois)
ssh-copy-id -p PORT USER@IP

# Vérifier que la connexion fonctionne sans mot de passe
ssh -p PORT USER@IP "echo 'SSH OK'"

5. Identifier le dossier du domaine

Sur Hostinger, chaque domaine a son propre dossier. Connectez-vous en SSH pour le trouver :

ssh -p PORT USER@IP
ls ~/domains/
# Résultat : monsite.fr  autre-site.com  ...
exit

Le chemin de déploiement sera : /home/USER/domains/monsite.fr/public_html/

6. Créer le fichier d'exclusions

Créez un fichier .rsync-exclude à la racine du projet pour lister les fichiers à ne pas envoyer sur le serveur :

# .rsync-exclude

# Git
.git/
.gitignore

# Dev tools
CLAUDE.md
.claude/

# Secrets
.env

# Fichiers de dev
generate-sitemap.js
deploy.sh
.rsync-exclude

# OS files
.DS_Store
Thumbs.db

Note : n'excluez que les fichiers de développement. Les dossiers docs/, wireframes/, snippets/ ou tout autre contenu utile en production doivent être conservés.

7. Créer le script de déploiement

Créez un fichier deploy.sh à la racine du projet :

#!/bin/bash
# Deploy site to production
# Usage: ./deploy.sh [--dry-run]

REMOTE_USER="USER"
REMOTE_HOST="IP"
REMOTE_PORT="PORT"
REMOTE_PATH="/home/USER/domains/monsite.fr/public_html/"
LOCAL_PATH="/chemin/vers/mon-projet/"
EXCLUDE_FILE="${LOCAL_PATH}.rsync-exclude"

# Colors
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'

# Check for --dry-run flag
DRY_RUN=""
if [ "$1" = "--dry-run" ]; then
  DRY_RUN="--dry-run"
  echo -e "${YELLOW}Mode dry-run : aucun fichier ne sera modifie${NC}"
fi

echo -e "${GREEN}Deploiement vers ${REMOTE_HOST}...${NC}"

rsync -avz --delete \
  --exclude-from="$EXCLUDE_FILE" \
  -e "ssh -p ${REMOTE_PORT}" \
  $DRY_RUN \
  "$LOCAL_PATH" \
  "${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}"

if [ $? -eq 0 ]; then
  echo -e "${GREEN}Deploiement termine !${NC}"
else
  echo -e "\033[0;31mErreur lors du deploiement.${NC}"
  exit 1
fi

Rendez le script exécutable :

chmod +x deploy.sh

8. Déployer

# Simuler le déploiement (voir ce qui sera envoyé, sans rien modifier)
./deploy.sh --dry-run

# Déployer pour de vrai
./deploy.sh

Comment ça marche :

rsync ne transfère que les fichiers modifiés (très rapide après le premier déploiement)
--delete supprime sur le serveur les fichiers supprimés en local (synchronisation miroir)
--dry-run simule sans rien modifier, parfait pour vérifier avant de déployer

9. Configurer le fichier `.env` sur le serveur

Le fichier .env n'est pas envoyé par rsync (exclu volontairement). Créez-le directement sur le serveur :

# Se connecter au serveur
ssh -p PORT USER@IP

# Créer le .env dans le dossier du site
cat > ~/domains/monsite.fr/public_html/.env << 'EOF'
SITE_ORIGIN=https://monsite.fr
BASEROW_TOKEN=votre_token_api_ici
BASEROW_URL=https://api.baserow.io
EOF

exit

Ce fichier est automatiquement protégé par le .htaccess (inaccessible depuis le web). SITE_ORIGIN est utilisé par le proxy blog et l'endpoint de consentement pour restreindre les requêtes CORS à votre domaine.

10. Vérifier le `.htaccess`

Le fichier .htaccess fourni gère automatiquement :

HTTPS : redirection HTTP → HTTPS (301)
URLs propres : /blog au lieu de /blog.html
Page 404 : page d'erreur personnalisée
Sécurité : headers de sécurité, accès aux dossiers désactivé, .env protégé
Anti-cache CDN : désactive le cache LiteSpeed/HCDN sur les fichiers CSS, JS et HTML pour que chaque déploiement soit immédiatement visible (headers no-cache, CDN-Cache-Control: no-store, CacheLookup off)

Testez que mod_rewrite fonctionne en accédant à https://votre-site.fr/blog (sans .html).

11. Générer le sitemap

node generate-sitemap.js https://votre-site.fr

Cela crée sitemap.xml et robots.txt avec les URLs propres. Soumettez le sitemap dans Google Search Console.

Récap : workflow complet

Une fois tout configuré, le cycle de développement-déploiement est simple :

# 1. Modifier le code en local (Live Server pour prévisualiser)

# 2. Commiter les changements
git add -A
git commit -m "Update hero section design"

# 3. Pousser sur GitHub
git push

# 4. Déployer en production
./deploy.sh

6. Checklist de lancement

☐ tokens.css : couleurs principales (--color-primary, --color-secondary)
☐ tokens.css : polices personnalisées (--font-heading, --font-body)
☐ tokens.css : arrondis, ombres, conteneur max-width si besoin
☐ Favicon ajouté (<link rel="icon">) dans toutes les pages
☐ Test dark mode : toutes les pages lisibles en mode sombre

Configuration (config-site.js)

☐ COOKIES_CONFIG : IDs analytics renseignés (ou vides si non utilisés)
☐ COOKIES_CONFIG : textes du bandeau cookies adaptés
☐ COOKIES_CONFIG : privacyUrl pointe vers /confidentialite.html
☐ COOKIES_CONFIG : consentEndpoint configuré (/api/consent.php)
☐ BLOG_CONFIG : connexion Baserow renseignée (si blog)
☐ LEGAL_CONFIG : toutes les infos entreprise remplies (company, SIRET, adresse, etc.)
☐ LEGAL_CONFIG : infos hébergeur remplies (nom, adresse, URL)
☐ LEGAL_CONFIG : section développeur remplie ou laissée vide (masquée automatiquement)

☐ mentions-legales.html : ouvrir et vérifier que toutes les infos s'affichent (pas de [...])
☐ confidentialite.html : vérifier le tableau cookies (doit lister les services configurés)
☐ Bouton « Gérer mes préférences cookies » fonctionnel sur la page confidentialité
☐ Bandeau cookies : lien vers la politique de confidentialité visible
☐ Footer de chaque page : liens vers mentions légales et confidentialité
☐ Textes légaux validés par un professionnel du droit
☐ api/consent.php fonctionnel (tester un accept/refus et vérifier data/consents.csv)

☐ Header : logo, navigation finale, liens corrects
☐ Footer : copyright à jour, liens légaux présents
☐ Toutes les balises <title> uniques et descriptives
☐ Toutes les balises <meta description> renseignées
☐ 404.html : texte et lien personnalisés
☐ generate-sitemap.js exécuté avec l'URL finale
☐ robots.txt généré et correct

☐ .env : SITE_ORIGIN renseigné avec l'URL de production
☐ .env : BASEROW_TOKEN renseigné (si blog)
☐ HTTPS actif et fonctionnel
☐ URLs propres fonctionnelles (/blog au lieu de /blog.html)
☐ .htaccess : vérifier que .env est inaccessible depuis le navigateur
☐ data/ : vérifier que le dossier est inaccessible depuis le navigateur
☐ Page 404 accessible (/page-inexistante)

☐ Test mobile : toutes les pages responsive
☐ Test dark mode : lisibilité de toutes les pages
☐ Test bandeau cookies : accepter, refuser, personnaliser
☐ Test pages légales : infos dynamiques correctes
☐ Test blog : listing, article, filtres (si blog actif)
☐ Test 404 : page d'erreur personnalisée
☐ Test formulaires : validation, envoi (si formulaires actifs)
☐ Supprimer les fichiers inutiles du serveur (docs/, .git/, snippets/)

Site sans blog

Si votre site n'a pas besoin de blog, supprimez les fichiers liés et allégez la configuration.

Fichiers à supprimer

# Pages blog
blog.html                  # Page listing
blog/                      # Dossier contenant article.html

# Proxy API
api/                       # Dossier contenant baserow.php

# Fichier environnement (si le blog était le seul usage)
.env

CSS et JS à retirer des pages

Dans chaque fichier HTML, supprimez ces lignes du <head> :

<!-- Supprimer cette ligne CSS -->
<link rel="stylesheet" href="core/css/blog.css">

<!-- Supprimer cette ligne JS -->
<script src="core/js/blog.js" defer></script>

Les fichiers core/css/blog.css et core/js/blog.js peuvent rester dans le dossier core/ sans problème (ils ne seront simplement plus chargés).

Configuration à nettoyer

Dans config-site.js, supprimez ou videz la section BLOG_CONFIG :

/* ---------- BLOG ---------- */
// Supprimez tout ce bloc si pas de blog :
window.BLOG_CONFIG = {
  baserow: { url: '', token: '', tableId: '' },
  perPage: 12,
  dateFormat: 'fr-FR',
  defaultImage: '',
  articlePage: 'blog/article',
  blogPage: 'blog',
};

Navigation à adapter

Retirez le lien « Blog » du slot nav dans le header de chaque page HTML.

Résumé

Action	Fichiers concernés
Supprimer	`blog.html`, `blog/`, `api/`, `.env`
Retirer des `<head>`	`blog.css`, `blog.js`
Nettoyer	`config-site.js` (section BLOG_CONFIG)
Adapter	`components/header.js` (retirer lien Blog)

Modules optionnels

Vous pouvez aussi retirer d'autres modules selon vos besoins. Chaque module est indépendant :

Module	CSS	JS	Requis ?
Tokens + Base	`tokens.css`, `base.css`	—	Oui (toujours)
Composants	—	`components.js`	Oui (header/footer)
Éléments	`elements.css`	`elements.js`	Optionnel
Icônes	`icons.css`	`icons.js`	Optionnel
Grid / Bento	`grid.css`	—	Optionnel
Formulaires	`forms.css`	`forms.js`	Optionnel
Animations	`animations.css`	`animations.js`	Optionnel
Cookies	`cookies.css`	`cookies.js`	Recommandé (RGPD)
Paramètres URL	—	`params.js`	Optionnel
Blog	`blog.css`	`blog.js`	Optionnel
Dark Mode	—	`darkmode.js`	Optionnel
Pages légales	—	`legal.js`	Recommandé (RGPD)

Minimum requis : tokens.css + base.css + components.js + vos composants (header.js, footer.js).

Snippets (copier-coller)

Le dossier snippets/ contient un fichier HTML par élément, prêt à copier-coller dans vos pages. Chaque fichier commence par un bloc commentaire listant toutes les classes, attributs et options disponibles.

Fichier	Contenu
`popup.html`	Popup centré, panneau latéral, bottom sheet, panneau supérieur
`tabs.html`	Tabs basiques + tabs imbriqués
`accordion.html`	Accordion simple + multiple
`slider.html`	Slider avec toutes les options (loop, autoplay, draggable, per-view)
`form.html`	Formulaire simple + multi-step avec validation et conditions
`animations.html`	Animations scroll + clic + SVG
`grid.html`	Grid colonnes + bento layouts
`cookies.html`	Configuration cookies + bandeau RGPD
`darkmode.html`	Toggle dark mode + script à inclure
`page.html`	Page complète (doctype minimal avec tous les CSS/JS prêts)
`icons.html`	Icônes (usage data-icon + options)

Ces fichiers ne sont pas des pages complètes, mais des fragments HTML à intégrer dans vos pages.