使用vuepress搭建静态博客的示例代码

什么是vuePress

vuePress是以vue驱动的主题系统的简约静态网站生成工具（拥有自己的默认主题）。

veuPress由vue,vue-router,webpack驱动的单页面应用，每个markdonw文件都使用markdonw-it编译为html文件，然后作为vue组件的模板来处理。

中文官网
VuePress仓库
项目地址

VuePress 有很多优点：

界面简洁优雅（个人感觉比 HEXO 好看）
容易上手（半小时能搭好整个项目）
更好的兼容、扩展 Markdown 语法
响应式布局，PC端、手机端
Google Analytics 集成
支持 PWA

安装vuePress

全局安装

在此方式中，只是要项目根目录创建了一个README.md文件，直接执行访问的就是此文件

npm install -g vuepress
# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md
# 开始编写文档
vuepress dev
# 构建
vuepress build

在已有项目中安装

# 安装为本地依赖项
npm install -D vuepress
# 创建一个 docs 目录
mkdir docs
# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md
# 开始编写文档
npx vuepress dev docs

还可以在package.json中添加js脚本，官网方式不好写，我们直接用常用的方式

{
 "scripts": {
  "start": "vuepress dev docs",//运行
  "build": "vuepress build docs"//打包
 }
}

使用vuePress搭建静态博客

接下来就是配置了，我会直接把我的配置文件贴上来，我们先看结构

博客结构

博客结构分为主页，导航栏，侧边栏

在.docs目录下新建一个.vuePress文件，在此注意，搭建博客过程中所有的配置文件以及内容文件、主题等都放在此目录中
在.vuePress文件夹下新建三个文件,public用来放图片等静态文件，theme中放到博客用到的主题，config.js中存放所有的配置

.vuePress
 ---public
 ---theme
 ---config.js

在.docs文件夹下新建几个模块文件夹，比如我的就分为学习笔记、问题记录、关于我等,每个文件夹下再新建md文件

vuePress会自动把README.md设置为导航的主页，所以如果我们需要主页就先建README.md,再新建first.md,seconde.md等文件作为侧边栏要显示的文件

.docs
 ---.vuePress
 ---about
  ---README.md
  ---first.md
  ---seconde.md
 ---study
 ---problem

具体配置

最重要的config.js配置

在此值得注意的是，主题配置不只是简单的样式配置等，其中包括导航与侧边栏部分的配置，此处配置参见官网导航栏”默认主题配置“