使用vuepress搭建博客

简介

之前有用hexo搭建的静态博客网站，但hexo搭建起来太麻烦了，记得之前搞了一整天，现在使用VuePress方便许多。

VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。如果你以前使用过 Vue，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会融入到熟悉的开发体验中！

VuePress安装

安装node.js

安装node.js，版本要求在>= 8
node.js下载地址：https://nodejs.org/zh-cn/
配置环境变量

安装vuePress

• 创建文件 Blog
• 进入文件夹打开终端，输入

npm install -D vuepress

• 根据以下结构创建，具体配置参考官方

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

• 设置package.json的脚本配置
  VuePress中有两个命令:

1. vuepress dev docs命令运行本地服务，通过访问(http://localhost:8080)即可预览网站
2. vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。
   在这里将两个命令封装成脚本的方式，直接使用npm run dev和npm run build即可。

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

在docs的md文件就是我们要显示的页面，vuepress会为每个 markdown 文件都使用 markdown-it 编译为 HTML，然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue。

部署

当配置好我们的vuepress时，我们就可以通过npm run build 进行打包，然后将项目进行部署。