Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions src/content/docs/fr/guides/deploy/hostinger.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
---
title: Déployer votre site Astro sur Hostinger
description: Comment déployer votre site Astro sur le web en utilisant Hostinger.
type: deploy
logo: hostinger
i18nReady: true
sidebar:
label: Hostinger
supports: ['ssr', 'static']
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

[Hostinger](https://www.hostinger.com/fr) 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](https://www.hostinger.com/fr/support/1583483-guide-complet-de-hpanel-hostinger/).

## Prérequis

- Un [compte Hostinger](https://www.hostinger.com/fr) 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

<Steps>
1. Compilez votre projet Astro localement :

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run build
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm build
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn build
```
</Fragment>
</PackageManagerTabs>

2. Connectez-vous à [hPanel](https://hpanel.hostinger.com/) et ouvrez votre site web.

3. Ouvrez **Fichiers** > **Gestionnaire de fichiers** et naviguez jusqu'au répertoire `public_html`.

4. 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.

5. Visitez votre domaine pour confirmer que votre site est en ligne.
</Steps>

### Téléversement via FTP

<Steps>
1. Dans hPanel, allez dans **Fichiers** > **Comptes FTP** pour trouver ou créer vos identifiants FTP.

2. Connectez-vous à votre compte d'hébergement en utilisant un client FTP tel que [FileZilla](https://filezilla-project.org/).

3. Téléversez le contenu de votre dossier `dist/` local dans le répertoire `public_html` sur le serveur.

4. Visitez votre domaine pour confirmer que votre site est en ligne.
</Steps>

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

Pour le [rendu à la demande](/fr/guides/on-demand-rendering/), 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](/fr/guides/integrations-guide/node/) pour activer le rendu à la demande avec la commande `astro add` suivante :

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npx astro add node
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm astro add node
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn astro add node
```
</Fragment>
</PackageManagerTabs>

<ReadMore>Consultez le [guide de l'adaptateur Node.js](/fr/guides/integrations-guide/node/) pour des options de configuration supplémentaires.</ReadMore>

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

```json title="package.json"
{
"scripts": {
"start": "node ./dist/server/entry.mjs"
}
}
```

### Déploiement depuis un dépôt Git

<Steps>
1. Publiez votre projet Astro dans un dépôt GitHub, GitLab ou Bitbucket.

2. Connectez-vous à [hPanel](https://hpanel.hostinger.com/) et allez dans **Sites Web**.

3. Ajoutez un nouveau site web et sélectionnez l'option application **Node.js**.

4. Connectez votre fournisseur Git et sélectionnez votre dépôt et votre branche.

5. Configurez les paramètres de compilation :

- **Commande de compilation :** `npm run build`
- **Commande de démarrage :** `npm run start`

6. Sélectionnez une version de Node.js qui satisfait à la [configuration minimale requise](/fr/install-and-setup/#prérequis) d'Astro (Node.js 22 ou ultérieure).

7. Démarrez le déploiement. Hostinger installera les dépendances, exécutera votre commande de compilation et démarrera l'application.
</Steps>

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

<Steps>
1. 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`).

2. Dans hPanel, ajoutez un nouveau site web et sélectionnez l'option application **Node.js**.

3. Téléversez les fichiers de votre projet (ou une archive `.zip`) en utilisant le gestionnaire de fichiers.

4. Configurez l'application :

- **Racine de l'application :** le dossier contenant votre fichier `package.json`.
- **Commande de démarrage :** `npm run start`

5. Sélectionnez une version de Node.js prise en charge et démarrez l'application.
</Steps>

## Ressources officielles

- [Documentation de Hostinger](https://www.hostinger.com/fr/support/) — centre d'aide officiel pour hPanel, les formules d'hébergement et les applications Node.js.
Loading