用VuePress搞定你的博客（一）

前言

作为一个想成为前端工程师的大龄熊孩子，自学前端的日子已经挺久了。

然后自学的时候特想拥有一个自己的个人网站、个人博客之类的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的个人博客的时候。突然我想了一件事情，我究竟为什么要为了写个博客去用这么多技术栈呢？

于是乎懒癌发作，于是我找到了这个东西，就是VuePress。

1. VuePress

VuePress是一个极简静态网站生成器，并且包含由Vue来驱动的主题系统和插件API，诞生的初衷是为了Vue团队写文档时能更加愉♂悦（笑）。它的默认主题就是Vue的文档的样式。

它是由Vue、Vue Router和webpack驱动的单页应用，它会根据Docs目录下的md文件来了使用服务器渲染（SSR）生成静态页面，因为约定大于设置所以大部分都不需要设置什么，就像Nuxt一样。

2. 安装

就像平常写项目一样，我们用npm init来生成一个目录,在目录中新建docs文件夹，之后再新建一个README.md文件，在其中随便输入一段内容，比如“# hello vuepress”

接下来我们来安装VuePress。

npm i vuepress@next -g// 安装1.X版本 虽然还在alpha阶段 但是新增的功能巨好用
npm i vuepress@next -D// 本地也来一个
复制代码

下面我们执行命令行vuepress dev docs， 输出如下为止

现在我们打开浏览器看下

嗯，跑起来！我们继续

3. 使用以及配置

在docs文件夹下新建.vuepress文件夹并新建config.js文件。然后我们来做点配置（继续抄文档）

给./docs/README.me添加内容 (这个内容一定要放在顶部且在markdown文字内容之前)

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
(markdown内容)
复制代码

给./docs/.vuepress/config.js添加内容

module.exports = {
  title: 'Darki',
  themeConfig: {
    nav: [
      {text: 'home', link: '/'},
      {text: 'guichu', items:[
        {text: '葛平', link: '/geping/'},
        {text: '元首', link: '/yuanshou/'}
      ]},
      {text: 'darki', link: 'http://hujiashi.top'}
    ]
  }
}
复制代码

接下来我们在./docs/下新建./docs/guichu/geping/index.md和./docs/guichu/yuanshou/index.md，并在里面随便写的点什么之类的。 目录结构如下

接下来我们重启dev，等等，重启前为了方便我们按照官方推荐给 package.json文件添加一下内容

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
复制代码

停止服务，重新在命令行输入npm run docs:dev(懒得再package.js里添加命令的朋友也可以用王X牌~泥垢了!!)也可以继续用vuepress dev docs

老铁没毛病~如图所见VuePress会根据md在目录内的位置通过vue-router自动生成路径，但是由于其为静态网站生成器，所以改动markdown文档需要重启服务。

以上内容均抄了官方文档，如有雷同，本来就一样的。

不过照搬文档不是我的本意，毕竟这个是系列的（一），该帮看文档的内容也先基本交代一下。

这个是下期预告。

如何设计自己的VuePress博客

转载于:https://juejin.im/post/5c65656ff265da2dab17b5bb