Día 21 - Despliegue del Proyecto de Perfil en GitHub Pages

Día 21 - Despliegue del Proyecto de Perfil en GitHub Pages

Hoy desplegamos las demos en GitHub Pages aprovechando que es gratuito y permite automatizar todo con GitHub Actions. En Q2BSTUDIO, empresa especializada en desarrollo de software a medida, aplicaciones a medida, inteligencia artificial y ciberseguridad, recomendamos siempre revisar si la aplicación contiene variables de entorno sensibles antes de elegir el método de despliegue. Si no hay secretos, herramientas como ng deploy o despliegues directos desde Vite pueden ser cómodas. Si hay claves secretas, lo ideal es construir la aplicación dentro de un flujo de CI en GitHub Actions y no subir secretos a la rama principal.

Vue 3 con Vite: en vite.config.ts agregue la propiedad base con la ruta relativa de su proyecto, por ejemplo base : /vue-github-profile/. En local la ruta de prueba puede ser https://localhost:4173/vue-github-profile/ y en producción https://usuario.github.io/vue-github-profile/. Para compilar ejecute npm run build y verifique con npm run preview. En el flujo de Actions debe asegurarse de definir el secreto VITE_GITHUB_TOKEN en los secretos o en el entorno de despliegue para que el paso de build pueda acceder a las variables necesarias. Antes de subir los artefactos cree un archivo .nojekyll en la carpeta dist con touch dist/.nojekyll y copie index.html a 404.html para que las rutas no existentes sirvan la página de la SPA.

SvelteKit: instale y configure el adaptador estatico y en svelte.config.ts importe adapter desde @sveltejs/adapter-static y configure adapter con fallback 404.html y paths base ajustado, por ejemplo base : /svelte-github-profile. Svelte suele generar automáticamente 404.html y copiar los recursos al directorio build o dist según su configuración. En GitHub Actions repita el flujo de checkout, instalación de dependencias, build pasando la variable de entorno relevante, creación de .nojekyll y subida del artefacto para GitHub Pages.

Angular 20: aquí recomendamos usar GitHub Actions en lugar de ng deploy cuando necesite inyectar tokens secretos durante la compilación. No agregue tokens personales a angular.json en un repositorio público. En angular.json configure outputPath en architect build options para que la compilación genere los archivos en dist. En package.json el script build ejecuta ng build. En el paso de Actions puede invocar npm run build pasando flags como --define SECRET_GITHUB_TOKEN=secreto y --base-href=https://usuario.github.io/angular-github-profile/ para fijar la base de la aplicación. Después del build cree dist/.nojekyll y copie dist/index.html a dist/404.html antes de subir a Pages.

Configuración de GitHub Actions: cree un workflow en .github/workflows/main.yml que haga checkout, configure Node, instale dependencias, ejecute el build con las variables de entorno inyectadas, genere .nojekyll y 404.html, configure GitHub Pages, suba el artefacto y finalmente despliegue con actions/deploy-pages. Antes de ejecutar el workflow cree el entorno github-pages en Settings en la sección Environments, limite la rama que puede desplegar y añada los secretos del entorno como VITE_GITHUB_TOKEN o SECRET_GITHUB_TOKEN según corresponda. Tras commitear el archivo YAML se ejecutará el job y podrá verificar el sitio en la sección Pages del repositorio.

Consideraciones prácticas: siempre proteja tokens y secretos usando GitHub Secrets o environment secrets; no los incluya en commits. Utilice .nojekyll para evitar que GitHub Pages ignore archivos y copie index.html a 404.html para manejar rutas de aplicaciones de una sola página. Pruebe localmente la ruta base antes del despliegue y valide el contenido estático generado en dist o build.

En Q2BSTUDIO combinamos buenas prácticas de despliegue con servicios de desarrollo a medida. Si su proyecto requiere soluciones profesionales, le podemos ayudar con desarrollo de aplicaciones y software a medida integrando despliegues automatizados, seguridad y pipelines de CI CD. Conozca nuestros servicios de desarrollo de aplicaciones y software a medida en aplicaciones a medida y descubra cómo implementamos inteligencia artificial y soluciones escalables en IA para empresas.

Servicios complementarios: ofrecemos ciberseguridad y pentesting para asegurar sus despliegues, servicios cloud aws y azure para infraestructura, y soluciones de inteligencia de negocio y Power BI para explotar sus datos. Integrar despliegues automatizados con buenas prácticas de seguridad y análisis de datos mejora la calidad de sus proyectos y acelera el time to market. Palabras clave relevantes: software a medida, aplicaciones a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.

Si necesita soporte para configurar sus pipelines de GitHub Actions, gestionar secretos de entorno, o diseñar una estrategia completa de despliegue y seguridad, en Q2BSTUDIO podemos ayudarle a diseñar e implementar la solución adecuada, desde el repositorio hasta GitHub Pages o cualquier otro proveedor cloud.