|
| 1 | +--- |
| 2 | +title: "Práctica de HagiCode: Cómo usar GitHub Actions para implementar el despliegue automático de Docusaurus" |
| 3 | +date: 2026-01-26 |
| 4 | +truncate: true |
| 5 | +englishSlug: "docusaurus-auto-deployment-with-github-actions" |
| 6 | +tags: [Docusaurus, GitHub Actions, GitHub Pages, Despliegue automático, CI/CD] |
| 7 | +description: "Este proyecto tenía el nombre en clave PCode, ahora se ha renombrado oficialmente a HagiCode. Este artículo registra cómo introducir la capacidad de despliegue automatizado de sitios estáticos para el proyecto, haciendo que la publicación de contenido sea tan simple como beber agua." |
| 8 | +--- |
| 9 | + |
| 10 | +## Añadir soporte de despliegue automático a GitHub Pages para HagiCode |
| 11 | + |
| 12 | +> Este proyecto tenía el nombre en clave PCode, ahora se ha renombrado oficialmente a HagiCode. Este artículo registra cómo introducir la capacidad de despliegue automatizado de sitios estáticos para el proyecto, haciendo que la publicación de contenido sea tan simple como beber agua. |
| 13 | +
|
| 14 | +## Antecedentes/Introducción |
| 15 | + |
| 16 | +Durante el desarrollo de HagiCode, nos encontramos con un problema muy real: a medida que los documentos y propuestas aumentaban, cómo gestionar y mostrar estos contenidos de manera eficiente se convirtió en una tarea urgente. Decidimos introducir GitHub Pages para alojar nuestro sitio estático, pero la construcción y el despliegue manual eran demasiado problemáticos: cada cambio requería construir y empaquetar localmente, y luego enviar manualmente a la rama `gh-pages`. Esto no solo era ineficiente, sino que también propenso a errores. |
| 17 | + |
| 18 | +Para resolver este problema (principalmente por pereza), necesitábamos un flujo de despliegue automatizado. Este artículo registrará en detalle cómo añadir soporte de despliegue automático con GitHub Actions para el proyecto HagiCode, permitiéndonos centrarnos solo en la creación de contenido y dejar el resto al proceso automatizado. |
| 19 | + |
| 20 | +## Sobre HagiCode |
| 21 | + |
| 22 | +> Oye, permíteme presentarte lo que estamos construyendo |
| 23 | +
|
| 24 | +Estamos desarrollando **HagiCode**——un asistente de código inteligente impulsado por IA que hace que la experiencia de desarrollo sea más inteligente, más conveniente y más divertida. |
| 25 | + |
| 26 | +**Inteligente**——asistencia de IA durante todo el proceso, desde la idea hasta el código, multiplicando la eficiencia de codificación varias veces. **Conveniente**——operaciones concurrentes multiproceso, aprovechando al máximo los recursos, haciendo que el flujo de desarrollo sea fluido sin obstáculos. **Divertido**——mecanismo de gamificación y sistema de logros, haciendo que la codificación ya no sea aburrida y llena de sentido de logro. |
| 27 | + |
| 28 | +El proyecto está iterando rápidamente. Si te interesa la redacción técnica, la gestión del conocimiento o el desarrollo asistido por IA, bienvenido a visitar [GitHub](https://github.com/HagiCode-org/site) para echar un vistazo~ |
| 29 | + |
| 30 | +## Análisis de objetivos |
| 31 | + |
| 32 | +Antes de empezar a trabajar, primero debemos aclarar qué tiene que hacer esta tarea. Después de todo, afilar el hacha no le quita tiempo al leñador. |
| 33 | + |
| 34 | +### Requisitos centrales |
| 35 | + |
| 36 | +1. **Construcción automatizada**:Cuando el código se envía a la rama `main`, se activa automáticamente el proceso de construcción. |
| 37 | +2. **Despliegue automático**:Después de que la construcción sea exitosa, los archivos estáticos generados se despliegan automáticamente en GitHub Pages. |
| 38 | +3. **Consistencia del entorno**:Asegurar que el entorno de CI y el entorno de construcción local sean consistentes, evitando la vergüenza de "funciona localmente, pero falla en línea". |
| 39 | + |
| 40 | +### Selección técnica |
| 41 | + |
| 42 | +Considerando que HagiCode está construido con Docusaurus (un generador de sitios estáticos de React muy popular), podemos usar GitHub Actions para lograr este objetivo. |
| 43 | + |
| 44 | +## Configurar el flujo de trabajo de GitHub Actions |
| 45 | + |
| 46 | +GitHub Actions es el servicio CI/CD proporcionado por GitHub. Al definir archivos de flujo de trabajo en formato YAML en el repositorio de código, podemos personalizar varias tareas automatizadas. |
| 47 | + |
| 48 | +### Crear archivo de flujo de trabajo |
| 49 | + |
| 50 | +Necesitamos crear un nuevo archivo de configuración en la carpeta `.github/workflows` en el directorio raíz del proyecto, por ejemplo llamado `deploy.yml`. Si la carpeta no existe, recuerda crearla manualmente primero. |
| 51 | + |
| 52 | +La lógica central de este archivo de configuración es la siguiente: |
| 53 | + |
| 54 | +1. **Condición de activación**:escuchar eventos `push` de la rama `main`. |
| 55 | +2. **Entorno de ejecución**:la última versión de Ubuntu. |
| 56 | +3. **Pasos de construcción**: |
| 57 | + - Obtener el código |
| 58 | + - Instalar Node.js |
| 59 | + - Instalar dependencias (`npm install`) |
| 60 | + - Construir archivos estáticos (`npm run build`) |
| 61 | +4. **Pasos de despliegue**:usar `action-gh-pages` oficial para enviar los productos de construcción a la rama `gh-pages`. |
| 62 | + |
| 63 | +### Código de configuración clave |
| 64 | + |
| 65 | +A continuación se muestra la plantilla de configuración que finalmente adoptamos: |
| 66 | + |
| 67 | +```yaml |
| 68 | +name: Deploy to GitHub Pages |
| 69 | + |
| 70 | +# Condición de activación: cuando se envía a la rama main |
| 71 | +on: |
| 72 | + push: |
| 73 | + branches: |
| 74 | + - main |
| 75 | + # Se pueden agregar filtros de ruta según sea necesario, por ejemplo, construir solo cuando cambien los documentos |
| 76 | + # paths: |
| 77 | + # - 'docs/**' |
| 78 | + # - 'package.json' |
| 79 | + |
| 80 | +# Configurar permisos, esto es importante para desplegar en GitHub Pages |
| 81 | +permissions: |
| 82 | + contents: read |
| 83 | + pages: write |
| 84 | + id-token: write |
| 85 | + |
| 86 | +# Control de concurrencia: cancelar construcciones antiguas de la misma rama |
| 87 | +concurrency: |
| 88 | + group: "pages" |
| 89 | + cancel-in-progress: false |
| 90 | + |
| 91 | +jobs: |
| 92 | + build: |
| 93 | + runs-on: ubuntu-latest |
| 94 | + steps: |
| 95 | + - name: Checkout |
| 96 | + uses: actions/checkout@v4 |
| 97 | + # Nota: se debe configurar fetch-depth: 0, de lo contrario puede causar que el número de versión de construcción sea inexacto |
| 98 | + with: |
| 99 | + fetch-depth: 0 |
| 100 | + |
| 101 | + - name: Setup Node |
| 102 | + uses: actions/setup-node@v4 |
| 103 | + with: |
| 104 | + node-version: 20 # Se recomienda mantenerlo consistente con el entorno de desarrollo local |
| 105 | + cache: 'npm' # Habilitar el caché puede acelerar el proceso de construcción |
| 106 | + |
| 107 | + - name: Install dependencies |
| 108 | + run: npm ci |
| 109 | + # Usar npm ci en lugar de npm install, porque es más rápido y más estricto, adecuado para entornos CI |
| 110 | + |
| 111 | + - name: Build website |
| 112 | + run: npm run build |
| 113 | + env: |
| 114 | + # Si la construcción de tu sitio requiere variables de entorno, configúralas aquí |
| 115 | + # NODE_ENV: production |
| 116 | + # PUBLIC_URL: /your-repo-name |
| 117 | + |
| 118 | + - name: Upload artifact |
| 119 | + uses: actions/upload-pages-artifact@v3 |
| 120 | + with: |
| 121 | + path: ./build # Directorio de salida predeterminado de Docusaurus |
| 122 | + |
| 123 | + deploy: |
| 124 | + environment: |
| 125 | + name: github-pages |
| 126 | + url: ${{ steps.deployment.outputs.page_url }} |
| 127 | + runs-on: ubuntu-latest |
| 128 | + needs: build |
| 129 | + steps: |
| 130 | + - name: Deploy to GitHub Pages |
| 131 | + id: deployment |
| 132 | + uses: actions/deploy-pages@v4 |
| 133 | +``` |
| 134 | +
|
| 135 | +## Problemas encontrados durante la implementación |
| 136 | +
|
| 137 | +En la práctica real, nos encontramos con algunos problemas. Aquí los compartimos con la esperanza de que puedan evitarlos (o prepararse con anticipación para las soluciones). |
| 138 | +
|
| 139 | +### 1. Problema de permisos de GitHub Token |
| 140 | +
|
| 141 | +Al principio de la configuración, el despliegue siempre reportaba error 403 (Forbidden). Después de buscar mucho, descubrimos que el `GITHUB_TOKEN` predeterminado de GitHub no tenía permiso de escritura en Pages. |
| 142 | + |
| 143 | +**Solución**:en `Settings` -> `Actions` -> `General` -> `Workflow permissions` del repositorio, asegúrate de elegir **"Read and write permissions"**. |
| 144 | + |
| 145 | +### 2. Ruta incorrecta del directorio de construcción |
| 146 | + |
| 147 | +Docusaurus coloca los archivos estáticos construidos en el directorio `build` de manera predeterminada. Pero algunos proyectos (por ejemplo, Create React App predeterminado es `build`, Vite predeterminado es `dist`) pueden tener configuraciones diferentes. Si se reporta un error en Actions de que no se encuentran los archivos, recuerda verificar la configuración de la ruta de salida en `docusaurus.config.js`. |
| 148 | + |
| 149 | +### 3. Problema de subruta |
| 150 | + |
| 151 | +Si tu repositorio no es una página de usuario (es decir, no es `username.github.io`), sino una página de proyecto (por ejemplo, `username.github.io/project-name`), necesitas configurar `baseUrl`. |
| 152 | + |
| 153 | +En `docusaurus.config.js`: |
| 154 | + |
| 155 | +```javascript |
| 156 | +module.exports = { |
| 157 | + // ... |
| 158 | + url: 'https://hagicode.com', // Tu URL de Hagicode |
| 159 | + baseUrl: '/', // Despliegue en ruta raíz |
| 160 | + // ... |
| 161 | +}; |
| 162 | +``` |
| 163 | +Este punto es fácil de ignorar, una configuración incorrecta hará que la página se abra en blanco, porque las rutas de los recursos no se pueden cargar. |
| 164 | + |
| 165 | +## Verificar los resultados |
| 166 | + |
| 167 | +Después de configurar todo y enviar el código, podemos ir a la pestaña **Actions** del repositorio de GitHub para ver el espectáculo. |
| 168 | + |
| 169 | +Verás círculos amarillos (el flujo de trabajo está ejecutándose), cuando se vuelva verde representa éxito. Si se vuelve rojo, haz clic para ver los registros, generalmente se puede identificar el problema (la mayoría de las veces es un error ortográfico o una configuración de ruta incorrecta). |
| 170 | + |
| 171 | +Después de una construcción exitosa, visita `https://<tu-usuario>.github.io/<nombre-repositorio>/` para ver el sitio nuevo. |
| 172 | + |
| 173 | +## Resumen |
| 174 | + |
| 175 | +Al introducir GitHub Actions, logramos con éxito el despliegue automatizado del sitio de documentación de HagiCode. Esto no solo ahorra tiempo de operación manual, sino lo más importante, garantiza la estandarización del proceso de publicación. Ahora, sin importar qué compañero actualice el documento, siempre que se fusione a la rama `main`, en unos pocos minutos se puede ver el último contenido en línea. |
| 176 | + |
| 177 | +**Beneficios clave**: |
| 178 | +- **Mejora de eficiencia**:de "empaquetado manual, carga manual" a "código es publicación". |
| 179 | +- **Reducción de errores**:elimina la posibilidad de errores de operación humana. |
| 180 | +- **Optimización de experiencia**:permite que los desarrolladores se concentren más en la calidad del contenido, en lugar de ser molestados por tediosos procesos de despliegue. |
| 181 | + |
| 182 | +Aunque configurar CI/CD puede ser un poco problemático al principio (especialmente varios problemas de permisos y rutas), es una inversión única con un retorno enorme a largo plazo. Se recomienda encarecidamente que todos los proyectos de sitios estáticos se integren en flujos automatizados similares. |
| 183 | + |
| 184 | +## Materiales de referencia |
| 185 | + |
| 186 | +- [Documentación oficial de GitHub Actions](https://docs.github.com/en/actions) |
| 187 | +- [Guía de despliegue de Docusaurus](https://docusaurus.io/docs/deployment) |
| 188 | +- [Instrucciones de uso de actions-gh-pages Action](https://github.com peaceiris/actions-gh-pages) |
| 189 | + |
| 190 | + |
| 191 | + |
| 192 | +--- |
| 193 | + |
| 194 | +## Guía de interacción |
| 195 | + |
| 196 | +Gracias por leer. Si considera útil este artículo, haga clic en el botón de Me gusta a continuación 👍 para que más personas puedan ver este artículo. |
| 197 | + |
| 198 | +## Declaración de asistencia con IA |
| 199 | + |
| 200 | +Este contenido fue elaborado con asistencia de inteligencia artificial, revisado por mí, y se ajusta a mis puntos de vista y posición. |
| 201 | + |
| 202 | +## Metainformación |
| 203 | + |
| 204 | +- **Autor del artículo:** [newbe36524](https://www.newbe.pro) |
| 205 | +- **Enlace del artículo:** [https://hagicode.com/blog/2026/01/25/docusaurus-auto-deployment-with-github-actions](https://hagicode.com/blog/2026/01/25/docusaurus-auto-deployment-with-github-actions) |
| 206 | +- **Aviso de derechos de autor:** Todos los artículos de este blog, excepto los declarados específicamente, están bajo la licencia BY-NC-SA. Por favor, cite la fuente al reimpresión! |
0 commit comments