PTENES
RUTA 6

🚀 Deploy y portafolio

Git, GitHub, Pages y portafolio: lleva tu proyecto de la computadora al mundo en minutos. Control de versiones, publicación gratuita y estrategias para mantener vivo el proyecto.

4
Módulos
24
Temas
~3h
Duración
⚡
Intermedio
LOCAL git add commit push GITHUB repositorio branches deploy PAGES usuario .github.io 🌐 PORTAFOLIO EN VIVO difundir · evolucionar · versionar DEL CÓDIGO AL MUNDO git · github · pages · portafolio 💻 🐙 🚀

Mapa de la ruta

Contenido detallado

6.1 ~40 min

🌿 Git esencial

Control de versiones desde cero: init, commit, branches y cómo dejar que Claude Code trabaje con git por ti.

Qué es:

Sistema de control de versiones distribuido que guarda «fotos» de tu proyecto a lo largo del tiempo, lo que te permite recorrer el historial y trabajar en paralelo.

Por qué aprender:

Sin git, no tienes forma de deshacer errores, colaborar ni publicar. Es la base de todo desarrollo moderno: los proyectos profesionales dependen de ello.

Conceptos clave:

Repositorio (repo), commit (snapshot), HEAD (posición actual), working tree (archivos en el disco), staging area (próximo commit).

Qué es:

git init crea el repositorio, git add prepara archivos para commit, git commit -m "msg" guarda la instantánea de forma permanente.

Por qué aprender:

Son los comandos que se ejecutan decenas de veces al día. Automatizarlos con Claude Code es aún más productivo: genera mensajes de commit descriptivos automáticamente.

Conceptos clave:

Flujo: modificar → git add . → git commit -m "feat: descrição". Staged vs. unstaged. Commit atómico (un cambio lógico por commit).

Qué es:

git log muestra todos los commits; git diff muestra cambios; git show muestra detalles de un commit específico.

Por qué aprender:

Entender el historial permite auditar, depurar y revertir errores. Saber dónde estaba el proyecto ayer es valioso en cualquier situación.

Conceptos clave:

git log --oneline (resumido), hash del commit (SHA-1), git diff HEAD~1 (cambios del último commit), git status (estado actual).

Qué es:

Una branch es una línea independiente de desarrollo. git branch lista, git checkout -b nome crea e intercambia, git merge une.

Por qué aprender:

Permite probar funciones sin arriesgar el código principal. Flujos como feature branch y GitHub Flow dependen de las ramas.

Conceptos clave:

main/master (rama principal), feature branch, merge, conflicto de merge, git stash (guardar cambios temporalmente).

Qué es:

Archivo .gitignore en la raíz del proyecto, enumera patrones de archivos que git debe ignorar: nunca rastrear ni enviar a GitHub.

Por qué aprender:

Evita filtrar credenciales, contraseñas y archivos pesados. Mantiene el repositorio libre de archivos generados automáticamente (node_modules, .env, __pycache__).

Conceptos clave:

Patrones glob (*.log, dist/), comentarios con #, denegación con !, gitignore global (~/.gitignore_global).

Qué es:

Claude Code ejecuta git add/commit/push automáticamente y genera mensajes en formato Conventional Commits (feat:, fix:, docs:) al final de cada tarea.

Por qué aprender:

Reduce la fricción y garantiza mensajes descriptivos sin esfuerzo. El historial queda claro para cualquier persona que lo revise después.

Conceptos clave:

Conventional Commits (tipo(escopo): descrição), --no-verify (bypass hooks), mensaje en imperativo ("agrega X", no "agregado X").

Ver completo
6.2 ~45 min

🐙 GitHub y repositorios

Crear repos, configurar el remote, hacer push, SSH vs. HTTPS, gh CLI, PRs y colaboración: todo lo que necesitas para trabajar de verdad con GitHub.

Qué es:

Un repositorio en GitHub es la versión remota (en la nube) de tu repo local. Puedes crearlo desde la interfaz web o mediante gh repo create.

Por qué aprender:

Un repositorio remoto es una copia de seguridad, una vitrina para tu portafolio y un punto de publicación. Todo proyecto profesional vive en GitHub.

Conceptos clave:

Público vs. privado, README inicial, licencia (MIT, Apache), plantilla de .gitignore, fork vs. clone.

Qué es:

git remote add origin URL conecta tu repo local al remoto. git push -u origin main envía commits y configura el tracking.

Por qué aprender:

Es el paso obligatorio para sincronizar tu trabajo con la nube, y la base para Pages, CI/CD y la colaboración.

