VuePress is a minimalistic Vue-powered static site generator from Evan You, the creator of Vue.js.
A VuePress site is infact a Vue powered Single Page Application(SPA) with VueRouter & webpack. If you've used Vue before, you will notice the familiar development experience when you are writing or developing custom themes (you can even use Vue DevTools to debug your custom theme!).
How VuePress works?
During build, VuePress create a server-rendered version of the app and render the corresponding HTML by virtually visiting each route. Each markdown file is compiled into HTML with markdown-it and then processed as the template of a Vue component. This allows you to directly use Vue inside your markdown files and is great when you need to embed dynamic content
Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.
Features of VuePress
- Built-in markdown extensions optimized for technical documentation
- Ability to leverage Vue inside markdown files
- Vue-powered custom theme system
- Automatic Service Worker generation
- Google Analytics Integration
- "Last Updated" based on Git
- Multi-language support
- A default theme with:
- Responsive layout
- Optional Homepage
- Simple out-of-the-box header-based search
- Algolia Search
- Customizable navbar and sidebar
- Auto-generated GitHub link and page edit links
Start Using VuePress
You can install VuePress globally or locally within project. After installation you just have to build the project to read your changes.
yarn global add vuepress # OR npm install -g vuepress # create a markdown file echo '# Hello VuePress' > README.md # start writing vuepress dev # build vuepress build
Here is how beautiful the default theme looks like: