Configuración y despliegue web con GitHub Actions y Pages

Objetivo de la clase

El objetivo del profesor era que los estudiantes aprendieran a implementar GitHub Actions para automatizar el despliegue de un proyecto web (portafolio) utilizando GitHub Pages, introduciendo conceptos básicos de CI/CD y familiarizándolos con herramientas de automatización en el desarrollo de software.

Habilidades desarrolladas

• Uso de GitHub Actions: Configuración y creación de workflows automatizados
• Manejo de repositorios: Fork de proyectos y clonación con SSH
• Gestión de dependencias: Instalación y manejo de paquetes npm
• Despliegue automatizado: Configuración de GitHub Pages
• Uso de herramientas de desarrollo: Trabajo con Cursor (editor con IA integrada)
• Comandos de terminal: Ejecución de scripts de build y desarrollo

Conceptos clave

• [00:36] Fork: Proceso de clonar un repositorio de otra cuenta a la propia
• [01:17] GitHub Pages: Servicio gratuito de hosting para páginas web estáticas
• [06:58] GitHub Actions: Scripts que se ejecutan automáticamente en repositorios de GitHub
• [08:04] Workflows: Carpeta especial donde viven los GitHub Actions (.github/workflows)
• [08:37] YAML: Formato de archivo de configuración usado en infraestructura
• [09:59] Jobs: Scripts o procesos individuales dentro de un GitHub Action
• [12:05] Build: Proceso de optimización del código fuente para producción
• [12:56] Carpeta dist: Directorio que contiene el código optimizado para distribución
• [07:32] Vite: Tecnología de desarrollo web utilizada en el proyecto

Palabras clave técnicas

• GitHub Actions
• GitHub Pages
• Fork
• Clone
• SSH
• npm
• Node.js
• Dependencies
• Build process
• YAML
• Workflows
• Jobs
• CI/CD
• Deployment
• Vite
• TypeScript
• Cursor (editor)

Hechos importantes

• [00:50] Nomenclatura específica: Para GitHub Pages, el repositorio debe nombrarse como usuario.github.io
• [08:04] Estructura obligatoria: Los GitHub Actions deben crearse en .github/workflows/
• [09:13] Trigger automático: El workflow se ejecuta automáticamente cuando se hace push a la rama main
• [13:35] Configuración necesaria: Hay que habilitar GitHub Actions en la configuración de Pages del repositorio
• [15:43] URL final: El sitio queda disponible en usuario.github.io

Datos principales

• Repositorio base: Proyecto de portafolio web en el repositorio de Platzi
• Rama específica: github-actions
• Comando de instalación: npm install
• Comando de desarrollo: npm run dev
• Comando de build: npm run build
• Sistema operativo del runner: Ubuntu Latest
• Archivo de configuración principal: config/portfolio.ts