Conceptos clave:

origin (remote predeterminado), upstream, fetch vs pull, git push --force-with-lease (seguro), rama de seguimiento.

Qué es:

SSH usa un par de claves pública/privada para autenticar sin escribir una contraseña. HTTPS usa un token personal (PAT). Se recomienda SSH para el uso diario.

Por qué aprender:

Sin SSH configurado, cada push te pide credenciales. Con SSH, el flujo es transparente, algo fundamental para la automatización y para que Claude Code opere sin interrupciones.

Conceptos clave:

ssh-keygen -t ed25519, agregar clave pública a GitHub, ssh -T git@github.com (probar), git credential helper (caché de contraseña HTTPS).

Qué es:

gh es la CLI oficial de GitHub: crea repos, PRs, issues, administra releases y mucho más, todo sin abrir el navegador.

Por qué aprender:

Claude Code usa gh ampliamente para crear PR, verificar checks y hacer releases. Entender los comandos facilita auditar y personalizar lo que hace Claude.

Conceptos clave:

gh auth login, gh repo create, gh pr create, gh issue list, gh release create.

Qué es:

Un PR es una propuesta de cambio: desarrollas en una rama separada y abres un PR para revisar e integrar en main. Es el proceso estándar en cualquier equipo.

Por qué aprender:

Los PR son el mecanismo universal de revisión de código. Incluso si trabajas en solitario, el flujo de PR obliga a revisar antes del deploy, lo que reduce los bugs en producción.

Conceptos clave:

Rama base vs. rama head, PR en borrador, revisión (aprobar/solicitar cambios), estrategias de merge (squash, rebase, commit de merge), plantilla de PR.

Qué es:

README.md es la página de inicio del repositorio en GitHub. En Markdown, describe el proyecto, cómo instalarlo, usarlo y contribuir.

Por qué aprender:

Un buen README duplica la participación en el proyecto. Los reclutadores y colaboradores evalúan el proyecto por el README antes de ver cualquier código.

Conceptos clave:

Insignias (shields.io), capturas de pantalla/GIFs, secciones estándar (instalación, uso, contribuciones), LICENSE, código de conducta.

Ver completo
6.3 ~40 min

🚀 GitHub Pages: publica gratis

Activa GitHub Pages en minutos y publica tu proyecto en usuario.github.io/repo/. Dominio personalizado, caché y verificación de que esté en línea.

Qué es:

GitHub Pages sirve archivos estáticos (HTML/CSS/JS) directamente desde el repositorio como un sitio público. Es gratis, con HTTPS automático y CDN.

Por qué aprender:

Sin costo para portafolios, proyectos de cursos y demos. Ideal para los proyectos que creas con Claude Code: publicar requiere una sola línea de configuración.

Conceptos clave:

