Usar GitHub Actions para automatizar la generación y despliegue de un blog estático creado con VuePress en GitHub Pages

Tras unos meses con mi blog creado con VuePress, he dedicido automatizar la generación y despliegue en GitHub Pages de los nuevos artículos como este.

Para ello me he basado en una acción generada en GitHub explícitamente para dicho fin llamada Vuepress deploy (opens new window).

Uso

A continuación seguiremos los pasos indicados en dicha acción a los que he añadido una serie de apuntes de mi cosecha.

Paso 1. Crear el fichero de la acción

Debemos crear el fichero vuepress-deploy.yml en la carpeta .github/workflows del directorio ráiz de nuestro repositorio de origen, es decir, en el que tenemos el código fuente de nuestro blog creado con VuePress. El contenido del fichero debe ser el siguiente:

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_REPO: tu-usuario-github/tu-repositorio-destino-blog-vuepress-compilado
        TARGET_BRANCH: master
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: blog/.vuepress/dist/

Si quieres ver cómo he configurado mi dominio personalizado rafaelneto.dev de GitHub para el correcto despliegue y posterior funcionamiento de la web, échale un vistazo a mi fichero vuepress-deploy.yml (opens new window), donde encontrarás la configuración CNAME necesaria.

En mi caso, he creado dichos directorios y fichero desde Visual Studio Code y cuando he intentado sincronizarlo con mi rama master de origen la primera vez, me he encontrado con el siguiente error:

[remote rejected] master -> master (refusing to allow an OAuth App to create or update workflow `.github/workflows/vuepress-deploy.yml` without `workflow` scope)

Al parecer es un error identificado en Visual Studio Code (opens new window) relacionado con las credenciales que han sido creadas con cierta antigüedad mediante Visual Studio Code como aplicación OAuth en Github.

Si a tí te llega a pasar lo mismo, puedes eliminar tus credenciales de GitHub de Windows para que Visual Studio Code te pida autenticarte nuevamente cuando vuelvas a conectarte a algún repositorio remoto de GitHub. Este manual de cómo eliminar tus credenciales de Git de Windows (opens new window) puede servirte como referencia.

Paso 2. Crear un token personal en GitHub

Pulsa en el icono de tu perfil de GitHub > Settings > Developer settings > Personal access tokens > Generate new token > Marca el check "repo". Entonces obtendrás un token que deberás copiar para usar en el siguiente paso.

Paso 3: Crear una clave secreta

En tu repositorio donde tengas tu código de VuePress, accede a Settings > Secrets > Create a new secret y escribe ACCESS_TOKEN en la caja "Name" y pega el token personal en la caja "Value".

Y eso es todo. Con estos simples pasos, al subir un nuevo cambio al repositorio de origen, automáticamenet se generarán y publicarán en el repositorio de destino donde tengas tu blog VuePress publicado.

---