前言
说起文档，我们可能会第一时间会想起很多技术文档，比如Vue.js文档、React.js文档、TypeScript文档，它们都有相似的布局和样式。
那么，作为开发者的我们，怎么不也搞一个类似于技术文档的网站作为自己的博客呢？现在有很多开源的项目可以做博客，比如基于Vue.js开发的Vuepress以及同一家的Vitepress，还有基于React.js开发的Docusaurus。这么多方案，我们今天就拿Vuepress为例来搞一下线上可以访问的博客。
在开始实战之前呢！透露一下最近在搞得开源库Strve.js，它是一个可以将字符串转换为视图的JS库，换句话讲，也可以说是一款轻量的MVVM框架。目前Strve.js官方文档就是用的基于Vuepress来进行开发部署的，感兴趣的可以访问下方的官方文档源码地址，可以根据我的来进行自定义配置自己的博客网站。如果觉得不错的话，别忘了帮忙点个Star啊！
Strve.js官方文档源码地址
代码语言：javascript复制https://github.com/maomincoding/strvejs-doc
Strve.js官方文档
代码语言：javascript复制https://maomincoding.github.io/strvejs-doc/
实战
自己亲身实战所攒下的经验，请认真往下看哦！
学习一个新技术，我们首先做得事就是打开官网文档，根据快速上手或者指南来进行大致的了解。
第一步
打开Vuepress官网:
代码语言：javascript复制https://vuepress.vuejs.org/zh/
官网上怎么安装Vuepress项目已经很详细了，这里就不再阐述，可以根据快速上手快速搭建一个Vuepress项目。
代码语言：javascript复制https://vuepress.vuejs.org/zh/guide/getting-started.html
一般搭建完成之后，会显示以下目录结构：
代码语言：javascript复制.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
第二步
假设你已经在第一步中成功搭建起了项目，并且成功启动。下面，我们将会改改代码看下都是什么效果。
首先，我会看下这个文件doc > README.md，这个文件你可以把它理解成首页。
.
├─ docs
│ ├─ README.md
以Strve.js文档首页为例：
代码语言：javascript复制---
home: true
heroImage: /logo.png
heroText: Strve.js
tagline: 一个可以将字符串转换为视图的JS库
actionText: 快速上手 →
actionLink: /zh/started/
features:
- title: ⚡️ 快速地
details: 超快的虚拟 DOM。
- title:
