Banner vuepress

Recientemente fue lanzada la versión de VuePress 1.0, que incluye diferentes cambios a tener en cuenta al momento de actualizar nuestros sitios. En Styde ya hemos hablado anteriormente de VuePress, explicamos cómo realizar un deploy automatizado usando Travis CI y el sitio de la traducción de la documentación de Laravel funciona también en VuePress. A continuación hablaremos un poco sobre estos cambios que debemos realizar para que nuestro sitio funcione correctamente.

Ten en cuenta si usas Travis para desplegar tu sitio

Travis CI actualiza de forma automática las versiones de los paquetes que usamos e instala la versión más reciente. Al haber cambios importantes de versiones, puede que nuestro sitio con VuePress deje de mostrarse correctamente y se pierdan los estilos, por ello es recomendable indicar una versión específica del paquete en nuestro archivo .travis.yml:

Con @1.0.2 indicamos la versión del paquete a instalar. Si sale una versión nueva Travis CI la ignorará y mantendrá la que indicamos. Esto nos permitirá poder agregar los cambios necesarios a nuestro sitio al momento de actualizar.

Actualización de estilos

Anteriormente usabamos  .vuepress/override.styl y .vuepress/style.styl para personalizar los estilos de nuestro sitio:

  • En override.styl indicábamos los colores personalizados.
  • En style.styl el CSS personalizado que queríamos agregar.

Ahora, con la nueva versión de VuePress, debemos crear un nuevo directorio dentro .vuepress llamado styles y dentro reemplazar los archivos anteriores con los siguientes:

  • El archivo styles/palette.styl reemplaza a override.styl.
  • El archivo styles/index.styl reemplaza a style.styl.

Importar componentes

Los componentes ahora se encuentran dentro del directorio components y debemos especificar esto al momento de importarlo dentro de nuestros archivos Markdown:

Herencia de temas

VuePress 1.0 nos permite heredar desde el tema principal y construir uno nuevo en base a ese. Simplemente debemos crear un archivo .vuepress/theme/index.js y dentro extender del tema principal de VuePress:

Nuevos plugins

En VuePress 1.0 ahora tenemos una serie de plugins que podemos utilizar en nuestros sitios, entre ellos Google Analytics y Service Workers.

Plugin de Google Analytics

Anteriormente Google Analytics podía ser configurado en el archivo config.js de nuestro sitio definiendo los valores necesarios en la opción ga. Ahora simplemente podemos instalar el plugin de Google Analytics y todo será configurado por nostros de forma automática:

Service Worker

El plugin Service Worker permite que los usuarios accedan a nuestro sitio de forma offline luego de haberlo visitado por lo menos una vez. Podemos instalarlo usando:

Luego en el archivo config.js agregamos lo siguiente:

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.