# Implementación automática del sitio web

Automatiza el despliegue de tu código con GitHub Actions y GitHub Pages para publicar actualizaciones en un sitio en producción con cada push a la rama principal.

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.

> \[!NOTE]
> La URL de su sitio GitHub Pages depende de la versión de GitHub que utilice.
>
> * A fecha de GitHub.com, tu sitio está publicado en `YOUR-USERNAME.github.io/REPOSITORY`.
> * Si usa GitHub con residencia de datos en GHE.com, el sitio se publica en `pages.SUBDOMAIN.ghe.com/YOUR-USERNAME/REPOSITORY`, donde `SUBDOMAIN` es el subdominio de su empresa.
> * En GitHub Enterprise Server, tu sitio está publicado en `pages.HOSTNAME/YOUR-USERNAME/REPOSITORY`, donde `HOSTNAME` es el nombre de host de tu instancia GitHub Enterprise Server.

## Prerequisites

* Un `stargazers-log` repositorio con tu funcionalidad integrada. Si aún no lo ha combinado, consulte [Revisión de los cambios propuestos](/es/get-started/start-your-journey/reviewing-your-proposed-changes).

## 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 **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-plus" aria-label="plus" role="img"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path></svg>** y, a continuación, haga clic en **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-plus" aria-label="plus" role="img"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path></svg> 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 copy
   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](/es/get-started/start-your-journey/git-and-github-learning-resources).
* 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](/es/copilot/concepts/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](/es/copilot/concepts/agents).
* 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](/es/actions/get-started/understand-github-actions).
* 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](/es/pages/getting-started-with-github-pages).