使用VuePress 搭建个人博客

介绍

VuePress 是一个静态网站生成器，包含由Vue驱动的主题系统和插件API，同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。

安装

❝

前置条件：VuePress 需要 Node.js >= 8.6

❞

安装 vuepress

VuePress 安装毕竟简单，可以使用以下命令直接安装：

yarn add -D vuepress # npm install -D vuepress

验证安装

为了验证VuePress 的效果，首先创建一篇文档

mkdir docs && echo '# Hello VuePress' > README.md

在当前目录下创建 package.json 文件，添加以下内容：

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

在本地启动服务器

vuepress dev .

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

如果没有报错，可在浏览器打开http://localhost:8080，默认加载内容为 README.md 中内容。

VuePress 目录结构

VuePress 遵循 「“约定优于配置”」 的原则，推荐的目录结构如下：

.
├── blog
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   └──_post
│       ├── about.md
│       └── README.md 
│ 
└── package.json

这里blog目录被称作 targetDir ，目录下的文件都是相对于 blog 目录的。比如此目录下文件的路由