资治通荐 - 第 0005 荐：VuePress，静态网站生成神兽，嗷呜~~ - 《刻舟求荐》

她，身世显赫，外表清丽出众，文能让你帮忙拧瓶盖，武能拧下你的脑袋，她就是你心目中的小神兽——VuePress

介绍

VuePress ，一个基于 Vue 的轻量级静态网站生成神器。

她遵循大道至简的原则，以 Markdown 为中心的项目结构，以最少的配置让你更专注于创作。

她由Vue 驱动，享有 Vue + webpack 的开发体验，让你可以在 Markdown 中使用 Vue 的组件，还可以使用 Vue 来开发自定义主题。

她拥有高性能，为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

她还拥有丰富的插件和美观的主题，一个完整的生态，不失每一个爱她的理由。

前方高能，请确保您的 Node.js 版本 >= 8.6。

安装

yarn global add vuepress # 或者：npm install -g vuepress

创建项目目录

mkdir helloworld && cd helloworld

创建markdown

echo '# Good Good Study，Day Day UP' > README.md

秀一下

vuepress dev .

浏览器访问 http://localhost:8080 ，效果如下：

如需编译生成静态文件，执行下面命令即可：

vuepress build .

编译好了的静态文件，放在 .vuepress/dist 目录下。

VuePress 能做的事情，Nuxt 理论上也能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。

这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，对 SEO 不够友好。如果您并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！

Vue官方文档在迁移到 VuePress 之前一直使用Hexo。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，也没能够好好地利用 Vue 来处理页面布局和交互，同时，Hexo 的 Markdown 渲染配置也不是最灵活。

GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。