Comment héberger gratuitement un site statique avec AWS S3

Un guide pour héberger gratuitement un site statique avec AWS S3, étape par étape.

I. Pourquoi choisir AWS S3 pour héberger un site statique gratuitement?  

• Amazon S3 permet l’hébergement de sites entièrement statiques (HTML, CSS, JavaScript).
• Grâce à l’AWS Free Tier, un petit site peut rester gratuit pendant 12 mois (jusqu’à 5 Go de stockage, 20 000 requêtes GET & 2 000 PUT par mois).
• Très résilient, évolutif et sans serveur à administrer, S3 offre une durabilité de 99,999999999 % et tolère des pics de trafic sans configuration complexe.
• Pour les besoins de HTTPS ou de domaine personnalisé, Amazon recommande d’utiliser Amazon CloudFront + Route 53.

II. Prérequis et configuration initiale  

• Création d’un bucket
• Désactiver les restrictions d’accès public
• Ajouter une politique publique

Avant de pouvoir déployer un site statique avec GitHub Pages, il faut effectuer une configuration de base sur AWS. Voici les étapes détaillées :

1. Création d’un bucket  

• Dans la console AWS, ouvrez Amazon S3 et cliquez sur Create bucket.
• Nommez le bucket exactement comme votre domaine (ex. example.com) pour utiliser un domaine personnalisé facilement.
• Sélectionnez une région géographique proche de vos utilisateurs.

2. Désactiver les restrictions d’accès public  

• Par défaut, les nouveaux buckets bloquent l’accès public. Dans l’onglet Permissions, éditez Block Public Access et désactivez les options.

3. Ajouter une politique publique  

Ajoutez cette politique dans Bucket Policy :

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicReadGetObject",
      "Effect":"Allow",
      "Principal":"*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::YOUR_BUCKET_NAME/*"]
    }
  ]
}

Remplacez YOUR_BUCKET_NAME par le nom exact de votre bucket.

III. Déploiement et configuration de l’hébergement : étape par étape  

• Préparer les fichiers de votre site
• Transférer les fichiers vers S3
• Activer l’hébergement de site statique
• Tester le site
• Ajouter une page 404 personnalisée (facultatif)

Une fois votre bucket S3 correctement configuré, il est temps de téléverser votre site statique et d’activer la fonction d’hébergement. Voici les étapes détaillées pour que votre site soit en ligne en quelques minutes.

1. Préparer les fichiers de votre site  

Créez une structure simple avec les éléments suivants :

mon-site/
├── index.html
├── style.css
├── script.js
└── img/
    └── logo.png

Le fichier index.html est obligatoire.
Assurez-vous que tous les chemins relatifs dans votre HTML pointent correctement vers les ressources.

2. Transférer les fichiers vers S3  

Vous pouvez transférer vos fichiers de deux façons :

A. Via l’interface web AWS :  

1. Ouvrez votre bucket dans la console S3.
2. Cliquez sur Upload > Add files et sélectionnez tous les fichiers de votre site.
3. Cliquez sur Upload (ne changez pas les options par défaut si vous avez bien activé l’accès public).

B. Via la CLI AWS :  

Si vous avez déjà installé et configuré l’AWS CLI :

aws s3 cp ./mon-site/ s3://NOM_DU_BUCKET/ --recursive

Remplacez NOM_DU_BUCKET par le nom exact de votre bucket.
L’option --recursive est indispensable pour transférer tout le dossier.

3. Activer l’hébergement de site statique  

1. Dans la console AWS, ouvrez l’onglet Properties du bucket.
2. Recherchez la section Static website hosting.
3. Cliquez sur Edit > cochez Use this bucket to host a website.
4. Renseignez :
   • Index document : index.html
   • Error document (facultatif) : 404.html
5. Enregistrez les modifications.

Une URL de type http://NOM_DU_BUCKET.s3-website-REGION.amazonaws.com sera générée automatiquement.

4. Tester le site  

Ouvrez l’URL générée dans un navigateur.
Vous devriez voir apparaître votre page index.html.

Si votre site ne s’affiche pas :

• Vérifiez que les fichiers sont bien en place.
• Assurez-vous que la politique de bucket autorise la lecture publique.
• Testez les permissions via le bouton Permissions > Bucket policy.

5. Ajouter une page 404 personnalisée (facultatif)  

Créez un fichier 404.html et placez-le à la racine de votre projet.

Exemple minimal :

<!DOCTYPE html>
<html>
<head><title>Page non trouvée</title></head>
<body>
  <h1>Erreur 404 – Page introuvable</h1>
</body>
</html>

Indiquez ce fichier dans la section Error document pour que S3 le renvoie automatiquement en cas de lien invalide.

📌 À noter : l’URL générée utilise HTTP uniquement. Pour obtenir du HTTPS, vous devrez configurer CloudFront avec un certificat SSL.

IV. Options avancées : CloudFront, domaine personnalisé et sécurité  

A. Ajouter un domaine personnalisé  

• Créez une Hosted Zone dans Route 53.
• Ajoutez un enregistrement A Alias vers le bucket ou CloudFront.

B. Améliorer les performances via CloudFront  

• Créez une distribution CloudFront.
• Activez Origin Access Control (OAC) pour sécuriser le bucket.
• Permet d’utiliser HTTPS via certificat ACM.

C. Comparatif  

V. Que se passe-t-il après la période gratuite (Free Tier) ?  

Lorsque les 12 mois du Free Tier AWS sont écoulés, les ressources utilisées sont facturées au tarif standard du service. Cela ne bloque pas le site, mais peut générer des frais mensuels si tu continues à utiliser Amazon S3, CloudFront ou Route 53.

A. Tarification standard (post-Free Tier)  

Amazon S3 (stockage de fichiers statiques)  

Amazon CloudFront (CDN + HTTPS)  

Route 53 (si domaine personnalisé)  

B. Cas d’usage : blog statique de 100 Mo et 5 000 visites / mois  

Hypothèses :

• Taille du site (HTML, CSS, JS, images) : 100 Mo
• Bande passante mensuelle (GET * 5 000) : ~500 Mo à 1 Go
• 5 000 requêtes GET, 0 PUT

Coût mensuel estimé :

Un site statique reste très peu coûteux même après la période gratuite, en particulier si le trafic est modéré.

Conseil : configurer un budget AWS  

Utilise AWS Budgets pour recevoir des alertes en cas de dépassement :

https://console.aws.amazon.com/billing/home#/budgets

Cela permet de maîtriser les coûts même après expiration du Free Tier.

VI. Cas d’usage et avantages  

• Portfolio personnel
• Documentation statique
• Landing page
• Blog généré (Hugo, Jekyll…)

VII. Conclusion  

Amazon S3 permet d’héberger un site statique gratuitement ou à très faible coût. Il est robuste, sans maintenance serveur. Il peut facilement être amélioré avec CloudFront et Route 53 pour activer HTTPS, DNS personnalisé et utiliser des performances mondiales.

🔗 Ressource utile  

• Documentation officielle AWS S3 – Hébergement de site
• AWS Free Tier – Détail S3
• Configurer un domaine personnalisé – Route 53
• Utiliser CloudFront avec S3