VitePress 静态博客

VitePress 是一个为构建面向开发者文档而优化的静态网站生成器。

特性

极速的冷启动
即时热更新
简单的约定式路由
基于Markdown的文档
丰富的插件API
PWA支持

官方文档

https://vitepress.dev/zh/

安装前准备

安装以下工具

Node.js 一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Git 一个免费的开源分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

VSCode 一个轻量级但功能强大的源代码编辑器，支持几乎所有主流的开发语言和开发工具。

在终端使用 npm -v 命令查看npm包管理器版本

1 2	$ npm -v 10.8.2

在终端使用 node -v 命令查看node.js版本

1 2	$ node -v v20.15.1

安装VitePress包

1	npm add -D vitepress

[!TIP]
-D 表示开发环境，安装完成后会在此目录生成node_modules文件夹，里面存放了vitepress包

项目初始化

1	npx vitepress init

[!TIP]
npx 是一个运行命令行工具的命令，可以运行本地安装的包，init 是初始化命令，会生成一个默认的VitePress项目

参考以下内容进行配置即可

┌  Welcome to VitePress! | 欢迎来到 VitePress!
│
◇  Where should VitePress initialize the config? | VitePress 应该在哪里初始化配置？
│  ./docs
│
◇  Site title: | 网站标题
│  My Awesome Project
│
◇  Site description: | 网站描述
│  A VitePress Site
│
◆  Theme: | 主题
│  ● Default Theme (Out of the box, good-looking docs) | 默认主题（开箱即用，外观精美的文档）
│  ○ Default Theme + Customization | 默认主题 + 自定义
│  ○ Custom Theme | 自定义主题
└
o  Use TypeScript for config and theme files? | 是否使用 TypeScript 来编写配置和主题文件？
|  Yes
|
o  Add VitePress npm scripts to package.json? | 是否将 VitePress 的 npm 脚本添加到 package.json 中？
|  Yes
|
—  Done! Now run npm run docs:dev and start writing. | 完成！现在运行 npm run docs:dev 并开始编写。

运行项目

在开发模式下启动（支持实时热更新）

1	npm run docs:dev

vitepress v1.3.0

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

[!TIP]
在浏览器中打开 http://localhost:5173/ 即可查看项目

清夏晚风的博客