Sitio estático vs. dinámico, CDN de GitHub (Fastly), HTTPS gratuito (Let's Encrypt), límite de 1GB por repositorio y 100GB/mes de ancho de banda.

Qué es:

En Settings → Pages, elige la fuente: una branch específica (main o gh-pages) y una carpeta (/ o /docs), o GitHub Actions para builds personalizados.

Por qué aprender:

La configuración toma 2 minutos mediante la interfaz. Con la gh CLI es aún más rápido y automatizable; se integra bien al flujo con Claude Code.

Conceptos clave:

Branch source, fuente de deployment (legacy vs Actions), branch gh-pages dedicada, carpeta /docs para proyectos que tienen código + sitio en el mismo repo.

Qué es:

Cada repositorio activado genera la URL usuario.github.io/nome-do-repo/. El repo especial usuario.github.io (sin barra) queda en usuario.github.io.

Por qué aprender:

Es la dirección que compartes en entrevistas, redes sociales y currículums. Fácil de recordar y profesional, incluso sin un dominio propio.

Conceptos clave:

Sitio de usuario vs. sitio de proyecto, index.html obligatorio, 404.html personalizable, barra final, distinción entre mayúsculas y minúsculas.

Qué es:

Archivo CNAME en la raíz del repo con tu dominio (meusite.com) + registro DNS CNAME que apunta a usuario.github.io.

Por qué aprender:

Un dominio propio transmite credibilidad. Comprar un dominio cuesta ~R$50/año. GitHub Pages con dominio personalizado sigue siendo gratuito para el alojamiento.

Conceptos clave:

CNAME record, A record (apex domain), www vs apex, «Enforce HTTPS» en GitHub, propagación de DNS (hasta 48h), verificación de dominio.

Qué es:

Pages tiene caché de CDN y el deploy tarda 1-10 minutos después del push. El navegador también almacena en caché. Fuerza una actualización completa (Ctrl+Shift+R) y esperar a que termine la compilación.

Por qué aprender:

La frustración más común al empezar: "hice push pero el sitio no cambió". Entender la caché te ahorra horas de depuración innecesaria.

Conceptos clave:

Cola de build, logs de Actions, encabezado Cache-Control, versionado de assets (query string ?v=2), invalidación del Service Worker.

Qué es:

Después del push, sigue el deploy en Actions (pestaña en GitHub) o mediante gh run watch. El sitio queda activo cuando termina el workflow "pages build and deployment".

Por qué aprender:

Saber interpretar el estado del deploy evita la ansiedad de «¿habrá funcionado?». Los registros de errores en Actions muestran exactamente qué falló.

Conceptos clave:

gh run list, gh run view, workflow de Actions "pages", badge de estado (shields.io), monitoreo con UptimeRobot.

Ver completo
6.4 ~35 min

📣 Evolucionar y difundir

El deploy fue el comienzo, no el final. Itera, versiona releases, construye tu portafolio, documenta y mantén el proyecto activo. Cierre del curso.

Qué es:

La iteración es el ciclo feedback → mejora → deploy. Los proyectos activos tienen commits regulares; los proyectos abandonados se quedan en la v1.0 para siempre.

Por qué aprender:

La primera versión nunca es la mejor. Los usuarios reales revelan qué falta. Claude Code acelera cada ciclo de mejora — de horas a minutos.

Conceptos clave:

Sprint de 1-2 semanas, rastreador de issues, roadmap público, changelog, hotfix vs feature, SemVer (major.minor.patch).

Qué es:

Una etiqueta de git marca un commit específico como versión. GitHub Release es la página pública con notas de la versión, recursos descargables y changelog con formato.

Por qué aprender:

Las versiones comunican la evolución a usuarios y reclutadores. Muestran que el proyecto tiene un ciclo de vida saludable y mantenimiento activo.

Conceptos clave:

git tag v1.0.0, gh release create v1.0.0, notas de la versión automáticas (GitHub las genera a partir del historial de PR), pre-release vs. stable.

Qué es:

El portafolio es una colección pública de proyectos que demuestra tus habilidades. Puede ser tu propio perfil de GitHub, un sitio Pages dedicado o ambos.

Por qué aprender:

En la práctica, el portafolio reemplaza los certificados: muestra lo que realmente haces. Con Claude Code, crear proyectos impresionantes está al alcance de quienes recién empiezan.

Conceptos clave:

README del perfil de GitHub (usuario/usuario), repos fijados, gráfico de contribuciones, sitio personal (usuario.github.io), proyectos destacados con descripción.

Qué es:

La documentación incluye: README con instalación y uso, comentarios en el código en los puntos menos obvios, Wiki de GitHub o archivo CONTRIBUTING.md.

Por qué aprender:

Sin documentación, ni siquiera tú entenderás tu propio proyecto dentro de 3 meses. Claude Code puede generar automáticamente la documentación inicial.

Conceptos clave:

README estructurado, CHANGELOG.md, ADR (Architecture Decision Records), Docusaurus para documentación extensa, comentarios JSDoc/docstring.

Qué es:

Difundir es compartir el proyecto en comunidades relevantes (dev.to, Reddit r/programming, Twitter/X, LinkedIn) y pedir comentarios honestos a usuarios reales.

Por qué aprender:

Retroalimentación real > suposiciones. Los usuarios revelan errores que nunca encontrarías por tu cuenta y funcionalidades que cambian el rumbo del proyecto para mejor.

Conceptos clave:

Product Hunt, GitHub Discussions, Show HN (Hacker News), cantidad de estrellas como métrica de tracción, issues como canal de feedback estructurado.

Qué es:

Un proyecto vivo tiene commits regulares, issues respondidas, dependencias actualizadas y un roadmap que evoluciona con el feedback. No necesita grandes sprints: bastan pequeñas mejoras constantes.

Por qué aprender:

La mayoría de los proyectos muere después de la euforia del primer deploy. Mantener la consistencia es lo que distingue los portafolios promedio de los que impresionan.

Conceptos clave:

Dependabot (actualizaciones automáticas), pautas para contribuir, Good First Issues (para atraer colaboradores), planificación de hitos, «archive» al cerrar el proyecto.

Ver completo
←Ruta 5: Proyectos 🏆 Completar el curso→