Comment fabriquer un site web (et le mettre en ligne)

C'est quoi vraiment un site web ?

Quand tu tapes "byneel.com" dans ton navigateur, la magie opère en coulisse. Démontrons le mécanisme complet.

Le nom de domaine (ton adresse sur internet)

C'est quoi : "byneel.com", "google.fr", "wikipedia.org" — ton nom sur internet. C'est ce que les gens tapent pour te trouver.

Comment l'acheter : Tu vas voir un registrar (un vendeur de noms de domaine) comme OVH, Gandi, Namecheap ou Google Domains. Tu cherches si le nom est disponible, tu paies (entre 5€ et 15€/an pour un .com), et c'est à toi.

La métaphore : C'est l'enseigne de ton magasin. "Boulangerie Dupont" c'est ton nom de domaine. Sans enseigne, les gens passent sans savoir ce que tu vends. Personne va mémoriser "92.168.1.47" — mais "byneel.com" ? Ouais.

Les extensions :

• .com → Le classique. Pour tout le monde.
• .fr → Pour dire "Je suis français".
• .dev → Pour les devs (c'est cool).
• .io → Pour les startups tech (parce que).
• .app → Pour les applications.

DNS (le GPS d'internet)

C'est quoi : Le système qui traduit "byneel.com" en adresse IP (comme 104.21.56.89). Les ordinateurs ne comprennent pas les noms, ils comprennent les chiffres.

La métaphore : Tu dis au chauffeur de taxi "emmène-moi au Louvre" pas "emmène-moi au 99 rue de Rivoli, 75001 Paris". DNS c'est le chauffeur qui connaît toutes les adresses.

Concrètement : Quand tu achètes ton domaine, tu configures les "DNS records" pour dire "quand quelqu'un tape byneel.com, envoie-le à CE serveur". C'est une ligne de config. Ça prend 5 minutes. Ça prend 24h pour se propager dans le monde (le temps que tous les "chauffeurs" mettent à jour leur carnet d'adresses).

Hosting (la maison de ton site)

C'est quoi : Un ordinateur qui tourne 24h/24 et qui sert ton site à tous les visiteurs. Ton site doit VIVRE quelque part — ça ne flotte pas dans le cloud comme par magie.

Les options :

• Vercel → Le #1 pour les sites Next.js (comme le nôtre). Gratuit pour les petits projets. Tu push ton code, il part en ligne en 30 secondes.
• Cloudflare Pages → Ultra-rapide, gratuit, protection DDoS incluse.
• Netlify → Simple, gratuit, bon pour les sites statiques.
• OVH / AWS / DigitalOcean → Pour les projets plus costauds qui ont besoin de serveurs dédiés.

La métaphore : L'hosting c'est l'espace commercial. Vercel c'est un espace de coworking gratuit avec tout inclus (parfait pour démarrer). AWS c'est un immeuble de bureaux — puissant mais tu dois tout gérer. OVH c'est le petit magasin de quartier, tu sais où sont tes données.

SSL / HTTPS (le petit cadenas)

C'est quoi : Le petit cadenas dans ta barre d'adresse. Ça veut dire que la connexion entre toi et le site est encryptée — personne peut espionner ce que tu fais.

La métaphore : C'est une enveloppe scellée vs une carte postale. Sans HTTPS, n'importe qui peut lire ton courrier. Avec HTTPS, seul toi et le destinataire voyez le contenu.

Bonne nouvelle : Tous les providers d'hosting modernes (Vercel, Cloudflare, Netlify) te donnent un certificat SSL gratuit. Rien à faire.

Le code du site (ce qu'il y a dedans)

Un site web moderne a 3 couches :

HTML → La structure. Le squelette. Titres, paragraphes, images, liens. C'est le plan de ta maison.

CSS → Le style. Couleurs, polices, tailles, animations. C'est la décoration intérieure. Le noir + bleu néon de ByNeel ? C'est du CSS.

JavaScript → Le comportement. Interactions, clics, animations dynamiques. C'est l'électricité — ça fait fonctionner les choses.

Et au-dessus de tout ça, on utilise un framework comme Next.js (basé sur React) qui organise tout proprement. Au lieu d'écrire du HTML/CSS/JS à la main, tu écris des composants réutilisables. Le menu hamburger ? Un composant. Chaque projet ? Un composant. Le blog que tu lis ? Un composant.

La métaphore : HTML c'est les briques, CSS c'est la peinture, JavaScript c'est l'électricité, et Next.js c'est l'architecte qui organise le chantier.

Deployment (passer en ligne)

C'est quoi : Quand ton site passe de "ça marche sur mon ordi" à "ça marche pour tout le monde".

Le process avec Vercel (notre setup) :

1. Tu push ton code sur GitHub (git push)
2. Vercel détecte le changement auto
3. Il compile le site (il transforme tout le code en pages HTML optimisées)
4. Il deploy sur des serveurs partout du monde (CDN)
5. En 30 secondes, c'est en ligne

La métaphore : C'est comme un resto avec un chef magique. Tu mets la recette sur la table (git push), le chef la lit (build), la prépare, et la sert en même temps dans 50 restaurants partout du monde (CDN). Tout le monde mange du chaud.

CDN (livraison mondiale)

C'est quoi : Content Delivery Network. Des copies de ton site stockées sur des serveurs partout du monde, pour que le visiteur se connecte toujours au serveur le plus proche.

La métaphore : Au lieu d'avoir une pizzeria à Paris qui livre partout la France, tu as des franchises partout. Le Parisien va à la pizzeria de Paris, le mec de Marseille va à celle de Marseille. Même pizza, livraison plus rapide. Vercel et Cloudflare font ça auto.

SEO (être trouvable sur Google)

C'est quoi : Search Engine Optimization. L'art de faire montrer ton site à Google quand les gens cherchent quelque chose de relevant.

Les bases :

• Des titres qui font sens (pas "Page 1", mais "OmniDrop — transfert de fichier P2P encrypté")
• Du contenu de qualité (Google aime les sites qui répondent à de vraies questions)
• Un site rapide (Google pénalise les sites lents — une autre raison pour laquelle on a enlevé backdrop-filter:blur())
• Un site mobile-friendly (d'où le menu hamburger)
• Des meta tags (info cachée que Google lit mais tu ne vois pas)

La métaphore : C'est comme lister ton magasin sur Google Maps. Si tu as un bon nom, une belle vitrine, de bons avis et une adresse claire — tu apparais en premier quand quelqu'un cherche "boulangerie" dans ton quartier.

Coût total d'un site web

Soyons réalistes :

• Nom de domaine : ~12€/an (.com)
• Hosting Vercel : 0€ (plan gratuit, largement suffisant)
• SSL : 0€ (inclus)
• Framework Next.js : 0€ (open source)
• Le code : 0€ si tu le fais toi-même (ou avec l'IA)

Total : ~12€/an. Ouais, un café par mois. Ce site coûte moins que ton abonnement Netflix.

Recap du voyage

1. Achète un nom de domaine → ~12€/an sur OVH ou Namecheap
2. Configure le DNS → Pointe vers ton hosting
3. Code le site → Avec un framework comme Next.js
4. Push sur GitHub → Sauvegarde ton code
5. Connecte Vercel → Deployment automatique
6. SSL automatique → Petit cadenas gratuit
7. Optimise SEO → Sois trouvable
8. Itère → Améliore constamment

Ce site a passé par toutes ces étapes. La partie la plus dure ? Honnêtement, c'est le contenu. La tech c'est 20% du travail. Les 80% restants c'est écrire, designer et itérer jusqu'à ce que Neel dise "c'est bon, on push".

Un site pour 12€/an qui tourne partout au monde en 30 secondes. On vit vraiment dans des temps incroyables.