Implementación automática del sitio web

Tu funcionalidad se ha integrado, así que ya puedes compartirla. En este tutorial, configurarás el despliegue automático para que cada push a main publique tu proyecto de software en un sitio web en producción.

Prerequisites

• Un stargazers-log repositorio con tu funcionalidad integrada. Si aún no lo ha combinado, consulte Revisión de los cambios propuestos.

Habilitar GitHub Pages

Configura GitHub Pages para alojar tu sitio y usa GitHub Actions para compilarlo y publicarlo.

1. En GitHub, vaya a su repositorio stargazers-log.
2. En el nombre del repositorio, haga clic en Configuración.
3. En la barra lateral, en la sección "Código y automatización", haga clic en Páginas.
4. En "Compilación e implementación", en la lista desplegable Origen , seleccione GitHub Actions.

Deje la otra configuración en sus valores predeterminados. A continuación, creará su propio flujo de trabajo para compilar e implementar el sitio automáticamente.

Creación de un flujo de trabajo de implementación

Un flujo de trabajo es un conjunto de pasos automatizados que GitHub Actions ejecuta por ti. Añade uno que compile y despliegue tu sitio cada vez que hagas push a main.

1. En el repositorio, crea un archivo con el nombre .github/workflows/deploy.yml.

   1. En la página principal del repositorio encima de stargazers-log la lista de archivos, haga clic en y, a continuación, haga clic en Crear nuevo archivo.
   2. En el campo del nombre de archivo, escriba .github/workflows/deploy.yml.

2. Agregue el siguiente contenido de flujo de trabajo.

   YAML

   name: Deploy to GitHub Pages
   
   on:
     push:
       branches:
         - main
   
   permissions:
     contents: read
     pages: write
     id-token: write
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       steps:
         - name: Checkout
           uses: actions/checkout@v6
         - name: Setup Pages
           uses: actions/configure-pages@v5
         - name: Upload artifact
           uses: actions/upload-pages-artifact@v4
           with:
             path: '.'
         - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v4
   

3. Confirme el archivo directamente en la main rama.

Descripción del flujo de trabajo

Cada parte del flujo de trabajo tiene un trabajo que realizar:

• on le indica a GitHub Actions que ejecute el flujo de trabajo en cada push a main.
• permissions conceda al flujo de trabajo el acceso que necesita para publicar en GitHub Pages.
• environment conecta la tarea con tu sitio GitHub Pages y expone la URL publicada como ${{ steps.deployment.outputs.page_url }}.
• steps consulte el código, prepare GitHub Pages, cargue los archivos como un artefacto e impleméntelos en el sitio activo.

Ver tu sitio en vivo

Después de confirmar el flujo de trabajo, GitHub Actions lo ejecuta automáticamente.

1. En el repositorio, haga clic en la pestaña Acciones para ver la ejecución del flujo de trabajo.
2. Haga clic en la última ejecución del flujo de trabajo para ver un resumen con los detalles de la tarea.
3. Cuando finalice la ejecución, abra su sitio publicado en https://YOUR-USERNAME.github.io/stargazers-log/. Sustituya YOUR-USERNAME por su nombre de usuario.
   • Por ejemplo, si el nombre de usuario de tu cuenta GitHub es octocat, tu sitio está en https://octocat.github.io/stargazers-log/.

A partir de ahora, cada push a main vuelve a desplegar tu sitio con tus cambios más recientes.

Lo que ha creado

A lo largo de esta serie, has creado un proyecto de software completo y has practicado el flujo de trabajo GitHub:

Stage	Lo que ha aprendido
Creación de un proyecto de software	Repositorios, archivos README
Planificación del trabajo	Problemas, proyectos (paneles de proyecto)
Conexión local
GitHub Desktop, clonación
Escritura y almacenamiento de código	Ramas, confirmaciones, solicitudes de incorporación de cambios, Copilot
Revisión de los cambios	Revisiones de solicitudes de incorporación de cambios, Copilot
Desplegando automáticamente
GitHub Actions, GitHub Pages

Pasos siguientes

• Amplía tu comprensión de Git y GitHub. Para obtener más información, vea Recursos de aprendizaje de Git y GitHub.
• Explora Chat de Copiloto para aprender más rápido y obtener ayuda mientras programas. Para obtener más información, consulte Acerca de GitHub Copilot Chat.
• Profundiza en la inteligencia artificial y aprende cómo los agentes pueden actuar como un asociado de codificación práctico convirtiendo ideas en pequeños pasos accionables, generando ejemplos y controlando el trabajo repetitivo. Para obtener más información, consulte Conceptos para agentes de GitHub Copilot.
• Obtenga más información sobre cómo automatizar los proyectos de software con GitHub Actions flujos de trabajo. Para obtener más información, vea Descripción de Acciones de GitHub.
• Agregue un dominio personalizado o explore más formas de publicar el sitio web con GitHub Pages. Para obtener más información, vea Introducción a las páginas de GitHub.