探索VuePress: 构建静态站点的优秀工具

VuePress由两部分组成：第一部分是支持用Vue编写主题的极简静态网站生成器。第二部分是一个为编写技术文档而优化的默认主题。它的设计初衷是为了能够让开发者更加专注于写作。

下面，我们来看一下如何开始使用VuePress来构建一个静态网站。

安装

首先，你需要在你的项目中安装VuePress：

npm install -D vuepress
# 或者
yarn add -D vuepress

创建一个文档

在你的项目中创建一个 docs 目录，然后添加 README.md 文件：

# Hello VuePress

启动项目

在你的 package.json 添加一个启动脚本：

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

然后，运行以下命令来启动服务器：

npm run docs:dev
# 或者
yarn docs:dev

现在，你可以在浏览器中看到你创建的首个 VuePress 页面了。

VuePress为每一个以.md后缀 结尾的文件生成一个预渲染的HTML。在开发过程中，我们还提供了一个开发服务器，支持热重载。

构建静态网站

构建应用，只需要运行：

npm run docs:build
# 或者
yarn docs:build

运行成功后，你的 .vuepress/dist文件夹将变成可以部署到任何静态文件服务器的静态网站。

自定义主题

 创建主题目录

首先，在你的 VuePress 项目中，你需要创建一个 .vuepress/theme 目录存放自定义主题相关的文件。

你的目录结构应该如下：

.
├── docs
│   ├── .vuepress
│   │   └── theme
│   │       ├── Layout.vue
│   │       └── styles
│   │           ├── index.styl
│   │           └── palette.styl
│   └── README.md
└── package.json

 添加 Layout 组件

在 theme 文件夹中，创建一个 Layout.vue 文件。这就是你自定义主题的主布局文件：

<!-- theme/Layout.vue -->
<template>
  <div class="layout">
    <Content/>
  </div>
</template>

 添加样式

在 theme/styles 文件夹中，添加两个 .styl 文件：index.styl 和 palette.styl，你可以在这里定义你的主题样式。

举例，你可以在 palette.styl 文件中重写默认的颜色变量，而在 index.styl 文件中添加你的自定义样式。

/* theme/styles/palette.styl */
$accentColor = #42b983
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

/* theme/styles/index.styl */
.layout {
    background: $accentColor;
    color: $textColor;
    border: 1px solid $borderColor;
}

使用你的自定义主题

最后，你需要在 .vuepress/config.js文件中指定你的自定义主题：

module.exports = {
  theme: 'my-theme',
}

现在，当你在本地运行你的VuePress站点时，你会发现它应用了你的自定义主题。

上述步骤只是创建并使用自定义主题的基础，你可以依据你的需求使用 Vue 和 VuePress 的 API 对其进行更多自定义。

VuePress为开发者提供了一种简单又灵活的方式构建静态站点。这只是个开始，VuePress还有很多有趣的功能等待你去挖掘。无论你是想搭建一个博客，还是为你的项目创建文档，VuePress都是一个优秀的选择。