|
| 1 | +--- |
| 2 | +title: Déployer votre site Astro sur Hostinger |
| 3 | +description: Comment déployer votre site Astro sur le web en utilisant Hostinger. |
| 4 | +type: deploy |
| 5 | +logo: hostinger |
| 6 | +i18nReady: true |
| 7 | +sidebar: |
| 8 | + label: Hostinger |
| 9 | +supports: ['ssr', 'static'] |
| 10 | +--- |
| 11 | +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; |
| 12 | +import ReadMore from '~/components/ReadMore.astro'; |
| 13 | +import { Steps } from '@astrojs/starlight/components'; |
| 14 | + |
| 15 | +[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. |
| 16 | + |
| 17 | +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/). |
| 18 | + |
| 19 | +## Prérequis |
| 20 | + |
| 21 | +- Un [compte Hostinger](https://www.hostinger.com/fr) avec une formule d'hébergement active. |
| 22 | + - Le déploiement de sites statiques est pris en charge avec toutes les formules incluant hPanel. |
| 23 | + - 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. |
| 24 | +- Un projet Astro prêt à être déployé. |
| 25 | + |
| 26 | +## Déploiement de sites statiques |
| 27 | + |
| 28 | +Les projets Astro utilisent `output: 'static'` par défaut, donc aucune configuration supplémentaire n'est requise pour déployer un site statique. |
| 29 | + |
| 30 | +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. |
| 31 | + |
| 32 | +### Téléversement via le gestionnaire de fichiers |
| 33 | + |
| 34 | +<Steps> |
| 35 | +1. Compilez votre projet Astro localement : |
| 36 | + |
| 37 | + <PackageManagerTabs> |
| 38 | + <Fragment slot="npm"> |
| 39 | + ```shell |
| 40 | + npm run build |
| 41 | + ``` |
| 42 | + </Fragment> |
| 43 | + <Fragment slot="pnpm"> |
| 44 | + ```shell |
| 45 | + pnpm build |
| 46 | + ``` |
| 47 | + </Fragment> |
| 48 | + <Fragment slot="yarn"> |
| 49 | + ```shell |
| 50 | + yarn build |
| 51 | + ``` |
| 52 | + </Fragment> |
| 53 | + </PackageManagerTabs> |
| 54 | + |
| 55 | +2. Connectez-vous à [hPanel](https://hpanel.hostinger.com/) et ouvrez votre site web. |
| 56 | + |
| 57 | +3. Ouvrez **Fichiers** > **Gestionnaire de fichiers** et naviguez jusqu'au répertoire `public_html`. |
| 58 | + |
| 59 | +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. |
| 60 | + |
| 61 | +5. Visitez votre domaine pour confirmer que votre site est en ligne. |
| 62 | +</Steps> |
| 63 | + |
| 64 | +### Téléversement via FTP |
| 65 | + |
| 66 | +<Steps> |
| 67 | +1. Dans hPanel, allez dans **Fichiers** > **Comptes FTP** pour trouver ou créer vos identifiants FTP. |
| 68 | + |
| 69 | +2. Connectez-vous à votre compte d'hébergement en utilisant un client FTP tel que [FileZilla](https://filezilla-project.org/). |
| 70 | + |
| 71 | +3. Téléversez le contenu de votre dossier `dist/` local dans le répertoire `public_html` sur le serveur. |
| 72 | + |
| 73 | +4. Visitez votre domaine pour confirmer que votre site est en ligne. |
| 74 | +</Steps> |
| 75 | + |
| 76 | +## Déploiement côté serveur avec Node.js |
| 77 | + |
| 78 | +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. |
| 79 | + |
| 80 | +### Ajouter l'adaptateur Node.js |
| 81 | + |
| 82 | +Ajoutez l'[adaptateur Node.js](/fr/guides/integrations-guide/node/) pour activer le rendu à la demande avec la commande `astro add` suivante : |
| 83 | + |
| 84 | +<PackageManagerTabs> |
| 85 | + <Fragment slot="npm"> |
| 86 | + ```shell |
| 87 | + npx astro add node |
| 88 | + ``` |
| 89 | + </Fragment> |
| 90 | + <Fragment slot="pnpm"> |
| 91 | + ```shell |
| 92 | + pnpm astro add node |
| 93 | + ``` |
| 94 | + </Fragment> |
| 95 | + <Fragment slot="yarn"> |
| 96 | + ```shell |
| 97 | + yarn astro add node |
| 98 | + ``` |
| 99 | + </Fragment> |
| 100 | +</PackageManagerTabs> |
| 101 | + |
| 102 | +<ReadMore>Consultez le [guide de l'adaptateur Node.js](/fr/guides/integrations-guide/node/) pour des options de configuration supplémentaires.</ReadMore> |
| 103 | + |
| 104 | +Assurez-vous que votre `package.json` contient un script `start` qui exécute le serveur compilé : |
| 105 | + |
| 106 | +```json title="package.json" |
| 107 | +{ |
| 108 | + "scripts": { |
| 109 | + "start": "node ./dist/server/entry.mjs" |
| 110 | + } |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +### Déploiement depuis un dépôt Git |
| 115 | + |
| 116 | +<Steps> |
| 117 | +1. Publiez votre projet Astro dans un dépôt GitHub, GitLab ou Bitbucket. |
| 118 | + |
| 119 | +2. Connectez-vous à [hPanel](https://hpanel.hostinger.com/) et allez dans **Sites Web**. |
| 120 | + |
| 121 | +3. Ajoutez un nouveau site web et sélectionnez l'option application **Node.js**. |
| 122 | + |
| 123 | +4. Connectez votre fournisseur Git et sélectionnez votre dépôt et votre branche. |
| 124 | + |
| 125 | +5. Configurez les paramètres de compilation : |
| 126 | + |
| 127 | + - **Commande de compilation :** `npm run build` |
| 128 | + - **Commande de démarrage :** `npm run start` |
| 129 | + |
| 130 | +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). |
| 131 | + |
| 132 | +7. Démarrez le déploiement. Hostinger installera les dépendances, exécutera votre commande de compilation et démarrera l'application. |
| 133 | +</Steps> |
| 134 | + |
| 135 | +### Déploiement en téléversant les fichiers du projet |
| 136 | + |
| 137 | +<Steps> |
| 138 | +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`). |
| 139 | + |
| 140 | +2. Dans hPanel, ajoutez un nouveau site web et sélectionnez l'option application **Node.js**. |
| 141 | + |
| 142 | +3. Téléversez les fichiers de votre projet (ou une archive `.zip`) en utilisant le gestionnaire de fichiers. |
| 143 | + |
| 144 | +4. Configurez l'application : |
| 145 | + |
| 146 | + - **Racine de l'application :** le dossier contenant votre fichier `package.json`. |
| 147 | + - **Commande de démarrage :** `npm run start` |
| 148 | + |
| 149 | +5. Sélectionnez une version de Node.js prise en charge et démarrez l'application. |
| 150 | +</Steps> |
| 151 | + |
| 152 | +## Ressources officielles |
| 153 | + |
| 154 | +- [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. |
0 commit comments