L'hébergement de pages statiques - Publie ta pyramide

Tu as construit une pyramide - mais personne ne la verra si elle reste cachée sur ton disque ! Un fichier ouvert depuis ton disque a une adresse qui commence par file://, et celle-ci ne fonctionne que sur ton ordinateur : un lien envoyé à un ami ne lui montrera donc rien. L'hébergement est l'endroit où ta page sera accessible au monde entier via internet. Pour les pages statiques HTML/CSS/JS, il existe des services d'hébergement gratuits.

Qu'est-ce qu'une page statique ?

Une page statique est une page composée de fichiers HTML, CSS et JavaScript déjà prêts. Elle ne nécessite ni serveur backend ni base de données. Le navigateur télécharge les fichiers et les affiche directement. Le serveur ne calcule rien - il remet à tout le monde les mêmes fichiers, comme un scribe qui distribue des copies identiques d'un rouleau, c'est pourquoi ce type d'hébergement est simple et souvent gratuit. Tu découvriras les pages avec connexion ou base de données dans les prochains mondes.

Prépare tes fichiers avant la publication

Avant d'envoyer tes fichiers dans le monde, vérifie trois choses. Premièrement : le <head> de chaque page doit contenir la balise meta viewport, sans laquelle un téléphone affichera une version pour ordinateur en miniature :

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width règle la largeur de la page sur celle de l'écran de l'appareil, et initial-scale=1.0 désactive le dézoom initial. Deuxième point : les chemins relatifs, par exemple images/pyramid.jpg au lieu de /images/pyramid.jpg - sur GitHub Pages, le projet se trouve dans un sous-dossier qui porte le nom du dépôt, si bien qu'un chemin commençant par une barre oblique pointerait au mauvais endroit. Troisième point : les serveurs distinguent les majuscules des minuscules, donc Pyramid.jpg et pyramid.jpg sont deux fichiers différents.

GitHub Pages

GitHub Pages est un hébergement gratuit proposé par GitHub, disponible pour les dépôts publics sur n'importe quel compte. Une solution idéale pour commencer :

Comment publier une page sur GitHub Pages :

1. Crée un dépôt sur GitHub (par ex. ma-pyramide)
2. Téléverse les fichiers HTML, CSS, JS dans le dépôt
3. Va dans Settings -> Pages
4. Sélectionne une branche (branch) - généralement main
5. Clique sur Save
6. Ta page sera accessible à l'adresse : https://ton-login.github.io/ma-pyramide/

La première publication peut prendre quelques minutes, et chaque modification envoyée ensuite dans le dépôt mettra la page à jour automatiquement. Si tu nommes le dépôt exactement ton-login.github.io, la page sera accessible à l'adresse nue https://ton-login.github.io/.

Structure des fichiers pour GitHub Pages :

La règle la plus importante concerne le nom de la page d'accueil. Quand une adresse désigne un dossier plutôt qu'un fichier précis, le serveur y cherche un fichier index.html et l'affiche comme page par défaut :

1<!-- Le fichier doit s'appeler index.html -->
2ma-pyramide/
3  index.html       <!-- Page d'accueil -->
4  style.css        <!-- Styles -->
5  script.js        <!-- JavaScript -->
6  images/          <!-- Dossier des images -->
7    pyramid.jpg
8    sphinx.png

C'est pourquoi une adresse qui se termine par /ma-pyramide/ affiche index.html, et tu ouvres les autres sous-pages en ajoutant le nom du fichier, par exemple about.html. Sans fichier index.html, l'adresse principale n'affichera pas ta page.

Netlify

Netlify est une plateforme d'hébergement moderne avec un plan gratuit. Elle propose :

• Déploiement par glisser-déposer - glisse et dépose un dossier de fichiers
• HTTPS automatique - certificat SSL gratuit
• Domaine personnalisé - tu peux connecter ton propre domaine
• Déploiement continu - déploiement automatique depuis GitHub

Déployer sur Netlify :

1. Va sur app.netlify.com
2. Glisse le dossier de fichiers sur la page
3. C'est fait ! La page est accessible à l'adresse https://nom-aleatoire.netlify.app

