Maintenant que vous savez ce que vous allez construire, configurons tous les outils dont vous aurez besoin !
Cette unité vous montre comment configurer votre environnement de développement et le déployer sur Netlify. Passez à Unité 2 si vous êtes déjà à l’aise avec votre environnement et votre flux de travail.
Vous préférez suivre ce didacticiel dans un éditeur de code en ligne ? Suivez les instructions ci-dessous pour commencer à utiliser Google IDX.
Utilisation de Google IDX : suivez ces instructions, puis passez directement à l’unité 2 ! Configurer IDX
Suivez le lien externe pour ouvrir le modèle « Empty project » dans un nouvel espace de travail sur IDX .
Suivez l’invite pour vous connecter à votre compte Google si vous n’êtes pas déjà connecté.
Saisissez un nom pour votre projet si vous souhaitez le modifier par rapport au nom par défaut « Empty project ». Cliquez sur Créer .
Attendez que l’espace de travail soit créé. Cela peut prendre 30 à 60 secondes. Si tout se passe bien, vous verrez le projet Astro chargé dans un éditeur de code en ligne.
Attendez qu’IDX exécute deux scripts : un pour installer Astro et un autre pour démarrer le serveur de développement. Notez que vous pouvez voir brièvement un message indiquant que votre espace de travail « n’a pas pu trouver Astro » si votre espace de travail se charge avant la fin de l’installation d’Astro. Ce message peut être ignoré et annulé s’il ne s’efface pas de lui-même.
Faire un changement
Si tout se passe bien, vous devriez voir le code du fichier src/pages/index.astro ouvert en écran partagé avec un aperçu en direct du site web. Suivez les instructions de « Écrivez votre première ligne d’Astro » pour apporter une modification à ce fichier.
Créer un dépôt GitHub
Accédez à l’élément de navigation « Contrôle de source » dans la barre de menu verticale ou ouvrez avec CTRL + SHIFT + G .
Sélectionnez l’option Publier sur GitHub. Cela créera un nouveau dépôt dans votre compte GitHub.
Suivez les instructions pour vous connecter à votre compte GitHub.
Une fois connecté, revenez à l’onglet IDX et vous aurez le choix de nommer votre nouveau dépôt et de choisir si vous souhaitez créer un dépôt privé ou public. Vous pouvez choisir n’importe quel nom et n’importe quel type de dépôt pour ce didacticiel.
IDX effectuera un commit initial et publiera dans votre nouveau dépôt GitHub.
À l’avenir, chaque fois que vous aurez des modifications à valider sur GitHub, l’icône de navigation du contrôle de source affichera un numéro. Il s’agit du nombre de fichiers qui ont été modifiés depuis votre dernière validation. En accédant à cet onglet et en effectuant deux étapes (validation et publication), vous pourrez saisir un message de validation et mettre à jour votre dépôt.
Déployer votre site
Si vous souhaitez déployer sur Netlify et disposer d’une version publiée en direct de votre site pendant que vous travaillez, passez à l’unité 1 pour Déployer votre site sur le web .
Sinon, passez à l’Unité 2 pour commencer à construire avec Astro !
Dans cette unité, vous allez créer un nouveau projet qui est stocké en ligne sur GitHub et connecté à Netlify .
En écrivant du code, vous validerez périodiquement vos modifications sur GitHub. Netlify utilisera les fichiers de votre dépôt GitHub pour construire votre site web, puis le publiera sur Internet à une adresse unique où tout le monde pourra le consulter.
Chaque fois que vous validez une modification sur GitHub, une notification sera envoyée à Netlify. Ensuite, Netlify reconstruira automatiquement votre site pour refléter ces modifications.
Tutorials