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

我的博客就是用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.

1. 安装Node.js： NPM通常随Node.js一起安装。访问Node.js官方网站 https://nodejs.org/ 下载适用于Windows的Node.js安装程序。选择与你的系统架构（32位或64位）相匹配的版本进行下载。

2. 运行安装程序： 双击下载的安装程序，并按照提示完成安装。安装过程中，确保勾选了“npm package manager”选项，以便同时安装NPM。

3. 验证安装：安装完成后，打开命令提示符（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文件。