最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开。
为项目加入 VuePress
第一步为您的项目安装 VuePress,如果您的项目代码中并没有 package.json文件,请先执行 npm init。
npm install -D vuepress // 或者 yarn add -D vuepress
// 在项目根目录下新加 docs 文件夹
mkdir docs
// 新建一个 Markdown 文件
echo "# Hello VuePress!" > docs/README.md
第二步在 package.json 中加入这些脚本,并运行。
// package.json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
// 本地运行文档
npm run docs:dev
// 编译打包生产静态 HTML 文件
npm run docs:build
VuePress 对 Markdown 做了一些扩展,使得我们可以在 Markdown 文件中使用 YAML 语法,VuePress 使用 ---来隔离 Mark