Este documento proporciona una introducción a Git y GitHub Pages. Explica qué es Git, cómo inicializar y clonar repositorios, y cómo crear y cambiar entre ramas. También describe qué son los GitHub Pages y cómo publicar un sitio web estático de manera automática o manual usando GitHub Pages. Además, ofrece consejos sobre buenas prácticas de Git como usar convenciones para commits y trabajar en equipo de manera colaborativa.

1. Taller 101: Publicando mi
proyecto web en Github
@carlosHS92

2. ¿Qué es Git?

3. Git
● Sistema de control de
versiones.
● Todos los comandos
que se utilizan en este
sistema comienzan
con git.

4. Fundamentos de Git
● La mayoría de los sistemas almacenan la
información como una lista de cambios en los
archivos.

5. Fundamentos de Git
● Cada vez que guardas el estado de tu proyecto
en Git, él hace una foto del aspecto de todos tus
archivos en ese momento, y guarda una
referencia a esa instantánea.

6. Trabajando con un repositorio

7. Configuración de Git
Global:
git config --global user.name <nombre>
git config --global user.email <correo>
Local:
git config --local user.name <nombre>
git config --local user.email <correo>

8. Inicializando un repositorio Git local
git init <directorio>

9. Clonando un repositorio remoto
git clone <URL del repo>
Ejemplo:
git clone https://github.com/user/my-project.git
cd my-project

10. ¿Qué es una rama y como crear una?
https://styde.net/sistema-de-ramificaciones-en-git/
git checkout –b backend
git checkout master
git checkout –b frontend

