教你用VuePress如何快速搭建个人blog

前言

很多人只听过vue，没听过vuepress？它可是新的vue全家桶成员之一，尤雨溪大神于2018年发布。vuepress项目在github上的star数截止发文已经是18.6K了。很多前端程序员困扰没有自己的个人免费小网站，今天投资小达人手把手教你用vuepress快速创建自己的个人小网站，首先简单介绍一下vuepress是用于迅速搭建技术文档网站与个人博客，简单快捷，下面我们一起开启学习vuepress的学习之旅吧！在开启vuepress搭建网站之前，首先上链接：前端投资小达人

一、模块概述

1. 定义

Vue 驱动的静态网站生成器

2. 亮点

自己总结的vuepress优点

3. 同类模块横向对比

①. Nuxt:

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

②. Docsify / Docute:

同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好

③. Hexo:

主题系统太过于静态以及过度地依赖纯字符串, 而不是基于Vue。同时，Hexo 的 Markdown 渲染的配置也不是最灵活的

④. GitBook：

• 当文件很多时，每次编辑后的重新加载时间长得令人无法忍受
• 默认主题导航结构也比较有限制性

• 主题系统也不是 Vue 驱动的
• GitBook 团队更专注于将其打造为一个商业产品而不是开源工具

二、成品展示

1. 技术文档网站：

vue全家桶官网：vue、vuex、vue-cli、vue-router以及vuepress本身

2. 个人博客：

博客1（默认主题）、博客2（自定义主题）

三、开始搭建

coding之前，建议大家先了解markdown语法，为之后的文档撰写做铺垫：传送门

1. 全局安装 VuePress

npm install \-g vuepress

2. 创建并进入项目

mkdir vuepress-demo && cd vuepress-demo

3. 初始化项目

npm init \-y // 默认配置yes

在生成的package.json中，添加如下两个启动命令：

"scripts": {
  "dev": "vu