Démarrer

Mettre un premier site en ligne

Du compte à une preview, puis à la production, avec la CLI Vercel, en une quinzaine de minutes.

À 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 envoie ta demande à l’équipe, qui t’invite depuis Account.

Connecte-toi
Ouvre 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.
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.
Vérification : la clé apparaît dans la liste, avec le nom que tu lui as donné.
Installe la CLI Vercel
```
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.
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.
```
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.

Prépare un site

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

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

Déploie une preview
Depuis le dossier du site :
```
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.
Passe en production
```
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.
Pour déployer à chaque git push, suis Déployer 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.
La page affiche 404 : le dossier envoyé n’a pas d’index.html à sa racine.

Cette page t'a aidé ?