0Pricing
Linux Server Deployment & SSH Mastery · Leçon

Héberger des sites web statiques

Configurez le serveur web de votre choix pour servir des fichiers HTML, CSS et JavaScript statiques, afin de rendre votre premier site web accessible.

Héberger des sites web statiques est une leçon Linux Server Deployment & SSH Mastery gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Linux Server Deployment & SSH Mastery, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Linux Server Deployment & SSH Mastery comprend 4 leçons au total.

Que sont les sites web statiques ?

Bienvenue ! Dans cette leçon, nous allons apprendre à mettre votre site web simple en ligne.

Un site web statique est constitué de fichiers HTML, CSS et JavaScript qui sont transmis au navigateur de l’utilisateur exactement tels qu’ils sont stockés sur le serveur.

  • Aucun traitement côté serveur (comme PHP ou Python).
  • Rapide, sécurisé et facile à héberger.
  • Parfait pour les portfolios, les blogs ou les sites d’information simples.

Créer votre premier fichier HTML

Créons un fichier index.html très simple. Il constituera la page principale de notre site web statique.

En général, vous créeriez ce fichier sur votre serveur, par exemple à l’aide d’un éditeur de texte comme nano ou vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

Ajouter du CSS et du JavaScript

Notre fichier HTML fait référence à style.css et script.js. Créons-les également afin de terminer notre site de base.

Ces fichiers seront placés dans le même répertoire que notre fichier index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Configurer votre répertoire web

Nous avons besoin d’un emplacement dédié sur notre serveur pour stocker ces fichiers de site web. Un emplacement courant se trouve dans /var/www/.

Commencez par créer un répertoire pour votre site web. Copiez ensuite vos fichiers index.html, style.css et script.js dans ce répertoire.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx : bases des blocs de serveur

Nginx utilise des blocs de serveur (similaires aux hôtes virtuels d’Apache) pour définir les configurations de sites web spécifiques.

Chaque bloc de serveur écoute les demandes sur un port (comme le port 80 pour HTTP) et répond en fonction du nom de domaine.

  • Ils se trouvent généralement dans /etc/nginx/sites-available/.
  • Ils sont activés en créant un lien symbolique vers /etc/nginx/sites-enabled/.

Nginx : directives root et index

Dans un bloc de serveur, deux directives importantes indiquent à Nginx où trouver vos fichiers :

  • root : indique le chemin absolu vers les fichiers de votre site web. C’est à cet emplacement que Nginx recherchera le contenu.
  • index : définit le fichier par défaut que Nginx doit diffuser lorsqu’un répertoire est demandé (par exemple, lorsqu’une personne visite yourdomain.com/, Nginx recherche index.html).

Nginx : configuration complète d’un site statique

Voici la configuration complète d’un bloc de serveur Nginx pour notre site statique. Enregistrez-la sous /etc/nginx/sites-available/mywebsite.conf.

N’oubliez pas de remplacer your_domain.com par votre véritable domaine ou l’adresse IP de votre serveur.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache : équivalent des hôtes virtuels

Si vous utilisez Apache, le concept est similaire avec les hôtes virtuels. Vous créeriez un fichier de configuration (par exemple, /etc/apache2/sites-available/mywebsite.conf).

Les directives principales sont DocumentRoot (l’équivalent de root dans Nginx) et DirectoryIndex (l’équivalent de index dans Nginx).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Activer et recharger votre serveur

Après avoir créé votre fichier de configuration, vous devez l’activer et recharger votre serveur web pour que les modifications prennent effet.

  • Pour Nginx : créez un lien symbolique et rechargez le serveur.
  • Pour Apache : activez le site et rechargez le serveur.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Tester votre site web en ligne

Excellent travail ! Votre site web statique devrait maintenant être accessible.

Ouvrez votre navigateur web et accédez à l’adresse IP de votre serveur ou au nom de domaine que vous avez configuré.

Vous devriez voir votre message « Hello CoddyKit! » !

Vérification rapide : directives Nginx

Considérez l’extrait de bloc de serveur Nginx suivant :

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Si un utilisateur accède à http://example.com/, quel fichier Nginx essaiera-t-il de diffuser en premier ?

Récapitulatif : héberger des sites statiques

Vous avez appris à héberger un site web statique avec succès !

Nous avons vu :

  • La création de fichiers HTML, CSS et JS de base.
  • La configuration d’un répertoire dédié au contenu de votre site web.
  • La configuration des blocs de serveur Nginx (ou des hôtes virtuels Apache) à l’aide de root/DocumentRoot et de index/DirectoryIndex.
  • L’activation et le rechargement de votre serveur web.
  • Le test de votre site web en ligne dans un navigateur.

Ensuite, nous explorerons la configuration d’hôtes virtuels afin d’héberger plusieurs sites web sur un même serveur !

Questions Fréquemment Posées

La leçon « Héberger des sites web statiques » est-elle gratuite ?

Oui — le texte complet de « Héberger des sites web statiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Linux Server Deployment & SSH Mastery, passe à CoddyKit PRO. Le cours Linux Server Deployment & SSH Mastery comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Héberger des sites web statiques » ?

Configurez le serveur web de votre choix pour servir des fichiers HTML, CSS et JavaScript statiques, afin de rendre votre premier site web accessible. Tu pratiques Linux Server Deployment & SSH Mastery avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Linux Server Deployment & SSH Mastery ?

Aucune expérience préalable n'est requise. Linux Server Deployment & SSH Mastery sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Héberger des sites web statiques » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Linux Server Deployment & SSH Mastery ?

Oui. Chaque leçon Linux Server Deployment & SSH Mastery inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Installer Nginx/Apache
  2. Héberger des sites web statiques
  3. Configuration de base des hôtes virtuels
  4. Activer HTTPS avec Let’s Encrypt
← Retour à Linux Server Deployment & SSH Mastery