一、写在前面
最近想更新一把自己的前端吧小博客站点，但发现wordPress版本停留在了5年之前，发现变化挺大，不支持在线直接更新，服务器正在运行的php等环境完全不支持wordPress最新版本。如果想使用最新版本，服务器环境配置必须更新，只能慢慢折腾了。
然后在想能不能用VitePress + CMS探索重构的可能性，所以接下来这是自己用VitePress搭建的静态博客的过程，在此记录一下，第一次在掘金上记录个人笔记，如果有错误和不专业之处，欢迎指正，谢谢！
二、VitePress相关文档
首先我们要知道，VitePress 是 VuePress 小兄弟, 它基于 Vite构建的，而VuePress 是基于 Webpack构建的。
VitePress是使用vite和Vue3的驱动的静态站点生成器，比之VuePress更加简约、轻型和高效。特点如下
- 1.开发服务器启动更快
- 2.热更新更快
- 3.构建更快(内部使用 Rollup)
更多特点和不同查看：vitejs.cn/vitepress/#…
官方英文文档：vitepress.dev/
中文相关文档：
vitepress.qzxdp.cn/reference/s…
三、初始化项目
1、创建项目目录并初始化
创建一个qianduan8目录，进入到目录，执行初始化命令
pnpm init
2、本地项目安装VitePress
pnpm add -D vitepress
3、配置项目目录结构
我们创建一个docs/.vitepress的目录和配置文件、首页，public。
开始我们创建的目录结构如下所示:
- ├─ docs
- │ ├─ .vitepress
- │ │ └─ config.js
- │ └─ index.md
- │ └─ public
- └─ package.json
docs/.vitepress: 用于存放全局的配置、自定义组件， 自定义主题（theme）等。
- config.js: 项目配置文件。
public: 公共文件目录，存放静态资源目录。（之后在首页和主题配置里可以直接使用 “/logo.png”引入）
index.md：则是站点的首页。
其中，config.js是配置VitePress网站的必要条件，它将导出一个JS对象，如果项目越来越大时，配置可以抽出来。 config.js初步配置如下：
1. export default {
1. title: '前端吧',
1. description: '关注web前端开发为主的博客网站和前端网址大全',
1. // 打包目录 outDir: './dist',
1. head: [
1. // 添加图标
1. ['link', { rel: 'icon', href: '/favicon.ico' }]
1. ],
1. }
如上所示，我们只简单地设置了网站标题，网站描述，打包的 dist 目录，以及网站图标，后面更多配置都是在config.js这个文件完成。
4、配置运行脚本
在package.json下配置，如下：
"scripts": {
"docs-dev": "vitepress dev docs",
"docs-build": "vitepress build docs",
"docs-serve": "vitepress serve docs"
}
5、本地运行
执行如下命令
pnpm docs-dev
效果如下，现在还没有什么内容，接下来我们就开始配置博客的首页
