Déployer votre site Astro sur GitHub Pages
Vous pouvez utiliser GitHub Pages pour héberger un site Astro directement depuis un dépôt sur GitHub.com.
Comment déployer
Titre de la section Comment déployerVous pouvez déployer un site Astro sur les GitHub Pages en utilisant une GitHub Actions pour construire (Build) et déployer automatiquement votre site. Pour ce faire, votre code source doit être hébergé sur GitHub.
Astro maintient l’action officielle withastro/action pour déployer vos projets avec très peu de configuration. Suivez les instructions ci-dessous pour déployer votre site Astro sur GitHub Pages, et consultez le README du GitHub Action Astro pour plus d’informations.
Configurer Astro pour les pages GitHub
Titre de la section Configurer Astro pour les pages GitHubDéployer vers une URL github.io
Titre de la section Déployer vers une URL github.ioDéfinissez les options site et base dans astro.config.mjs.
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://astronaut.github.io', base: 'my-repo',})La valeur de site doit être l’une des suivantes :
- L’URL suivante en fonction de votre nom d’utilisateur :
https://<username>.github.io - L’URL aléatoire autogénérée pour une page privée de l’organisation GitHub :
https://<random-string>.pages.github.io/
Une valeur pour base peut être requise pour qu’Astro considère le nom de votre dépôt (par exemple /my-repo) comme la racine de votre site web.
La valeur de base doit être le nom de votre dépôt commençant par un slash, par exemple /mon-blog. Ceci afin qu’Astro comprenne que la racine de votre site web est /mon-repo, plutôt que le / par défaut.
Utiliser les pages GitHub avec un domaine personnalisé
Titre de la section Utiliser les pages GitHub avec un domaine personnaliséPour configurer Astro afin d’utiliser les pages GitHub avec un domaine personnalisé, définissez votre domaine comme valeur pour site. Ne définissez pas de valeur pour base :
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://example.com',})Configurer une action GitHub
Titre de la section Configurer une action GitHub-
Créez un nouveau fichier dans votre projet à
.github/workflows/deploy.ymlet collez le YAML ci-dessous.deploy.yml name: Deploy to GitHub Pageson:# Déclenchez le workflow chaque fois que vous poussez vers la branche `main`# Vous utilisez un nom de branche différent ? Remplacez `main` par le nom de votre branchepush:branches: [ main ]# Vous permet d'exécuter ce workflow manuellement à partir de l'onglet Actions sur GitHub.workflow_dispatch:# Autoriser cette tâche à cloner le dépôt et à créer un déploiement de pagepermissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v4- name: Install, build, and upload your siteuses: withastro/action@v3with:# path: . # L'emplacement racine de votre projet Astro dans le dépôt. (facultatif)# node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (facultatif)# package-manager: yarn # Le gestionnaire de paquets Node qui doit être utilisé pour installer les dépendances et build votre site. Détecté automatiquement en fonction de votre lockfile. (facultatif)deploy:needs: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4 -
Sur GitHub, allez dans l’onglet Settings (Paramètres) de votre dépôt et trouvez la section Pages des paramètres.
-
Choisissez GitHub Actions comme Source de votre site.
-
Validez (Commit) le nouveau fichier Workflow (flux de travail) et poussez-le (Push) sur GitHub.
Votre site devrait maintenant être publié ! Lorsque vous apportez des modifications au dépôt de votre projet Astro, l’action GitHub les déploie automatiquement pour vous.
