01.【邂逅初遇】VitePress 介绍和安装

为什么选用了 VitePress

胡乱折腾： 写了几年博客，用过 wordpress、自己开发、Github、平台写博客(掘金)......几乎能尝试的方式都用了，每年折腾两次，但都各有利弊。但现在我就像专注于文章写作，而非再去折腾技术。这样折腾下来，为了满足每种技术的方案而不断改变文章，所以竟然文章都没有保存下来。目前就想用一个 Markdow 方式编写文章，然后直接生成博客的方案，以后不再折腾了，只保留 Markdown 文件就好。

最近几天 VitePress-1.0 正式版发布了（现在应该是 1.02 版，官方的更新非常的快，我的视频速度追不上它的更新速度），代表着它已经成熟，可以使用了。所以又一次忍痛关掉了刚建立不久的博客，重新来过。

希望这是最后一次折腾啦。

VitePress 介绍

VitePress: 由 Vite 和 Vue 驱动的静态站点生成器，将 Markdown 变成优雅的文档，甚至你不会编程也可以快速使用。

四大优点:

专注内容 ： VitePress 可以只需要 Markdown 即可轻松创建美观的文档站点，这正是技术人需要的一种方式。不折腾，少折腾。
Vite 加持 ：在 Vite 工具的加持下，服务器即时启动，闪电般实现热更新，还可以使用基于 Vite 生态插件。
可自定义 ：直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。
速度超快 ：生成的网站采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。

注意:

最主要的好处，你用 VitePress 都不需要购买服务器，用 Github 就可以作为你的博客服务器进行访问

安装前的准备

你能搜到这个教程，说明你对 VitePress 已经了解啦，所以废话就不多说了，直接开始安装。但我希望文章（视频）不光针对于程序员，非程序员也可以按照步骤搭建这样的文档网站。所以我会站在自己不会程序的角度来讲解这个视频，让文章（视频）可以帮助更多人学习 VitePress。

要安装 VitePress 需要使用包管理工具，包管理工具的种类很多，常用的有 npm、pnpm、yarn 和 bun. 这里我们就选择最常用的 npm 来进行安装。要使用它之前，需要先安装 Node.js.

安装 Node.js： NPM 通常随 Node.js 一起安装。访问 Node.js 官方网站 https://nodejs.org/ 下载适用于 Windows 的 Node.js 安装程序。选择与你的系统架构（32 位或 64 位）相匹配的版本进行下载。
运行安装程序：双击下载的安装程序，并按照提示完成安装。安装过程中，确保勾选了“npm package manager”选项，以便同时安- 装 NPM。
验证安装：安装完成后，打开命令提示符（CMD）或 PowerShell，输入以下命令来验证 NPM 是否安装成功：

npm -v

如果显示了 NPM 的版本号，则表示 NPM 已成功安装。VitePress 要求 npm 大于 8.1 版本。如果你按照视频教程操作，下载并安装了最新版本的 Node.js，那么 NPM 的版本就不会有问题。

安装 VitePress

包管理工具安装完了，我们就可以安装 VitePress 了，这里虽然我们使用了 npm，但是还是要强调一下，它是支持多种包管理工具安装的，用那种形式取决于你使用的包管理工具。我这里就是用最简单 npm 进行安装

npm add -D vitepress

当然你使用 yarn 安装也是可以的，命令如下

yarn add -D vitepress

上面的 npm 执行完成后，还需要执行一下安装向导，可以通过下面的命令启动向导

$npx vitepress init

之后在命令行回答几个简单的问题

┌  Welcome to VitePress!  //欢迎来到VitePress
│
◇  Where should VitePress initialize the config?  //在哪里初始化项目
│  ./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   //自定义
└

到这里我们完成了 VitePress 的安装，接下来就可以在终端中使用命令

npm run docs:dev

运行我们的文档了，这里用的是开发模式，运行结果如下

npm run docs:dev

docs:dev
vitepress dev


  vitepress v1.0.1

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

然后我们在浏览器的地址栏输入 http://localhost:5173/就可以打开一个默认样式的 VitePress 本地开发站点了。

下期视频我们讲解一下 VitePress 的目录结构和 package.json 文件

Page Frontmatter

年龄	性别	手机

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} ${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} $$

01.【邂逅初遇】VitePress 介绍和安装 ​

为什么选用了 VitePress ​

VitePress 介绍 ​

安装前的准备 ​

安装 VitePress ​