如何使用bun搭建vitepress个人博客

最近琢磨着测试一下bun这玩意儿，正好之前搭的vitepress站点也想重新搞一搞，今天就来给大伙分享下具体咋操作。

一、安装bun

bun的安装可以参考它的中文官网，网址是https://www.bun.sh.cn/docs/installation 。按照官网的说法，Windows系统安装bun的话，最低得是Windows 10 版本1809 。我这系统是22H2，肯定是够用了。

安装的时候，在powershell里执行这条命令就行：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

powershell -c "irm bun.sh/install.ps1|iex"

安装完成后，咱得重启下cmd或者powershell，然后输入下面这条命令检查下是否安装成功：

bun -v
1.2.5

如果能显示出版本号，就说明安装没问题啦。

二、创建vitepress项目

1. 初始化项目

先打开vscode，新建一个blog文件夹。接着在vscode的终端里输入下面的命令，安装vitepress：

bun add -D vitepress

我安装的时候，大概花了15.06秒。安装完成后，会有类似下面这样的提示信息：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

PS E:\study\Blog> bun add -D vitepress
bun add v1.2.5 (013fdddc)

installed vitepress@1.6.3 with binaries:
 - vitepress

125 packages installed [15.06s]

2. 配置项目

安装好之后，要初始化vitepress项目，执行下面这条命令：

bun vitepress init

这时候会弹出一系列问题，按照vitepress.dev/zh/guide/ge… 这个指南里说的来回答就行。比如像下面这样：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

3. 启动项目

项目创建好之后，就可以启动看看效果啦，执行下面这条命令：

bun run docs:dev

项目启动成功后，我就把之前写的内容替换进去，顺便测试了下HMR热更新。一顿操作下来，没发现啥问题，热更新速度也还挺快。

三、打包测试

站点能正常跑起来了，接下来测试打包和本地部署。打包的话，执行这条命令：

bun run docs:build

执行后会有类似下面这样的输出：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问

$ vitepress build blog
Debugger attached.

  vitepress v1.6.3

✓ building client + server bundles...
✓ rendering pages...
build complete in 7.17s.
Waiting for the debugger to disconnect...

打包完成后，会生成一个dist文件夹。把这个dist文件夹放到iis上进行访问测试，我这边测试下来没发现啥问题。