Build and deploy con GitHub Pages y GitHub Actions

Clase 5 de 10 • Curso Básico de GitHub Actions

Clase anteriorSiguiente clase

Gustavo Pú

student•

Les comparto una lista de comandos git !!

Flujos de Trabajo

git init [nombre] inicia un repositorio y crea la carpeta [nombre].
git status muestra el estado de los archivos en el repositorio.
- untracked files son archivos que están en nuestro Working Directory, lo que aparezca en rojo es lo que se ha modificado y hay que pasarlo al Staging.
- changes to be comitted son los archivos que se encuentran en el staging area. Aparecen en verde.
git add [archivo] agrega un archivo al staging
git add -A agrega todos los archivos del working directory al staging area. git add . hace lo mismo.
git add -n [archivo] simula el agregado de un [archivo].
git rm --cached [archivo] quita un [archivo] del staging al working area.
git rm -f quita el archivo del staging y del working directory. La diferencia entre esto y simplemente borrar el archivo directamente es que se guarda en git un registro de eliminación.
git commit -m ["mensaje"] agrega los archivos del staging al repositorio.
git commit --amend anexa el nuevo cambio al anterior commit. Si se escribe un mensaje este sobreescribe el anterior.
git tag -a [tag] -m ["comentario"] agrega el tag con un comentario al ultimo commit.
git tag -l lista los tags.
git tag [tag] [sha1 del commit] agrega un tag a un commit en partcular.
git tag -d [tag] elimina el tag.
git tag -f -a [nuevo tag] [sha1 del commit] renombra el tag del commit pero deja el anterior tag.
git log ver la lista de commits.
- --stat explica el número de líneas que se cambiaron brevemente.
- --stat explica el número de líneas que se cambiaron y te muestra que se cambió en el contenido.
- --oneline resumido.
- --graph ver las ramificaciones.
- -[numero] ver los ultimos [numero] commits.
- --author="Name Author" nuestra los los logs de un autor
git relog muestra el log completo de git, incluido branches eliminados.
git show muestra los últimos cambios que se han hecho.
git diff [sha1 del commit] muestra la diferencias del commit [sha1].
git diff [sha1-1] [sha1-2] diferencia entre la version 1 vs la version 2.
git reset
- --soft [sha1] borrar todos los commits posteriores a [sha1]. Los archivos que salen del repositorio son pasados al staging area. Este comando resetea el HEAD al [sha1] mas no modifica ningún archivo.
- --mixed [sha1] borrar todos los commits posteriores a [sha1]. Los archivos que salen del repositorio son pasados al working directory
- --hard [sha1] elimina todos los cambios incluso del working directory.
- HEAD saca los archivos del staging area. Este comando no elimina ningún archivo ni borra commits del git.
gitk te muestra una ventana con toda la historia del repositorio.

Múltiples entornos de trabajo

git branch [nombre] crear la rama [nombre]
git branch -l lista las ramas
git branch -r muestra todas las ramas remotas
git branch -a muestra todas las ramas tanto locales como remotas
git branch -d [nombre] elimina el branch [nombre]. Esto solo funciona si el branch no tiene ningún commit.
git branch -D [nombre] fuerza la eliminación de un branch sin importar si tiene commits
git branch -m [nombre inicial] [nuevo nombre] renombra el branch [nombre inicial] por [nuevo nombre]
git checkout [brach] moverse al branch [branch]
git chechout [sha1] ir al momento del tiempo de ese commit
git chechout [sha1] [archivo] ir al momento del tiempo de ese commit de un archivo específico.
git checkout -b [nombre] crea un branch y se mueva al mismo
git checkout -- [archivo] descarta todos los cambios del archivo
git merge [branch] mezcla el branch [branch] con el branch actual
git rebase [branch] mezcla el [branch] con el branch actual. Es como el merge pero sin crear bifurcaciones. Para que funcione bien, primero se hace rebase a la rama con los cambios que queremos modificar y luego rebase a la rama final.
git stash es un limbo como el staging area. Te permite cambiar de branch sin hacer commit.
git stash list ver la lista de los stash.
git stash pop aplica el ultimo stash a la rama actual.
git stash branch [brach] mueve el stash al [branch]
git stash drop stash@{numero} elimina el stash.
git stash apply stash@{numero} aplica el stash.
git clean elimina los archivos que no están bajo el control de versión. Para que funcione es necesario usar alguno de los flags:
- -n no remueve nada, solo te muestra los archivos que va a eliminar.
- -f elimina los archivos que no se encuentran versionados.
git cherry pick [sha1] mover el commit [sha1] de otro branch al branch actual.

Repositorios Remotos (Github)

git clone [ruta] trae el repositorio a la computadora
fork hace una copia de un repositorio externo a nuestra cuenta
ssh-keygen -t rsa -b 4096 -C "correo@ejemploc.com" crea una llave ssh. El correo debe de ser el mismo que se encuentra en Github
git remote add [nombre] [ruta] conecta un repositorio remoto con uno local. Por defecto el nombre es origin
git remote -v lista las conexiones remota
git remote remove [nombre] remueve una conexión remota
git fetch [nombre] [branch] traer . Solo los trae pero no lo mezcla
git merge [origin/master] --allow-unrelated-histories hace un merge del fetch con el repositorio local
git pull [origin] [branch] hace un fetch mas merge
git push [origin] [master] envia al repositorio local al remoto
- --tags enviar los tags
git push --all origin push a todos los branch y tags

Comandos colaborativos

git shortlog -sn muestra cuantos commit han hecho cada miembros del equipo.
git shortlog -sn --all muestra cuantos commit han hecho cada miembros del equipo hasta los que han sido eliminado
git shortlog -sn --all --no-merge muestra cuantos commit han hecho cada miembros quitando los eliminados sin los merges
git blame [archivo] muestra quien hizo cada cosa linea por linea
git [comando] --help muestra cómo funciona el comando.
git blame [archivo] -L[linea_inicial],[linea_final] muestra quién hizo cada cosa linea por linea indicándole desde qué linea ver. Ejemplo -L35,50

Emmanuel Rodríguez

student•

Saludos 👋 . Excelente recopilación de comandos de Git. Complemento adjuntando la documentación hacia el Git Book 📚

Diego Jurado

student•

Muchas gracias por el resumen que has dejado!

David Gustavo Lopez Figueroa

student•

Clase 5 😀

Diego Toro Cárdenas

student•

Build and deploy with GitHub Pages and GitHub Actions

Hugo Arrazola Dotor

student•

Si a ti como a mi no se ejecutaban los deploys automaticos, cambia el nombre del archivo deploy.yml por main.yml

Oscar Barajas Tavares

Team Platzi•

Es una forma de volver a construir la estructura y se vuelvan a ejecutar. gracias por el aporte.

Emmanuel Rodríguez

student•

Si funciona, no significa que esta del todo bien ✨

Si se puede automatizar, se puede debe implementar ✨

Oscar Barajas Tavares

Team Platzi•

Gran Aporte que debemos de tener presentes a la hora de trabajar con nuestro flujos.

María Paz Muñoz Parra

student•

Las integraciones que podemos encontrar en el marketplace de Github Actions pueden ser:

Apps: integraciones que van a tu repositorio.
Actions: ejecuciones individuales que se incluirán en tu workflow o pipeline para personalizarlo

Rubén Ernesto Aragón Gil

student•

Chicos murió github pages, se ha vuelto de pago 😥😭

Aaron Santiago Loyo Zabala

student•

Rubén Ernesto Aragón Gil

student•

Lo que sucede, es que tenía el repo en privado y quería realizar acciones. Para eso, tienes que comprar esa cosa.

Fernando Hernandez

student•

Buena explicación, pero no veo cual seria el beneficio de usar Vite en vez de usar solo react.

Manuel Ojeda

student•

Vite en si es un compilador adicional o un ambiente de desarrollo basado en Rollup, el porque es simple, Vite es super rápido al momento de compilar y empieza a dejar Webpack (que es lo que usa create react app) muy atrás

Luis Miguel Falcon Montaño

student•

En las clases el profesor utilizo Vite simplemente para generar un proyecto rápidamente el cual serviría de ejemplo para utilizarlo con las github actions.

Se puede usar perfectamente react, ya sea con create-react-app o con una configuración personalizada con webpack dentro de las github actions.

Alexander Flores

student•

Necesito saber donde puedo descargar el template de su terminal, mi terminal esta toda aburrida

Steve Anthony Luzquiños Agama

student•

¿A alguien le salta el error de Property name is not allowed? En el archivo deploy.yml.

Steve Anthony Luzquiños Agama

student•

Este es el output:

Steve Anthony Luzquiños Agama

student•

Como dato curioso, cuando le cambié de nombre de deploy.yml a deploy-gp.yml funcionó.

Miguel Angel Echeverri Quiroz

student•

