Vue Travis Github Pages

En la primera parte de este tutorial configuramos nuestro sitio con VuePress, la estructura de repositorios y agregamos los archivos que necesitamos para realizar el proceso de deploy en GitHub Pages usando Travis CI. En esta segunda parte agregaremos las opciones de configuración de Travis CI y veremos cómo realizar el proceso de despligue.

Un repaso a nuestra estructura de directorios

En la primera parte del tutorial nos encargamos de organizar nuestro directorio para que quedara de la siguiente forma:

Del contenido del archivo package.json ya nos encargamos, ahora debemos encargarnos del archivo .travis.yml.

Puedes mirar la primera parte de este tutorial en: Deploy automatizado con VuePress y GitHub Pages usando Travis CI, parte 1

Agregando las opciones de configuración de Travis CI

El archivo .travis.yml contiene todas las opciones de configuración donde indicamos a Travis que tareas debe realizar.

En este archivo debemos indicar a Travis CI que antes de intentar compilar nuestro sitio debe instalar una serie de herramientas y librerías:

  • Node.js
  • NPM
  • VuePress

Adicionalmente, le indicaremos a Travis CI:

  • Cuál es el proveedor de alojamiento.
  • El repositorio git y rama (branch) de origen, es decir, donde se encuentra nuestro sitio.
  • El repositorio  git y rama (branch) donde alojará nuestros archivos estáticos.
  • Entre otras configuraciones.

A continuación, abre tu archivo .travis.yml y coloca el siguiente código:

Puedes observar que el archivo es algo largo y contiene muchas opciones. Vamos a explicar cada opción una por una:

  • En language: node_js le indicamos a Travis que el lenguaje a usar es Node.js
  • En node_js: "10" indicamos que la versión de Node a usar es la 10.
  • En env y addons indicamos algunas librerías necesarias para el funcionamiento de Node.
  • En install indicamos que queremos instalar VuePress y la versión que deseamos.
  • En script indicamos el comando que queremos ejecutar en nuestro repositorio.
  • En cache indicamos que queremos almacenar el directorio node_modules en caché.

Es importante especificar la versión de VuePress que queremos utilizar, ya que si sale una nueva versión que contenga cambios importantes y realizamos algún cambio en nuestro sitio, Travis CI instalará la nueva versión disponible de VuePress al momento del deploy, lo que podría hacer que nuestro sitio deje de funcionar.

En la opción deploy de nuestro archivo .travis.yml es donde indicamos toda la información sobre nuestros dos repositorios:

  • En provider indicamos que el proveedor que vamos a utilizar es GitHub Pages
  • En local_dir indicamos donde se encuentra el contenido dentro del repositorio del código fuente que queremos alojar en el repositorio de GitHub Pages
  • En github-token indicamos nuestro token de usuario de GitHub, el cual agregaremos más adelante en el panel de control de Travis, por medio de la variable de entorno $GITHUB_TOKEN
  • En repo indicamos el repositorio donde se alojará nuestro sitio.
  • Con keep-history evitamos que Travis remueva los archivos compilados por VuePress.
  • En target-branch indicamos en cuál rama del repositorio de GitHub Pages queremos desplegar el sitio.
  • En on branch: master indicamos en cuál rama se encuentra el código fuente de nuestro sitio.

Generando un token de GitHub

Una vez configurado nuestro archivo .travis.yml necesitamos generar un nuevo token en GitHub. Para esto dirígete a la sección Settings y luego a Developer Settings en tu cuenta de GitHub. Una vez hecho esto, en el menú izquierdo dirígete a Personal access tokens y haz clic en el botón Generate new token:

Generate new token in Github

Una vez que generes el token guárdalo en un lugar seguro. Sólo tendrás una oportunidad para copiar y pegarlo, en caso de perderlo u olvidarlo deberás crear uno nuevo.

Conectando Travis con GitHub

Bien ya tenemos todo lo que necesitamos para realizar el deploy automatizado en Travis CI. Lo primero que debes hacer es activar el repositorio en Travis CI, lo cual es muy fácil. Simplemente dirígete a travis-ci.org (o travis-ci.com según lo que has configurado para tu sitio) y en la lista de repositorios escoge el repositorio que contiene el código fuente y actívalo (haciendo clic en la X gris de manera que el botón quede verde y con un signo de confirmación):

activar repositorio de Github en Travis CI

Hecho esto, necesitas dirigirte a la configuración del repositorio en Travis CI y agregar tu token de GitHub. Para acceder a dicha configuración debes hacer clic en la opción Settings del menú More options:

Agregar token de Github a repositorio en Travis CI

Una vez dentro debes agregar una nueva variable de entorno con el nombre que le has dado en el archivo .travis.yml y con el valor del token generado en GitHub:

Configurar variable de entorno GITHUB_TOKEN en Travis

Con esto, ya todo debería funcionar de forma correcta y deberías tener un sistema de deploy automatizado con VuePress, GitHub Pages y por supuesto Travis CI.

El último paso que queda es hacer un commit con la configuración completa en el repositorio del código fuente y subirlo con git push origin master al repositorio remoto en GitHub y automáticamente Travis CI se encargará de desplegar tu sitio en el repositorio tunombredeusuario/tunombredeusuario.github.io

Espero que te haya gustado este tutorial y si tienes alguna duda puedes dejarla en los comentarios.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.