Aperçu de la configuration
Astro est flexible et sans contrainte au niveau du choix du framework, ce qui vous permet de configurer votre projet de nombreuses façons différentes. Cela signifie que le démarrage d’un nouveau projet peut sembler difficile : il n’y a pas de « meilleure façon » de configurer votre projet Astro !
Les guides de cette section « Configuration » vous aideront à vous familiariser avec les différents fichiers qui vous permettent de configurer et de personnaliser certains aspects de votre projet et de votre environnement de développement.
S’il s’agit de votre premier projet Astro, ou si cela fait un moment que vous n’avez pas configuré un nouveau projet, utilisez les guides suivants et les références de la documentation pour obtenir de l’aide.
Le fichier de configuration d’Astro
Titre de la section Le fichier de configuration d’AstroLe fichier de configuration Astro est un fichier JavaScript inclus à la racine de chaque projet de démarrage :
import { defineConfig } from 'astro/config'
export default defineConfig({ // vos options de configuration ici...})Il n’est nécessaire que si vous avez quelque chose à configurer, mais la plupart des projets utiliseront ce fichier. L’aide defineConfig() fournit une IntelliSense automatique dans votre IDE et est l’endroit où vous ajouterez toutes vos options de configuration pour dire à Astro comment construire et rendre votre projet en HTML.
Nous recommandons d’utiliser le format de fichier par défaut .mjs dans la plupart des cas, ou .ts si vous voulez écrire du TypeScript dans votre fichier de configuration. Cependant, astro.config.js et astro.config.cjs sont également supportés.
Le fichier de configuration TypeScript
Titre de la section Le fichier de configuration TypeScriptChaque projet de démarrage Astro inclut un fichier tsconfig.json dans votre projet. Le script du composant d’Astro est Typescript, qui fournit l’outil d’édition d’Astro et vous permet d’ajouter optionnellement une syntaxe à votre JavaScript pour la vérification du type du code de votre propre projet.
Utilisez le fichier tsconfig.json pour configurer le modèle TypeScript qui effectuera les vérifications de type sur votre code, configurer les plugins TypeScript, définir les alias d’importation, et plus encore.
Expérience de développement
Titre de la section Expérience de développementExpérience de développement
Titre de la section Expérience de développementLorsque vous travaillez en mode développement, vous pouvez tirer parti de votre éditeur de code et d’autres outils pour améliorer l’expérience du développeur Astro.
Astro fournit sa propre extension officielle VS Code et est compatible avec plusieurs autres outils d’édition populaires. Astro fournit également une barre d’outils personnalisable qui s’affiche dans l’aperçu de votre navigateur lorsque le serveur de développement est en cours d’exécution. Vous pouvez installer et même créer vos propres applications de barre d’outils pour des fonctionnalités supplémentaires.
Tâches courantes d’un nouveau projet
Titre de la section Tâches courantes d’un nouveau projetVoici quelques premières étapes que vous pourriez choisir de suivre avec un nouveau projet Astro.
Ajouter votre domaine de déploiement
Titre de la section Ajouter votre domaine de déploiementPour générer votre sitemap et créer des URL canoniques, configurez votre URL de déploiement dans l’option site. Si vous déployez vers un chemin (par exemple www.example/docs), vous pouvez également configurer une base pour la racine de votre projet.
De plus, les différents hôtes de déploiement peuvent avoir un comportement différent en ce qui concerne les barres obliques à la fin de vos URLs. (par exemple, example.com/about vs example.com/about/). Une fois que votre site est déployé, vous pouvez avoir besoin de configurer votre préférence trailingSlash.
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://www.example.com', base: '/docs', trailingSlash: 'always',})Ajouter les métadonnées du site
Titre de la section Ajouter les métadonnées du siteAstro n’utilise pas son fichier de configuration pour les données de référencement ou les métadonnées, mais seulement pour les informations nécessaires à la construction du code de votre projet et à son rendu en HTML.
Au lieu de cela, ces informations sont ajoutées au <head> de votre page dans les balises HTML <link> et <meta>, comme si vous écriviez des pages HTML simples.
Un modèle courant pour les sites Astro est de créer un composant .astro qui peut être ajouté à un composant de mise en page commun afin qu’il puisse s’appliquer à toutes vos pages.
---import Head from './Head.astro';const { ...props } = Astro.props;---<html> <head> <meta charset="utf-8"> <Head /> <!-- --> </head> <body><!-- --></body></html>Comme Head.astro est un composant Astro ordinaire, vous pouvez importer des fichiers et recevoir des éléments transmis par d’autres composants, tels qu’un titre de page spécifique.
---import Favicon from '../assets/Favicon.astro';import SomeOtherTags from './SomeOtherTags.astro';const { title = 'Mon site Astro', ...props } = Astro.props;---<link rel="sitemap" href="/sitemap-index.xml"><title>{title}</title><meta name="description" content="Bienvenue sur mon nouveau site Astro !">
<!-- Web analytics --><script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<!-- Balises Open Graph --><meta property="og:title" content="Mon nouveau site Astro" /><meta property="og:type" content="website" /><meta property="og:url" content="http://www.example.com/" /><meta property="og:description" content="Bienvenue sur mon nouveau site Astro !" /><meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp"><meta property="og:image:alt" content="">
<SomeOtherTags />
<Favicon />