11. Guardando los cambios
git add <archivo>
Ejemplos:
git add .
git add documentos/*.txt
git add --all

12. Guardando los cambios
git commit -m "mensaje"
Ejemplos:
git commit -m "mi primer commit"

13. Comprobando el estado del proyecto
git status

14. Sincronizando con un repositorio remoto
Obtener últimos cambios:
git pull origin <rama>
Enviar últimos cambios:
git push origin <ram> <rama>
Ejemplo:
git pull
git push origin master

15. ¿Qué es Github?

16. GitHub
● Plataforma de desarrollo
colaborativo.
● Sirve para alojar proyectos.
● Utiliza el sistema de control
de versiones Git.
● Importante: ¡no todo
proyecto en Github es
libre!, fíjate en las licencias.

17. ¿Qué son los GitHub Pages?

18. ¿Qué son los GitHub Pages?
● GitHub Pages son páginas web públicas que son
alojadas y publicadas a través de GitHub.
● Existen dos tipos de GitHub Pages:
● Páginas de Usuario/Organización
● Páginas de Proyectos.

19. ¿Qué son los GitHub Pages?
Tipos de
GitHub Pages
Dominio y ubicación del
alojamiento
Rama
Sitio Web del Usuario username.github.io master
Web de
Organización
orgname.github.io master
Web del Proyecto
del Usuario
username.github.
io/projectname
gh-
pages
Web del Proyecto de
la Organización
orgname.github.
io/projectname
gh-
pages

20. Consideraciones
● Los sitios de GitHub Pages no deben ser usadas
para transacciones delicadas como envío de
contraseñas o pagos con tarjeta de crédito.
● Los sitios de GitHub Pages tienen un límite de
ancho de banda de 100GB o de 100,000 requests
al mes.
● El tamaño máximo de un sitio en GitHub Pages es
de 1GB.

21. ¿Cómo hacer mi GitHub Page?
● Existen dos formas: la automática y la manual.
● Si se usa la manera automática GitHub se
encarga de de todo prácticamente.
● Si se usa la manera manual uno mismo se
encarga de todo.

22. ¡Manos a la obra!

23. Configuración de Git
● En una terminal, verifica tu configuración global:
git config --global -l
● Establece los valores de configuración así:
git config --global user.name <nombre>
git config --global user.email <correo>

24. GitHub Pages: Manera automática
● Crear un repositorio con el nombre usuario.
github.io, donde usuario es tu mismo nombre de
usuario en Github.
● Seleccionar la opción Settings.

25. GitHub Pages: Manera automática
● Dentro de la sección GitHub Pages seleccionar la
opción Launch automatic page generator.

26. GitHub Pages: Manera automática
● Después de editar el layout seleccionar la opción
Continue to layouts.

27. GitHub Pages: Manera automática
● Seleccionar el tema (layout) y elegir Publish
page.

28. GitHub Pages: Manera automática
● ¿Dónde está mi página alojada?
usuario.github.io
● ¿Cuál es el repositorio de mi página?
github.com/usuario/usuario.github.io

29. GitHub Pages: Manera automática
● Si bien es cierto los estilos se pueden editar
después, la página ya está publicada.
● Se puede notar la facilidad de publicar una
página web estática, sin embargo los diseños
son muy limitados.
● En cambio, al hacerlo de manera manual el
diseño es personalizado y lo puedes probar antes
de publicarlo. A continuación se explica como
hacerlo de manera manual.

30. Clonando un proyecto
● En la terminal, nos movemos con cd hasta una
carpeta donde alojamos nuestros proyectos.
● Usaremos git clone para descargar el proyecto.

31. Creando una rama
● Luego entramos a la carpeta con cd usuario.
github.io
● El git checkout master no es necesario porque
por defecto estamos en la rama master.
● Con git pull origin master nos aseguraremos de
tener la última copia.
● Con git rm -rf . eliminaremos los archivos
automáticos.

32. En el caso de proyectos: creando una rama
En caso quieras hacer una web para tu app
● Luego entramos a la carpeta con cd repositorio
● El git checkout --orphan gh-pages crea una rama.
● El historial de la rama inicia con el primer commit.
● Con git rm -rf . eliminaremos los archivos
automáticos.

33. Subiendo mi rama a GitHub Pages
● Agregamos un archivo HTML.
● El comando git add se encarga de agregar el
archivo en los objetos que debe seguir Git.
● El git commit brinda un nombre al conjunto de
archivos agregados.
● El git push origin master (o git push origin gh-
pages) sube los cambios a GitHub.

34. Trucos y tips para usar Git

35. ¿Qué es un commit?
● Te permite guardar los cambios con un mensaje
descriptivo (?)

36. Un buen commit

37. Convenciones de Angular
para commits
● feat: Una nueva característica.
● fix: Una corrección de error.
● docs: Cambios en la documentación o en los
comentarios(notar que el tipo es en plural 'docs').
● style: Cambios que no afectan el significado del
código (espacios en blanco, formateo, faltó un
punto y coma, etc).
● refactor: Un cambio en el código que no corrige
un error, ni agrega una característica.

38. Convenciones de Angular
para commits
● perf: Código que mejora el funcionamiento.
● test: Agregando pruebas que falten (porque
agregar nuevos test son considerados feat).
● chore: Otros cambios que no alteran a los
archivos de la carpeta src o test.

39. Convenciones de Angular
para commits, aplicadas

40. Inspeccionando un repositorio

41. Inspeccionando un repositorio
● git log

42. Inspeccionando un repositorio
● gitk
https://lostechies.com/joshuaflanagan/2010/09/03/use-gitk-to-understand-git/

43. Sin un flujo para trabajar en grupo

44. Con un flujo para trabajar en grupo

45. Git está diseñado para socializar (?)
● Podemos descargar el código de otros con git
clone.

46. Git está diseñado para socializar (?)
● Podemos tener proyectos propios a partir del
código de otros.

47. Git está diseñado para socializar (?)
● Podemos enviar nuestras mejoras a proyectos de
otros.

48. Enlaces de interés
● help.github.com/categories/github-pages-basics/
● github.com/frontend-labs/commits
● github.
com/angular/angular/blob/master/CONTRIBUTIN
G.md
● filimx.github.io
● frontendlabs.io/2989--tips-git-en-windows
● conemu.github.io/

49. Sigue aprendiendo
● Tutorial sobre Git:
www.youtube.com/watch?
v=zH3I1DZNovk&list=PL9xYXqvLX2kMUrXTvDY6
GI2hgacfy0rId

50. Sigue aprendiendo
● Libro Online de Git:
git-scm.com/book/es/v1

51. Sigue aprendiendo
● Posts sobre Git:
frontendlabs.io/category/git

52. Gracias