Créer un site rapide avec Astro et le mettre en ligne chez LWS

Un site statique est un ensemble de pages HTML déjà prêtes. Pas de base de données à interroger, pas de code à exécuter à chaque visite : le serveur envoie simplement des fichiers. Résultat, c’est très rapide, très sûr (peu de surface d’attaque) et ça fonctionne sur n’importe quel hébergement, y compris un mutualisé d’entrée de gamme.

Astro est l’un des outils les plus adaptés pour produire ce type de site. Vous écrivez vos pages avec des composants et vos articles en Markdown, et Astro génère un site statique optimisé. Ce tutoriel va de l’installation à la mise en ligne sur un hébergement LWS. La démarche est identique chez la plupart des hébergeurs mutualisés.

À retenir Le principe : vous construisez le site sur votre ordinateur (npm run build), puis vous envoyez le dossier généré dist/ sur l’hébergement par FTP. L’hébergeur n’a besoin ni de Node.js, ni de base de données.

Ce qu’il vous faut

• Node.js installé sur votre ordinateur, en version LTS récente (nodejs.org) ;
• un éditeur de code, par exemple VS Code ;
• un hébergement web avec un nom de domaine, et ses identifiants FTP (dans votre espace client LWS) ;
• un client FTP gratuit : FileZilla.

Étape 1 : créer le projet Astro

Ouvrez un terminal dans le dossier de votre choix, puis lancez :

npm create astro@latest mon-site

L’assistant pose quelques questions : choisissez un modèle (le modèle « blog » est un bon point de départ), acceptez l’installation des dépendances. Puis :

cd mon-site
npm run dev

Ouvrez l’adresse affichée (en général http://localhost:4321) : votre site tourne en local. Chaque modification de fichier s’affiche instantanément dans le navigateur.

Étape 2 : configurer l’adresse du site

Dans le fichier astro.config.mjs, indiquez l’adresse définitive de votre site. Astro s’en sert pour les liens canoniques, le sitemap et le flux RSS :

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://www.mon-domaine.fr',
});

Étape 3 : générer le site

Quand le contenu est prêt :

npm run build

Astro crée un dossier dist/ qui contient tout le site : pages HTML, CSS, JavaScript et images optimisées. C’est uniquement ce dossier qu’il faut mettre en ligne. Pour le vérifier avant envoi :

npm run preview

Étape 4 : récupérer ses accès FTP chez LWS

Dans votre espace client LWS, ouvrez la gestion de votre hébergement. Vous y trouverez les informations FTP :

• l’hôte (serveur FTP) ;
• l’identifiant ;
• le mot de passe, que vous pouvez réinitialiser si besoin ;
• le dossier racine du site, où doivent se trouver les fichiers publics.

Le nom exact du dossier racine et l’emplacement de ces informations peuvent varier selon l’offre. En cas de doute, consultez l’aide LWS ou le support. Si votre offre le propose, préférez une connexion SFTP (chiffrée) au FTP classique.

Étape 5 : envoyer les fichiers avec FileZilla

1. Ouvrez FileZilla, puis Fichier → Gestionnaire de sites → Nouveau site.
2. Renseignez l’hôte, le protocole (SFTP si disponible, sinon FTP avec chiffrement explicite TLS), l’identifiant et le mot de passe.
3. Connectez-vous. À droite apparaissent les fichiers du serveur : ouvrez le dossier racine du site.
4. À gauche, ouvrez le dossier dist/ de votre projet.
5. Sélectionnez tout le contenu de dist/ (pas le dossier lui-même) et glissez-le vers le dossier racine du serveur.

Si une page par défaut de l’hébergeur (index.html ou index.php) existe déjà, remplacez-la ou supprimez-la.

Ouvrez votre nom de domaine : le site est en ligne.

Étape 6 : activer le HTTPS

Un site sans HTTPS est signalé « non sécurisé » par les navigateurs et pénalisé en référencement. Dans l’espace client LWS, activez le certificat SSL (Let’s Encrypt, gratuit) pour votre domaine.

Forcez ensuite la redirection vers HTTPS avec un fichier .htaccess. Placez-le dans le dossier public/ de votre projet Astro : il sera copié automatiquement dans dist/ à chaque génération.

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

ErrorDocument 404 /404.html

Ce fichier fonctionne sur les hébergements Apache, ce qui est le cas des offres mutualisées LWS. La dernière ligne affiche votre page d’erreur Astro (src/pages/404.astro) au lieu de la page par défaut du serveur.

Étape 7 : publier les mises à jour

Pour chaque mise à jour du site :

1. modifiez vos fichiers ;
2. lancez npm run build ;
3. renvoyez le contenu de dist/ par FTP (FileZilla propose d’écraser les fichiers existants).

Astro nomme ses fichiers CSS et JavaScript avec une empreinte unique : les anciennes versions ne restent pas bloquées dans le cache des visiteurs. Vous pouvez supprimer de temps en temps le dossier _astro/ sur le serveur avant un envoi complet, pour éliminer les fichiers obsolètes.

À retenir Pour aller plus loin, la mise en ligne peut être automatisée : un service d’intégration continue (comme GitHub Actions) peut générer le site et l’envoyer par FTP à chaque modification. Pratique dès que vous publiez régulièrement.

Les erreurs fréquentes

1. Envoyer le dossier du projet au lieu de dist/. Le serveur doit recevoir uniquement le contenu généré.
2. Envoyer le dossier dist/ lui-même. Le site se retrouve alors à l’adresse mon-domaine.fr/dist/. Envoyez son contenu.
3. Oublier site dans la configuration. Les liens du sitemap et les liens canoniques seront incorrects.
4. Ne pas voir le fichier .htaccess. Les fichiers commençant par un point sont masqués par défaut. Dans FileZilla : Serveur → Forcer l’affichage des fichiers cachés.

En résumé

Avec Astro et un hébergement mutualisé classique, vous obtenez un site rapide, sûr et peu coûteux, sans base de données à maintenir. Le cycle de travail tient en trois gestes : modifier, générer, envoyer.

Pour gagner encore du temps, découvrez comment automatiser vos tâches répétitives avec Make ou n8n.