Automatización de Despliegue con Travis CI y GitHub

Ya hay curso de travis CI: https://platzi.com/cursos/travis/

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - "12"
git:
  depth: 3
script:
  - yarn build
deploy:
  provider: pages
  edge: true
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

Aquí esta la configuración, revisen bien el identado porque me trajo muchos problemas, pero ya pude hacer el deploy

El plugin para los iconos se llama Material Icon Theme

quedó un typo en el archivo .travis.yml en target-brach debería ser target-branch.

Reto cumplido!

Para logar el reto les comparto los comando que deben escribir en al consola en el directorio de su proyecto:

ya no se usa mas travis, ahora ser cool implica usar github actions jaja

Nuevo curso a la lista de pendientes: Travis

Me gusto mucho travis, justo hice el curso respectivo! Lo recomiendo mucho!

UPDATE 2021: Ahora la web de Travis CI está en un .com -> https://www.travis-ci.com/

Mi profesor favorito…

Necesitaba los plugins jajajaja

travis.yml

language: node_js #establecer lenguaje
cache:            
  directories:  
    - ~/.npm    #ubicacion de nuestro directorio
node_js:      #version de node
  -"12"
git:
  depth:3  #va leer hasta el tercer nivel
script:
  - yarn build   #comando a ejecutar nuestro proyecto
deploy:
  provider: pages   #donde va estar alojado
  edge:true       #control de versiones
  skip-cleanup:true   #estructura de compilaciones
  keep-history:true  #historial
  github-token: $GITHUB_TOKEN #nuestro token generado
  local-dir: dist/  #directorio sobre el cual vamos a trabajar
  target-branch: gh-pages 
  commit_message:"Deploy Release" #nombre al commint
  on:
    branch: master #sobre quien va actuar```

Si no sabes como sacar el simbolito de la Ñ, por descirlo de alguna manera…

presiona Alt + 126

Travis se puede usar para proyectos escalables o de frameworks para proyectos grandes? y habra alguna alternativa gratis?

No uséis https://travis-ci.org/

Tenéis que usar https://travis-ci.com/

La .org la van a cerrar y no se pueden hacer Trigger Builds.

Apartir de unos meses se usa
https://app.travis-ci.com/

Creando el Token en Githab

Actualización. Ahora deben ir hacia https://travis-ci.com

¿Cual deberia aprender primero circle ci o Travis?

Wauu no sabía de esto. Interesante la clase con travis.

Boom primera vez con Travis y estoy perdido jaja a investigar sobre Travis!

¿A alguien más le pasa que cuando le das al home te lleva a la raíz de github-page?
Ya en producción. Cuando clickeo mi logo en vez de llevarme a https://incari.github.io/RickandMorty-Spa/ me redirige a: https://incari.github.io/.
Agregué
"homepage": “https://incari.github.io/RickandMorty-Spa” al package.json y volvía correr el build pero sigue el mismo problema

reto cumplido.

REsumen de la clase:

Github Pages

Ahora vamos a trabajas con Travis CI , esto nos va a permitir generar un script que va a estar conectado a nuestro repositorio y asi hacer integracion continua.

Primero debemos conectarnos , iniciar sesion en

Travis CI - Test and Deploy Your Code with Confidence

Aceptar los permisos.

A continuacion en nuestro perfil de Github, en la seccion de setting→ developer setting → personal acces tocken y generamos uno nuevo.

Le damos un nombre y habilitacion estas dos opciones

• repo
• admin:repo_hook

Luego de ello generamos el token y nos dara una clave.

Tenemos que tener creado nuestro repositorio en Github antes de continuar con el siguiente paso.

Entra en travis ci , setting , y encontrar nuestro Repo.

Hacer click en setting. Luego crear una variable de entorno en el apartado Enviroment Variable.

Los valores son :

• name : GITHUB_TOKEN
• value: nuetro token de github

Luego de ello le damos el boton ADD

A continuacion debemos crear el archivo que utilizara travis para subir nuestro proyecto llamdo travis.yml

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn build
deploy: 
  provider: pages
  edge: true
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

Nota enlaces importantes:

• https://travis-ci.org/
• https://docs.travis-ci.com/
• https://yarnpkg.com/
• https://platzi.com/blog/10-plugins-esenciales-para-vscode/

Para el proyecto si van a usar travis-ci.com y crear su cuenta free, al seleccionar el plan le va a solicitar la inscripción de una tarjeta de crédito. No se asusten, ya que ellos indican que lo hacen para tener un mejor control de los usuarios registrados.

Si no les funciona el link de la descripcion es porque desde el 15 de junio del 2021 dejo de funcionar, ahora sera travis-ci.com

Travis

languege: node_js
  cache:
    directories:
      - ~/.npm
  
  node_js:
    - '12'
  git:
    depth: 3
  script:
   -yarn build
  deploy:
    provider: pages
    edge: true
    skip-cleanup: true
    keep-history: true
    github-token: = $GITHUB_TOKEN
    local-dir: dist/
    target-branch: gh-pages
    commit_message: "Deploy Release"
    on:
      branch: main

Hola, si tienen problema con el enlace del Header que los envía al inicio de su GitHub, solo deben cambiar el href y usar el #

<a href="#/">
   100tifi.co
</a>

No e probado Travis para hacer deploy. Pero les recomiendo bastante FIREBASE, hace básicamente lo mismo.
-Aloja tu proyecto.
-Lo aloja (Hosting)
-Permite mantenerlo en producción.

Siempre quise entender travis para poder conectarlo con Heroku

¿Puedo usar el token de github para varios proyectos en travis ci?

estupendo 😄

A MI NUNCA ME SALIO EL ICONO DE TRAVIS:V

jajaja min 5:30 … si Oscar, de verdad si te iba a preguntar por tu configuración de vs, gracias por el dato.

Para este video ya hay que tener un repositorio en Github, cierto?

El github token se va utilizar por poryecto? osea cada proyecto va tener us token? o se puede utilizar el mismo?

A ver qué tal!

Listo el reto:

Lol Tengo una super duda:

Tengo GIT BASH y cree alli la llave SSH ahi pero ahora use la Terminal para este proyecto.
Entonces cree otra llave SSH en la terminal Hyper en Windows por que no podia aacceder a de GitHub.
La pregunta es la siguiente:

• Afectara esto en un futuro, por que tengo dos llaves privadas en un mismo ordenador ?
  -Como podria haber conectado mi terminal Hyper a Github?

Travis genera un script que va estar conectado a nuestra aplicación y nuestro repositorio para poder generar integración continua. Significa que cuando se detecte un cambio en la rama master o en la rama en la que se esté trabajando, pueda generar un compilado en un servidor en la nube y mandar estos cambios hacia el repositorio que va utilizar Github Pages para poder publicar tu aplicación.
Con esto se garantiza que cuando se este desarrollando, se podrá crear cambios, mandarlos dentro de un flujo y automáticamente publicar estos cambios sin necesidad de subirlos manualmente.

Listo!!!

Listo ya subí el proyecto a mi repositorio:

Subí mi proyecto siguiendo los pasos de Oscar, pero con una diferencia, no usé empaquetador alguno (modulos js); puro html, css y js en github pages.

https://xsrpm.github.io/miniProyectos/js/cientifico/

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules

RETO CUMPLIDO

f