Déployer votre site Astro sur Hostinger

Hostinger est un fournisseur d’hébergement web qui prend en charge les sites statiques et les applications Node.js.

Ce guide couvre le déploiement de projets Astro aussi bien statiques que rendus côté serveur sur Hostinger en utilisant hPanel.

Prérequis

Un compte Hostinger avec une formule d’hébergement active.
- Le déploiement de sites statiques est pris en charge avec toutes les formules incluant hPanel.
- Le déploiement côté serveur nécessite une formule prenant en charge les applications Node.js, comme l’hébergement Web Business ou l’hébergement Cloud.
Un projet Astro prêt à être déployé.

Déploiement de sites statiques

Les projets Astro utilisent output: 'static' par défaut, donc aucune configuration supplémentaire n’est requise pour déployer un site statique.

Vous pouvez téléverser le contenu de votre dossier dist/ sur Hostinger en utilisant soit le Gestionnaire de fichiers de hPanel, soit un client FTP.

Téléversement via le gestionnaire de fichiers

Compilez votre projet Astro localement :
- npm
- pnpm
- Yarn
Fenêtre du terminal
npm run build
Fenêtre du terminal
pnpm build
Fenêtre du terminal
yarn build
Connectez-vous à hPanel et ouvrez votre site web.
Ouvrez Fichiers > Gestionnaire de fichiers et naviguez jusqu’au répertoire public_html.
Téléversez le contenu de votre dossier dist/ local dans public_html. Vous pouvez faire glisser et déposer des fichiers, ou téléverser une archive et l’extraire sur place.
Visitez votre domaine pour confirmer que votre site est en ligne.

Téléversement via FTP

Dans hPanel, allez dans Fichiers > Comptes FTP pour trouver ou créer vos identifiants FTP.
Connectez-vous à votre compte d’hébergement en utilisant un client FTP tel que FileZilla.
Téléversez le contenu de votre dossier dist/ local dans le répertoire public_html sur le serveur.
Visitez votre domaine pour confirmer que votre site est en ligne.

Déploiement côté serveur avec Node.js

Pour le rendu à la demande, déployez votre projet Astro en tant qu’application Node.js avec une formule Hostinger qui prend en charge Node.js.

Ajouter l’adaptateur Node.js

Ajoutez l’adaptateur Node.js pour activer le rendu à la demande avec la commande astro add suivante :

npx astro add node

pnpm astro add node

yarn astro add node

Consultez le guide de l’adaptateur Node.js pour des options de configuration supplémentaires.

Assurez-vous que votre package.json contient un script start qui exécute le serveur compilé :

{
  "scripts": {
    "start": "node ./dist/server/entry.mjs"
  }
}

Déploiement depuis un dépôt Git

Publiez votre projet Astro dans un dépôt GitHub, GitLab ou Bitbucket.
Connectez-vous à hPanel et allez dans Sites Web.
Ajoutez un nouveau site web et sélectionnez l’option application Node.js.
Connectez votre fournisseur Git et sélectionnez votre dépôt et votre branche.
Configurez les paramètres de compilation :
- Commande de compilation : npm run build
- Commande de démarrage : npm run start
Sélectionnez une version de Node.js qui satisfait à la configuration minimale requise d’Astro (Node.js 22 ou ultérieure).
Démarrez le déploiement. Hostinger installera les dépendances, exécutera votre commande de compilation et démarrera l’application.

Déploiement en téléversant les fichiers du projet

Compilez votre projet Astro localement, puis téléversez le dossier dist/ généré ainsi que package.json et le fichier de verrouillage (par exemple package-lock.json).
Dans hPanel, ajoutez un nouveau site web et sélectionnez l’option application Node.js.
Téléversez les fichiers de votre projet (ou une archive .zip) en utilisant le gestionnaire de fichiers.
Configurez l’application :
- Racine de l’application : le dossier contenant votre fichier package.json.
- Commande de démarrage : npm run start
Sélectionnez une version de Node.js prise en charge et démarrez l’application.