Curso: Publicando mi proyecto web en Github

Taller 101: Publicando mi
proyecto web en Github
@carlosHS92

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

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

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.

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>

Inicializando un repositorio Git local
git init <directorio>

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

¿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

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

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

Comprobando el estado del proyecto
git status

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

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.

¿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.

¿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

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.

¿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.

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>

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.

● Dentro de la sección GitHub Pages seleccionar la
opción Launch automatic page generator.

● Después de editar el layout seleccionar la opción
Continue to layouts.

● Seleccionar el tema (layout) y elegir Publish
page.

● ¿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

● 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.

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

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.

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.

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.

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

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.

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.

para commits, aplicadas

Inspeccionando un repositorio
● git log

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

Sin un flujo para trabajar en grupo

Con un flujo para trabajar en grupo

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

● Podemos tener proyectos propios a partir del
código de otros.

● Podemos enviar nuestras mejoras a proyectos de
otros.

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/

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

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

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

Curso: Publicando mi proyecto web en Github

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso: Publicando mi proyecto web en Github

Último

Curso: Publicando mi proyecto web en Github