Aller au contenu
Retour au blog

Publier Astro depuis Git : Markdown et routes statiques

Publiez un site Astro en Markdown : npm ci, build, dist et URL canonical, avec un exemple original vérifié sur Hostbrid.

  • Astro
  • Markdown
  • IA

Un carnet, un petit blog ou un site de documentation peuvent être transformés en fichiers HTML avant leur première visite. Astro construit le contenu à partir de Markdown et de composants. Vous publiez ensuite le résultat statique sans maintenir le serveur de développement en marche.

Ce guide utilise Cuaderno orbital, un exemple original sous licence MIT. Consultez l’accueil publié et la note Markdown. Le CSS et l’illustration sont originaux ; l’exemple ne contient ni comptes, ni paiements, ni API, ni base de données.

Si votre site a des traductions, vérifiez les routes et le changement de langue dans Astro. Le diagnostic utilise un exemple local avec des pages équivalentes ; il ne démontre pas une livraison multilingue native chez Hostbrid.

Vérifiez que le projet est statique

Lisez astro.config.mjs et les scripts de package.json. L’exemple déclare output: 'static', n’utilise pas d’adaptateur serveur et son script build lance astro build. Il génère les fichiers nécessaires à chaque route.

Astro permet aussi le rendu à la demande. SSR, sessions, actions et endpoints actifs nécessitent un adaptateur et un runtime compatible. Cette recette vérifie uniquement la sortie statique. Ne supprimez pas les fonctions backend pour donner l’apparence d’une application compatible ; consultez quel hébergement choisir pour un site créé avec une IA et la référence officielle output.

Écrivez une note en Markdown

La note se trouve dans src/pages/notas/primera-noche.md. Son frontmatter contient le titre, la description et le layout partagé avec l’accueil. Le contenu devient du HTML pendant le build ; l’accueil découvre les notes avec import.meta.glob et affiche leurs titres et liens.

Commencez par modifier la note existante en conservant les champs de titre, description et layout. Un autre fichier .md dans ce dossier produit une autre page, que la liste découvre au prochain build. Revoyez aussi le texte éditorial de la liste si vous développez le carnet. La documentation Markdown d’Astro distingue ces pages des collections de contenu avec schéma.

Modifier un fichier sur votre ordinateur ne change pas le site publié. Enregistrez la modification dans Git et lancez une nouvelle construction selon le flux de votre projet.

Construisez avec des versions reproductibles

Copiez le dépôt ou créez un fork en conservant sa licence. Incluez package.json, package-lock.json, astro.config.mjs, src et public ; excluez node_modules et les clés privées.

L’exemple fixe Astro 7.3.7. Le guide officiel d’installation exige Node 22.12.0 ou supérieur et ne prend pas en charge les versions impaires. Notre test local a utilisé Node 22.23.3, indiqué dans .nvmrc. Le preset Hostbrid s’appelle node22 ; ce nom ne donne pas la version patch exacte.

npm ci
npm run build

Vérifiez dist/index.html, dist/notas/primera-noche/index.html et dist/orbital.svg. Dans ce petit build, Astro intègre le CSS aux fichiers HTML : l’absence d’un dossier CSS séparé ne signifie pas que les styles manquent. npm run dev et npm run preview sont des outils locaux.

Définissez l’URL publique avant le build

Dans cet exemple, la configuration lit PUBLIC_SITE_URL pour définir site. Cette variable contient une URL publique, jamais un mot de passe. La publication vérifiée utilisait :

PUBLIC_SITE_URL=https://hostbrid-astro-demo.hostbrid.dev npm run build

Pour votre copie, utilisez votre URL finale, sans reprendre le domaine de la démonstration. Dans Projects, définissez cette variable avant la construction. Sinon, l’exemple utilise https://example.invalid et ajoute noindex : une garde pour les tests locaux, pas une configuration destinée à un site public indexable. Contrôlez canonical et robots après chaque changement.

La variable ne configure pas le DNS et tous les dépôts Astro ne la lisent pas automatiquement. L’exemple vise la racine d’un domaine ; une publication dans un sous-chemin exige d’adapter base, liens et assets, puis de les tester à nouveau.

Sélectionnez le preset Astro dans Projects

Suivez la documentation Projects pour connecter Git et examiner les permissions. Le dépôt indépendant de l’exemple utilisait :

Réglage Valeur
Branche main
Framework / type Astro / Statique
Preset de construction node22
Installation npm ci
Construction npm run build
Dossier de sortie dist
Sous-dossier du dépôt Vide
Variable publique PUBLIC_SITE_URL avec votre URL finale

Dans un monorepo, indiquez le sous-dossier contenant package.json et la configuration. Publiez le résultat de dist, pas le code source. Ces réglages correspondent au guide officiel de déploiement.

Testez les vraies routes après publication

Saisissez /notas/primera-noche/ directement dans le navigateur et rechargez. Astro a déjà généré son HTML : cet exemple ne nécessite ni marqueur .hostbrid-spa ni fallback vers l’accueil. Une route non générée doit renvoyer 404, tout comme un asset absent.

Vérifié le 8 octobre 2026 : le commit e3bdd60 a été construit et publié via Projects. Accueil, note et image ont renvoyé 200, avec des hashes identiques à l’artefact et aux deux répliques d’hébergement. Chrome a testé les deux routes à 390 et 1280 px, CSS, image, liens et navigation, sans débordement ni requête POST. Les canonical utilisaient le domaine réel ; ces réponses ne contenaient ni meta noindex ni en-tête X-Robots-Tag. Routes et assets absents ont renvoyé 404. Cela ne prouve pas l’indexation par un moteur de recherche.

Le test utilisait notre propre projet et un build manuel. Il ne valide pas l’inscription d’un client, son OAuth ni la publication automatique lors d’un push. Il ne démontre pas non plus Astro SSR ou les services externes. Consultez Projects et les offres actuelles pour choisir la capacité adaptée à votre compte et application.

Gérez vos sites, serveurs et e-mails.

Mot de passe oublié ?

C’est gratuit et ça prend une minute.

8 caractères minimum. Ni que des chiffres, ni un mot de passe courant.

Nous vous enverrons un e-mail pour confirmer le compte.