从零用VitePress搭建博客教程(1) – VitePress的安装和运行
1.从零用VitePress搭建博客说明(1) – VitePress的安装和运行
一、写在前面
最近在想更新一把自己的前端吧小博客，但发现wordPress版本停留在了5年之前，发现变化挺大，不支持在线直接更新，服务器正在运行的php等环境完全不支持wordPress最新版本。如果想使用最新版本，服务器环境配置必须更新，只能慢慢折腾了。
然后在想能不能用vitePress + CMS探索重构的可能性，所以接下来这是自己用vitePress搭建的纯文档博客的步骤，在此记录一下。
二、vitePress相关文档
首先我们要知道，VitePress 是 VuePress 小兄弟, 它基于 Vite构建的，而VuePress 是基于 Webpack构建的。
VitePress使用vite和Vue3的驱动的静态站点生成器，比之VuePress更加简约、轻型和高效。特点如下
- 开发服务器启动更快
- 热更新更快
- 构建更快(内部使用 Rollup)
更多不同可以查看文档：https://vitejs.cn/vitepress/#motivation
官方英文文档：https://vitepress.dev/
中文文档：
https://vitepress.qzxdp.cn/reference/site-config.html
三、初始化项目
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初步配置：
export default {
title: '前端吧',
description: '关注web前端开发为主的博客网站和前端网址大全',
// 打包目录
dest: './dist',
head: [
// 添加图标
['link', { rel: 'icon', href: '/favicon.ico' }]
],
}
如上所示，我们只简单地设置了网站标题，网站描述，打包的 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
结果如下：
运行成功，不过目前网站是空的，只有一个logo标题，那么，接下来我们需要不断完善，比如配置导航，首页、自定义模板等等
