Outils GitHub Pages

Gratuit Generateur de workflow GitHub Pages

Générez un YAML de workflow GitHub Actions pour deployer un site statique sur GitHub Pages.

Chargement de l'outil...

Qu'est-ce que Generateur de workflow GitHub Pages ?

Un workflow GitHub Pages est un fichier YAML GitHub Actions qui construit et déploie automatiquement votre site à chaque push sur la branche principale. Les débutants ont souvent besoin d'un modèle qui inclut les autorisations correctes, les paramètres de concurrence, la configuration Node, l'étape de build et le téléchargement d'artefact. Cet outil génère un pages.yml prêt à l'emploi avec la structure de déploiement standard.

Réponse rapide

Un workflow GitHub Actions automatise la construction et le déploiement de votre site statique sur GitHub Pages à chaque push. Le YAML généré inclut les autorisations standard, les paramètres de concurrence et les étapes de build.

Last updated: 2026-06-11

Limites

  • Le workflow généré est un modèle standard. Les outils de build personnalisés, les monorepos ou les pipelines multi-étapes peuvent nécessiter des étapes de travail supplémentaires ou des actions personnalisées.
  • Le déploiement GitHub Pages via Actions fonctionne uniquement pour les dépôts publics ou les dépôts privés avec les plans GitHub Pro, Team ou Enterprise.
  • Le fichier placeholder CNAME doit être créé ou copié dans le répertoire de sortie si le site utilise un domaine personnalisé.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez le préréglage de type de site ou saisissez des paramètres de build personnalisés.
  2. Définissez la version de Node, la commande de build et le répertoire de sortie pour votre projet.
  3. Copiez le YAML généré dans .github/workflows/pages.yml dans votre dépôt.
  4. Activez GitHub Pages dans les paramètres de votre dépôt pour utiliser GitHub Actions comme source.

A quoi il sert

  • Configurer un déploiement automatisé pour un site HTML statique simple sur GitHub Pages.
  • Créer un workflow de build et déploiement pour un projet statique Vite ou Astro.
  • Ajouter une étape de placeholder CNAME pour que les domaines personnalisés ne soient pas perdus lors du déploiement.

Cas d'usage

Exemples concrets

Exemple

Déploiement de site HTML simple

Un site HTML statique sans étape de build a besoin que le workflow télécharge le répertoire racine tel quel. Le générateur crée un workflow minimal sans étape de build.

Exemple

Déploiement de projet Vite

Un projet Vite a besoin de npm ci, npm run build, et du dossier dist téléchargé. Le générateur crée le workflow correct avec téléchargement d'artefact.

Erreurs frequentes

  • Utiliser le mauvais répertoire de sortie, ce qui fait que GitHub Pages sert un site vide ou incomplet.
  • Oublier de définir les autorisations correctes pour pages et id-token dans le workflow.
  • Laisser le placeholder CNAME dans le workflow lorsque le site n'utilise pas de domaine personnalisé.

Vérification

  1. Poussez le fichier workflow dans votre dépôt et vérifiez l'onglet Actions pour confirmer que le workflow s'exécute avec succès.
  2. Après une exécution réussie, visitez votre URL GitHub Pages et vérifiez que le contenu du site correspond à la sortie attendue.

FAQ

Questions sur Generateur de workflow GitHub Pages

Où doit être enregistré le fichier workflow ?

Enregistrez-le sous .github/workflows/pages.yml dans votre dépôt. GitHub Actions détecte et exécute automatiquement les fichiers workflow dans ce répertoire.

Dois-je configurer quelque chose dans les paramètres du dépôt ?

Oui. Allez dans Settings > Pages et définissez la source sur GitHub Actions. Cela indique à GitHub Pages d'utiliser le déploiement par workflow au lieu du déploiement par branche.

Quelle version de Node dois-je utiliser ?

Utilisez la version Node qui correspond aux exigences de votre projet. Node 20 ou 22 sont des choix sûrs pour la plupart des générateurs de sites statiques. Le champ de version dans le workflow généré peut être ajusté pour correspondre à votre environnement local ou CI.

Puis-je utiliser pnpm ou yarn au lieu de npm dans le workflow GitHub Actions ?

Oui. Remplacez les commandes npm par l'équivalent pour votre gestionnaire de paquets. Pour pnpm, utilisez pnpm/action-setup avant l'étape d'installation. Pour yarn, remplacez npm install par yarn install --frozen-lockfile et npm run build par yarn build. pnpm et yarn sont tous deux compatibles avec GitHub Actions et peuvent être utilisés pour builder et déployer des sites statiques sur GitHub Pages.

Outils lies

Autres outils outils github pages

A essayer aussi

A essayer aussi