HTML Course 19.6 Publishing the project on the web (GitHub Pages, static hosting, etc.)

1. Pourquoi publier un projet HTML ?

Une fois votre site ou application statique (HTML, CSS, JavaScript) prêt, il faut le rendre accessible sur un serveur web. Vous pouvez opter pour :

• Un hébergement gratuit GitHub Pages
• Des services de déploiement continu (Netlify, Vercel, Surge…)
• Votre propre bucket S3 sur AWS, Firebase Hosting, Google Cloud Storage…

2. GitHub Pages

GitHub Pages permet de déployer un site statique directement depuis un dépôt GitHub. Deux modes principaux :

2.1 Site utilisateur/organisation

1. Créez ou renommez un dépôt en votre-username.github.io.
2. Placez vos fichiers HTML/CSS/JS à la racine de la branche main (ou master selon votre configuration).
3. Push : le site sera accessible dès quelques secondes à l’URL https://votre-username.github.io.

2.2 Site de projet

1. N’importe quel dépôt GitHub peut devenir un site de projet.
2. Choix de la source dans Settings → Pages :
   • gh-pages (branche dédiée)
   • main / dossier docs/
3. Le site sera publié sur https://votre-username.github.io/nom-du-repo/.

2.3 Exemple de site de projet avec dossier docs/

Structure :

• README.md
• docs/index.html
• docs/style.css
• docs/script.js

Contenu de docs/index.html :

<!-- docs/index.html -->
<!DOCTYPE html>
<html lang='fr'>
<head>
  <meta charset='UTF-8'>
  <title>Mon site de projet</title>
  <link rel='stylesheet' href='style.css'>
</head>
<body>
  <h2>Bienvenue sur mon projet !</h2>
  <script src='script.js'></script>
</body>
</html>
  

Puis :

# Initialiser le dépôt
git init
git add .
git commit -m 'Premier déploiement GitHub Pages'

# Pousser sur GitHub (après avoir créé le repo distant)
git remote add origin git@github.com:username/mon-projet.git
git push -u origin main
  

Dans les Settings → Pages, sélectionnez « main branch / docs folder ». Quelques instants plus tard, le site est en ligne.

3. Netlify

Netlify détecte et déploie automatiquement votre projet depuis GitHub, GitLab ou Bitbucket.

3.1 via CLI

1. Installer Netlify CLI : npm install -g netlify-cli
2. Initialiser : netlify init
3. Déployer : netlify deploy --prod

Exemple de netlify.toml :

# netlify.toml
[build]
  publish = 'dist'       # dossier à publier
  command = 'npm run build'  # commande de build (si nécessaire)

[context.production.environment]
  NODE_ENV = 'production'
  API_URL = 'https://api.mon-site.com'
  

4. Vercel

1. Installer Vercel CLI : npm install -g vercel
2. Déployer : vercel (suivre les invites)
3. Pour un déploiement production : vercel --prod

5. Surge

1. Installer : npm install -g surge
2. Déployer : surge ./public mon-sous-domaine.surge.sh

6. AWS S3 + CloudFront

Héberger un site statique dans un bucket S3 :

# Créer le bucket
aws s3 mb s3://mon-site-statique --region eu-west-1

# Rendre public
aws s3 website s3://mon-site-statique --index-document index.html

# Synchroniser les fichiers
aws s3 sync ./public s3://mon-site-statique --acl public-read
  

Pour plus de performance, on peut ajouter CloudFront (CDN).

7. Firebase Hosting

1. Installer Firebase CLI : npm install -g firebase-tools
2. Initialiser : firebase init hosting (sélectionner votre projet et dossier public)
3. Déployer : firebase deploy --only hosting

8. Domaine personnalisé

1. Dans GitHub Pages, ajouter un fichier CNAME à la racine :

# CNAME
www.mon-domaine.com
  

Puis configurer enregistrement DNS de type CNAME (www) ou A (apex) vers GitHub Pages, Netlify ou autre hébergeur.

9. Intégration Continue avec GitHub Actions

Exemple de workflow pour déployer sur GitHub Pages via la branche gh-pages :

# .github/workflows/deploy.yml
name: CI/CD Pages

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Installer Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Installer dépendances
        run: npm ci
      - name: Générer le site
        run: npm run build
      - name: Déployer sur gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: gh-pages
          publish_dir: ./dist
  

10. Bonnes pratiques

• Versionnez toujours votre code.
• Utilisez un générateur statique (Jekyll, 11ty, Hugo…) si votre site s’étoffe.
• Séparez dossier source et dossier de publication (src/ vs dist/ ou docs/).
• Automatisez avec CI/CD pour éviter les oublis.
• Configurez un certificat SSL (gratuit via Let’s Encrypt). La plupart des hébergeurs le gèrent automatiquement.