Tu peux changer le nom de sous-domaine aléatoire dans les paramètres du projet. Netlify gère aussi les formulaires : une fois un attribut spécial ajouté à un <form>, les envois arrivent dans le tableau de bord, sans que tu aies à écrire ton propre serveur.

Vercel

Vercel est une plateforme créée par les développeurs de Next.js, mais elle fonctionne aussi très bien pour les pages statiques :

• Import depuis GitHub - connecte un dépôt
• Builds automatiques - chaque push = un nouveau déploiement
• Preview deploys - prévisualise les changements avant publication
• HTTPS gratuit - certificat automatique

Pour les branches et les pull requests, Vercel crée des adresses de prévisualisation séparées, si bien que tu peux montrer une modification à ton mentor avant qu'elle n'arrive sur la page principale. Le plan gratuit Hobby est destiné aux projets personnels et non commerciaux.

Comparaison des plateformes

Pour ta première page, je te recommande GitHub Pages : tu t'entraîneras au passage à Git, qui te servira dans chacun des mondes suivants. Choisis Netlify quand tu veux publier un dossier en une minute sans Git, et Vercel quand tu commenceras à construire des applications avec Next.js.

Domaine personnalisé

Chaque plateforme te permet de connecter un domaine personnalisé :

1. Achète un domaine (par ex. chez OVH, Gandi ou Cloudflare)
2. Configure le DNS - définis les enregistrements CNAME ou A
3. Ajoute le domaine dans les paramètres de la plateforme d'hébergement

Un enregistrement CNAME dirige un sous-domaine, par exemple www, vers l'adresse de la plateforme, et les enregistrements A pointent vers les adresses IP de ses serveurs - les valeurs exactes sont indiquées dans la documentation. Les modifications DNS peuvent mettre jusqu'à 24 heures à se propager, et la plateforme émet elle-même le certificat HTTPS. Dans le projet final, tu publieras ainsi la page du musée.

Pratique

Dans l'éditeur ci-dessous, tu trouveras un exemple de structure de fichiers et une comparaison des plateformes. Sers-t'en pour planifier les dossiers de ton propre projet avant de le publier :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Hébergement de pages statiques</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Hébergement de pages statiques</h1>
11
12    <section>
13        <h2>Structure des fichiers à publier</h2>
14        <div class="tree">
15            <pre>
16mon-site/
17  index.html       &lt;-- Page d'accueil
18  about.html       &lt;-- Sous-page
19  css/
20    style.css      &lt;-- Feuille de style
21  js/
22    script.js      &lt;-- Script
23  images/
24    logo.svg       &lt;-- Logo
25    hero.jpg       &lt;-- Image principale
26    favicon.ico    &lt;-- Icône d'onglet
27            </pre>
28        </div>
29    </section>
30
31    <section>
32        <h2>Plateformes d'hébergement</h2>
33
34        <article class="platform">
35            <h3>GitHub Pages</h3>
36            <p>Hébergement gratuit proposé par GitHub.
37               Adresse : <code>login.github.io/repo</code></p>
38            <ul>
39                <li>Intégration avec Git</li>
40                <li>HTTPS automatique</li>
41                <li>Domaine personnalisé</li>
42            </ul>
43        </article>
44
45        <article class="platform">
46            <h3>Netlify</h3>
47            <p>Plateforme moderne avec déploiement par glisser-déposer.
48               Adresse : <code>nom.netlify.app</code></p>
49            <ul>
50                <li>Déploiement par glisser-déposer</li>
51                <li>HTTPS automatique</li>
52                <li>Formulaires de contact</li>
53            </ul>
54        </article>
55
56        <article class="platform">
57            <h3>Vercel</h3>
58            <p>Plateforme créée par les développeurs de Next.js.
59               Adresse : <code>nom.vercel.app</code></p>
60            <ul>
61                <li>Import depuis GitHub</li>
62                <li>Preview deploys</li>
63                <li>HTTPS automatique</li>
64            </ul>
65        </article>
66    </section>
67</body>
68</html>

Souviens-toi : une pyramide ensevelie sous le sable n'attirera aucun pèlerin - seul l'hébergement ouvre ses portes au monde entier.