Le comparto un enlace de la documentación de vite que explica como hacer un despliegue en github pages

David Hilera

student•

¿Pudiste desplegar?

Rubén Ernesto Aragón Gil

student•

name: Build and Deploy
on: [push]
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build # The folder the action should deploy.

Iván Jijón

student•

Cómo se pronuncia "Vite"? Así: "veet", porque viene del francés" vite" que quiere decir rápido. Este profesor debería ponerle más atención a esos detalles. Nada de "bait".

JEAN PAUL BIGOT

student•

muchisimas gracias

José Guillermo

student•

Profe, su configuración del prompt de la shell está muy atascada. Me gusta.

Juan Guillermo Perez Cardozo

student•

Me funciono todo muy bien, pero quiero que nos enseñen a hacer el .yml con nuestras propias instrucciones. es decir entender cada campo

José Guillermo

student•

Para eso es mejor leer la documentación directamente. Estos cursos son buenos porque son cortos, te los puedes echar en un ratito y para cuando lo termines ya tendrás una idea muy general de lo que se trata sin llegar a repasar punto por punto cada keyword del archivo YAML y su sintaxis. Ir en ceros a leer la documentación es 100 veces más engorroso que ir ya con los pies mojados.

Nicolás Valderrama

student•

Me parece algo mediocre que se cree el proyecto usando vite sin explicar el por qué de esta decisión tan importante Este vídeo me ayudó a hacerme una idea de las razones por las que Oscar lo decidió...

Irving Caamal

student•

Más que mediocre, creo que es más bien para no divagar, puesto que es un curso de GH Actions, en ese caso también debió explicar por qué React en vez de Svelte, siendo que Oscar es evangelizador de Svelte.

Buen aporte, mal manera de comunicarlo.

Oscar Barajas Tavares

Team Platzi•

Gracias por tu comentario @nivalderramas, el objetivo del curso no era aprender Vite, era usar una herramienta para construir rápidamente un proyecto.

Ahora veamos el lado bueno de las cosas, te permitió investigar más sobre Vite y entender que es la herramienta. Aun así te agradezco por este feedback.

Rafael Humberto Rubiano Novoa

student•

Waoo y así se empieza a automatizar los procesos dentro del ciclo de vida de desarrollo.

Jose Aguilera

student•

cunado uso git push pide contraseña y username coloco la que uso para entrar a github pero falla que debo hacer para que no solicite el usuario y el pw

Mariela de Jesus Rivas Hernandez

student•

Tengo una duda y agradecería que alguien pudiera ayudarme. Estoy tratando de desplegar un proyecto de angular con Github actions pero estoy teniendo un problema y buscando una forma de solucionar ese problema terminé justo en esta clase, pero en esta clase se realiza el ejemplo con una app de react, pero aún así si alguien ya ha hecho este procedimiento con una app de angular agradecería que revisara lo que estoy haciendo para ver que es lo que he hecho mal. Mi archivo de configuración .yml se ve de la siguiente manera:

name: Build and Deploy
on:
  push:
    branches:
     - main
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Install and Build 🔧
        run: |
          npm instal
          npm run-script build
        # npm run-script build = ng build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist/gh-angular

Al realizar un push a la rama main si se activan estas instrucciones, y la compilación se hace con éxito como se puede observar en la siguiente imagen:

Pero al momento de abrir la url se muestra la pantalla en blanco y tengo errores 404

Torcoroma Arias Arias

student•

Debido a que, ahora se debe cambiar la rama? que pasa si uno no la cambia? Me gustaría que me explicaran

Stanley Melgar

student•

Se cambia hacia la rama gh-pages porque allí están los archivos estáticos que pueden ser desplegados. En main esta el código fuente, el cual no puede ser desplegado.

name: Build and Deploy
on: [push]
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build # The folder the action should deploy.

name: Build and Deploy
on:
  push:
    branches:
     - main
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Install and Build 🔧
        run: |
          npm instal
          npm run-script build
        # npm run-script build = ng build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist/gh-angular

Build and deploy con GitHub Pages y GitHub Actions

Introducción

¿Qué es GitHub Actions?

GitHub Workflows

Primeros pasos en GitHub Actions

GitHub Pages

Despliegue de aplicación en React

Integraciones

Build and deploy con GitHub Pages y GitHub Actions

Conectar con un nombre de dominio

Añadiendo recursos y configuraciones a nuestro sitio

Automatizar flujo de pruebas con ESLint

Automatización de pruebas con GitHub Actions

Próximos pasos

Conclusiones