VuePress ๐Ÿง™โ€โ™€๏ธ

โœจ

โœจ

โœจ

Hello ๐Ÿ‘‹

Ramona Bรฎscoveanu

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ’ป Senior Developer @ SAP

ย @CodesOfRa

ย 

๐Ÿง€ ๐Ÿท๐ŸŒฑ

VuePress

  • What it is?
  • Why use it?
  • How does it work?

a minimalistic static site generatorย with a Vue-powered theming systemย and Plugin API, and a default themeย optimized for writing technical documentation.

But what is a static site?

All the things Debbie said ๐Ÿ’๐Ÿผโ€โ™€๏ธ

Why use it?

All the things Debbie said ๐Ÿ’๐Ÿผโ€โ™€๏ธ

What makes VuePress magic โœจ?

Default theme specially built for writing technical documentation

Markdown extensions

Frontmatter

Github-style tables

Emojis๐Ÿฅณ

Syntax Highlighting in Code Blocks

Vue in markdown ๐Ÿ˜ฒ

Easy to use

How to start?

yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress

or

Demo time ๐Ÿ‘ฏโ€โ™€๏ธ

Project structure

โ”œโ”€โ”€ docs
โ”‚   โ”œโ”€โ”€ README.md
โ”‚   โ”œโ”€โ”€ guide
โ”‚   โ”‚   โ”œโ”€โ”€ README.md
โ”‚   โ”‚   โ””โ”€โ”€ getting-started.md
โ”‚   โ””โ”€โ”€ .vuepress
โ”‚       โ”œโ”€โ”€ config.js
โ”‚       โ”œโ”€โ”€ components
โ”‚       โ”‚   โ””โ”€โ”€ MyVueComponent.vue
โ”‚       โ””โ”€โ”€ styles
โ”‚           โ”œโ”€โ”€ palette.styl
โ”‚           โ””โ”€โ”€ index.styl
โ””โ”€โ”€ package.json

How does it work?

A VuePress site is,

in fact, a SPA powered by

Vueย +ย Vue Routerย + webpack.

Theming

System

Plugin

System

Layout

System

Default

theme

External

themes

Internal

Plugins

External

Plugins

Static Site Generator

But what if you don't like the default theme?

Find a theme you like

ย 

// .vuepress/config.js
module.exports = {
  theme: 'vuepress-theme-awesome-theme' 
  
};

Create your own theme

theme
โ”œโ”€โ”€ global-components
โ”‚   โ””โ”€โ”€ xxx.vue
โ”œโ”€โ”€ components
โ”‚   โ””โ”€โ”€ xxx.vue
โ”œโ”€โ”€ layouts
โ”‚   โ”œโ”€โ”€ Layout.vue (Mandatory)
โ”‚   โ””โ”€โ”€ 404.vue
โ”œโ”€โ”€ styles
โ”‚   โ”œโ”€โ”€ index.styl
โ”‚   โ””โ”€โ”€ palette.styl
โ”œโ”€โ”€ templates
โ”‚   โ”œโ”€โ”€ dev.html
โ”‚   โ””โ”€โ”€ ssr.html
โ”œโ”€โ”€ index.js
โ”œโ”€โ”€ enhanceApp.js
โ””โ”€โ”€ package.json

Theme inheritanceย 

module.exports = {
  extend: '@vuepress/theme-default'
}

Overrides

//.vuepress/styles/palette.styl
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
//.vuepress/styles/index.styl
.content {
  font-size 30px
}

Ejecting

//run
./node_modules/.bin/vuepress eject

Plugins

Plugins

  • active-header-links
  • back-to-top
  • blog
  • google-analytics
  • last-updated
  • medium-zoom
  • pagination
  • pwa
  • register-components
  • search

You can also write your own pluginย 

VuePress is magic โœจ

Want to know more?

Thank you! ย