# Mettre un premier site en ligne

À la fin de ce parcours, ton site répond sur une adresse de preview, puis sur une adresse de production. Tu auras créé une clé d’API, installé la CLI et déployé un dossier de fichiers, sans étape de build.

**Avant de commencer** : Node.js et npm, et un compte HGDC. Sans compte, la page [Demander un accès](https://host.hgdc.ch/acces) envoie ta demande à l’équipe, qui t’invite depuis Account.

1. **Connecte-toi**

   Ouvre [host.hgdc.ch](https://host.hgdc.ch) et clique **Se connecter avec HGDC**. Le même compte sert à Account, Mail et les autres produits de la famille.

   Tu arrives sur le tableau de bord. Si tu n’as pas encore d’organisation, crée-la dans Account. Son slug apparaît dans l’adresse de l’app : `host.hgdc.ch/o/<slug>`.

   **Vérification** : le tableau de bord affiche le nom de ton organisation.

2. **Crée une clé d'API**

   Dans ton organisation, ouvre l’onglet **Clés d’API** et crée une clé. Elle commence par `ah_` et ne s’affiche qu’une fois : copie-la tout de suite.

   La clé remplace le mot de passe de la CLI. Le détail est dans [Clés d’API](/docs/guides/cle-d-api/).

   **Vérification** : la clé apparaît dans la liste, avec le nom que tu lui as donné.

3. **Installe la CLI Vercel**

   ```bash
   npm install --global vercel@63
   ```

   Host est testé avec la version 63 de la CLI. Une autre version peut fonctionner, mais ce n’est pas garanti.

   **Vérification** : `vercel --version` affiche une version 63.x.

4. **Donne la clé et l'adresse de l'API à la CLI**

   Dans le terminal, exporte la clé, puis passe l’adresse de l’API à chaque commande avec `--api`. La CLI lit la clé dans `VERCEL_TOKEN`.

   ```bash
   export VERCEL_TOKEN=ah_…
   vercel --api https://api.host.hgdc.ch whoami
   ```

   **Vérification** : la commande affiche ton identifiant, sans demander de connexion dans le navigateur. Pour ne pas retaper l’adresse, voir [Configurer la CLI](/docs/reference/cli/#configurer-la-cli).

5. **Prépare un site**

   Crée un dossier `mon-site` avec un fichier `index.html` à sa racine :

   ```html
   <!doctype html>
   <html lang="fr">
     <head>
       <meta charset="utf-8" />
       <title>Mon premier site</title>
     </head>
     <body>
       <h1>Bonjour depuis Host</h1>
     </body>
   </html>
   ```

   **Vérification** : `index.html` se trouve directement dans `mon-site`, pas dans un sous-dossier.

6. **Déploie une preview**

   Depuis le dossier du site :

   ```bash
   cd mon-site
   vercel --api https://api.host.hgdc.ch deploy
   ```

   Au premier envoi, la CLI crée le projet sous le nom du dossier et le relie au dossier dans `.vercel/project.json`. Elle affiche ensuite l’adresse du déploiement, de la forme `https://mon-site-abc123xyz.hgdc.cloud`.

   **Vérification** : ouvre l’adresse affichée. La page « Bonjour depuis Host » s’affiche. Le déploiement apparaît aussi dans l’onglet **Déploiements** du projet, avec l’état **Prêt**.

7. **Passe en production**

   ```bash
   vercel --api https://api.host.hgdc.ch deploy --prod
   ```

   Le déploiement devient la production du projet. La CLI affiche l’adresse de production du projet, `https://mon-site.hgdc.cloud`, qui suivra chaque mise en production. Les domaines de production du projet le servent aussi.

   **Vérification** : l’onglet **Vue d’ensemble** du projet montre ce déploiement comme production.

## Et après

- Pour mettre le site sur ton propre domaine, suis [Brancher un domaine](/docs/guides/brancher-un-domaine/).
- Pour déployer à chaque `git push`, suis [Déployer depuis GitHub](/docs/demarrer/depuis-github/).

## Si ça ne marche pas

- La CLI répond `403` : la clé est mal copiée, ou elle ne commence pas par `ah_`. Voir [Dépannage](/docs/guides/depannage/#la-cli-renvoie-403).
- La page affiche `404` : le dossier envoyé n’a pas d’`index.html` à sa racine.