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

  1. Définissez les options site, et si necessaire, base dans astro.config.mjs.

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

    export default defineConfig({
      site: 'https://astronaut.github.io',
      base: '/my-repo',
    })
    • site doit être quelque chose comme https://<YOUR_USERNAME>.github.io, ou https://mon-domaine-personnalise.com.
    • base doit être le nom de votre dépôt commençant par un slash, par exemple /my-repo. C’est ainsi qu’Astro comprend que la racine de votre site Web est /my-repo, plutôt que la valeur par défaut /.

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

    deploy.yml
    name: Deploy to 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: Checkout your repository using git
            uses: actions/checkout@v2
          - name: Install, build, and upload your site
            uses: withastro/action@v0
            with:
                # path: . # L'emplacement racine de votre projet Astro dans le dépôt. (facultatif)
                # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (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: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

  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.

Plus de guides de déploiement

Filtrer par type de déploiement