jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas GitHub Pages

Gratis Generador de workflow GitHub Pages

Genera un YAML de workflow de GitHub Actions para desplegar sitios estáticos en GitHub Pages.

Cargando herramienta...

Qué es Generador de workflow GitHub Pages?

Un flujo de trabajo de GitHub Pages es un archivo YAML de GitHub Actions que compila y despliega automáticamente su sitio cada vez que envía cambios a la rama principal. Los principiantes a menudo necesitan una plantilla que incluya los permisos correctos, la configuración de concurrencia, la configuración de Node, el paso de compilación y la carga de artefactos. Esta herramienta genera un pages.yml listo para usar con la estructura de despliegue estándar.

Respuesta rápida

Un flujo de trabajo de GitHub Actions automatiza la compilación y el despliegue de su sitio estático en GitHub Pages en cada push. El YAML generado incluye los permisos estándar, la configuración de concurrencia y los pasos de compilación.

Last updated: 2026-06-11

Limitaciones

  • El flujo de trabajo generado es una plantilla estándar. Las herramientas de compilación personalizadas, los monorepos o los pipelines de múltiples pasos pueden necesitar pasos de trabajo adicionales o acciones personalizadas.
  • El despliegue de GitHub Pages mediante Actions solo funciona para repositorios públicos o repositorios privados con planes GitHub Pro, Team o Enterprise.
  • El archivo de marcador de posición CNAME debe crearse o copiarse en el directorio de salida si el sitio usa un dominio personalizado.

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

Cómo usar esta herramienta

  1. Elija el preset de tipo de sitio o ingrese configuraciones de compilación personalizadas.
  2. Establezca la versión de Node, el comando de compilación y el directorio de salida para su proyecto.
  3. Copie el YAML generado en .github/workflows/pages.yml en su repositorio.
  4. Habilite GitHub Pages en la configuración de su repositorio para usar GitHub Actions como fuente.

Para qué puedes usarla

  • Configurar el despliegue automatizado para un sitio estático HTML simple en GitHub Pages.
  • Crear un flujo de trabajo de compilación y despliegue para un proyecto estático de Vite o Astro.
  • Agregar un paso de marcador de posición CNAME para que los dominios personalizados no se pierdan en el despliegue.

Casos de uso

Ejemplos prácticos

Ejemplo

Despliegue de sitio HTML simple

Un sitio HTML estático sin paso de compilación necesita que el flujo de trabajo cargue el directorio raíz tal cual. El generador crea un flujo de trabajo mínimo sin paso de compilación.

Ejemplo

Despliegue de proyecto Vite

Un proyecto Vite necesita npm ci, npm run build y la carpeta dist cargada. El generador crea el flujo de trabajo correcto con carga de artefactos.

Errores comunes

  • Usar el directorio de salida incorrecto, lo que hace que GitHub Pages sirva un sitio vacío o incompleto.
  • Olvidar establecer los permisos correctos para pages e id-token en el flujo de trabajo.
  • Dejar el marcador de posición CNAME en el flujo de trabajo cuando el sitio no usa un dominio personalizado.

Verificación

  1. Envía el archivo de flujo de trabajo a su repositorio y revise la pestaña Actions para confirmar que el flujo de trabajo se ejecute correctamente.
  2. Después de una ejecución exitosa, visite su URL de GitHub Pages y verifique que el contenido del sitio coincida con la salida esperada.

FAQ

Preguntas sobre Generador de workflow GitHub Pages

¿Dónde debería guardarse el archivo de flujo de trabajo?

Guárdelo como .github/workflows/pages.yml en su repositorio. GitHub Actions detecta y ejecuta automáticamente los archivos de flujo de trabajo en ese directorio.

¿Necesito configurar algo en la configuración del repositorio?

Sí. Vaya a Settings > Pages y establezca la fuente en GitHub Actions. Esto le indica a GitHub Pages que use el despliegue del flujo de trabajo en lugar del despliegue basado en ramas.

¿Qué versión de Node debería usar?

Use la versión de Node que coincida con los requisitos de su proyecto. Node 20 o 22 son opciones seguras para la mayoría de los generadores de sitios estáticos. El campo de versión en el flujo de trabajo generado puede ajustarse para coincidir con su entorno local o CI.

¿Puedo usar pnpm o yarn en lugar de npm en el flujo de trabajo de GitHub Actions?

Sí. Reemplace los comandos npm por los equivalentes de su gestor de paquetes. Para pnpm, use pnpm/action-setup antes del paso de instalación. Para yarn, reemplace npm install con yarn install --frozen-lockfile y npm run build con yarn build. Tanto pnpm como yarn son compatibles con GitHub Actions y pueden usarse para compilar y desplegar sitios estáticos en GitHub Pages.

Herramientas relacionadas

Más herramientas github pages

Prueba también

Prueba también