Aller au contenu

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éployer

Vous pouvez déployer un site Astro sur GitHub Pages en utilisant GitHub Actions pour compiler 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 fichier README du paquet pour plus d’informations.

Configurer Astro pour GitHub Pages

Titre de la section Configurer Astro pour GitHub Pages

Déployer vers une URL github.io

Titre de la section Déployer vers une URL github.io

Définissez les options site et base dans astro.config.mjs.

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'mon-depot',
})

site

Titre de la section site

La valeur de site doit être l’une des suivantes :

  • L’URL suivante en fonction de votre nom d’utilisateur : https://<nom-utilisateur>.github.io
  • L’URL aléatoire autogénérée pour une page privée d’une organisation GitHub : https://<chaine-aleatoire>.pages.github.io/

base

Titre de la section base

Une valeur pour base peut être requise pour qu’Astro considère le nom de votre dépôt (par exemple /mon-depot) 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 GitHub Pages avec un domaine personnalisé

Titre de la section Utiliser GitHub Pages avec un domaine personnalisé

Pour configurer Astro afin d’utiliser GitHub Pages avec un domaine personnalisé, définissez votre domaine comme valeur pour site. Ne définissez pas de valeur pour base :

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://example.com',
})

Configurer une action GitHub

Titre de la section Configurer une action GitHub

  1. Créez un nouveau fichier dans votre projet à .github/workflows/deploy.yml et collez le YAML ci-dessous.

    deploy.yml
    name: Déployer sur GitHub Pages
    

    on:
      # 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 branche
      push:
        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 page
    permissions:
      contents: read
      pages: write
      id-token: write
    

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Extraire votre dépôt à l'aide de git
            uses: actions/checkout@v4
          - name: Installer, compiler et télécharger votre site
            uses: withastro/action@v3
            with:
                # path: . # L'emplacement racine de votre projet Astro dans le dépôt. (facultatif)
                # node-version: 20 # Version spécifique de Node à utiliser pour compiler votre site. La valeur par défaut est 20. (facultatif)
                # package-manager: yarn # Le gestionnaire de paquets Node qui doit être utilisé pour installer les dépendances et compiler votre site. Détecté automatiquement en fonction de votre lockfile. (facultatif)
    

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Déployer sur GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4

  2. (Facultatif) Si vous transmettez des variables d’environnement à votre projet Astro pendant le développement local ou lors de la prévisualisation des compilations, vous devrez définir toutes les variables publiques dans le fichier deploy.yml afin qu’elles soient traitées lorsque vous déployez sur GitHub Pages. (Consultez la documentation de GitHub sur la définition des secrets pour l’ajout de variables d’environnement privées.)

    deploy.yml
    jobs:
       build:
         runs-on: ubuntu-latest
         steps:
           - name: Extrayez votre dépôt à l'aide de git
             uses: actions/checkout@v4
           - name: Installez, créez et téléchargez votre site
             uses: withastro/action@v3
             env:
               # Utilisez des apostrophes pour la valeur de la variable
               PUBLIC_EVM_WALLET_ADDRESS: '0x4bFc229A40d41698154336aFF864f61083E76659'

  3. Sur GitHub, allez dans l’onglet Settings (Paramètres) de votre dépôt et trouvez la section Pages des paramètres.

  4. Choisissez GitHub Actions comme Source de votre site.

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

Exemples

Titre de la section Exemples

Plus de guides de déploiement

Contribuer Communauté Parrainer