VuePress
Docs Made Easy
Ben Hong
@bencodezen
ThisDot - June 2020
Before we get started...
you can find the slides here:
Ben Hong
Ben Hong
Developer Experience (DX) Engineer at Cypress.io
Vue.js Core Team
How to Draw an Owl
Step 1. Draw some circles
How to Draw an Owl
How to Draw an Owl
Step 1. Draw some circles
2. Draw the rest of the forking owl
Wait... what just happened...
Incorrect documentation is often worse than no documentation.
“
Bertrand Meyer
"Wisdom of the Ancients"
Credit: xkcd #979
Documentation that is approachable and
up to date is hard to find.
Common Obstacles
Common Obstacles
- Separate from the codebase
- Behind a paywall
- Not enough time
- Difficult to customize
like a double rainbow, or someone on the internet saying,
"You know what. You've convinced me I'm wrong."
Good documentation is a rare occurrence,
But there is hope for us yet...
Documentation that is approachable and
up to date is hard to find.
Documentation that is approachable and
up to date is hard to find.
VuePress
Docs Made Easy
Easier
Documentation that is approachable and
up to date is hard to find.
Documentation that is approachable and
up to date is hard to find.
Enter
VuePress
VuePress is a static site generator with a Vue-powered theming system that comes with a default theme optimized for technical documentation.
“
VuePress is a static site generator with a Vue-powered theming system that comes with a default theme optimized for technical documentation.
“
Features
- Homepage
- Navbar
- Sidebar
- Edit links
- Last updated
- Search
User
Features
- Homepage
- Navbar
- Sidebar
- Edit links
- Last updated
- Search
User
- Frontmatter
- Markdown first
- Extensions for Markdown
- Syntax highlighting
- Vue powered theming system
Maintainer
You can use
Vue in Markdown
🤩 🤩 🤩
But the key thing to remember...
VuePress is not just for Vue projects.
What about
VitePress?
🤔 🧐 🤔
How do I get started?
How do I get started?
# yarn
yarn create vuepress [directoryName]How do I get started?
# yarn
yarn create vuepress [directoryName]# npm
npx create-vuepress [directoryName]