使用bun搭建一个vitepress个人笔记站点

2025年3月23日

笔者:ryanho

好久没更新了(好久没有水文章了),最近了解到bun想测试一下怎么样,正巧我之前搭的vitepress也想重建一下,接下来试一遍。

1.安装bun

www.bun.sh.cn/docs/instal...

从这个中文站看到,windows安装需要最低 Windows 10 版本为 1809。

我的系统版本22H2应该是够用了。

arduino 复制代码
powershell -c "irm bun.sh/install.ps1|iex"

安装成功之后重启cmd或者powershell:

复制代码
bun -v
1.2.5

说明成功安装。

2.创建vitepress项目

打开vscode,创建blog文件夹,打开终端并输入:

csharp 复制代码
bun add -D vitepress

安装完成,用时15.06s。

sql 复制代码
PS E:\study\Blog> bun add -D vitepress
bun add v1.2.5 (013fdddc)
​
installed [email protected] with binaries:
 - vitepress
​
125 packages installed [15.06s]

初始化vitepress项目:

csharp 复制代码
bun vitepress init

接下来按vitepress.dev/zh/guide/ge...说法回答几个问题。

yaml 复制代码
┌  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.

创建好后启动项目:

arduino 复制代码
bun run docs:dev

项目成功跑起来了,接下来替换我之前写过的内容进来,看一下HMR热更新如何。

短暂测试了一遍没出现任何问题,热更新也蛮快。

3.打包测试

接下来测试打包和本地部署。

arduino 复制代码
bun run docs:build
erlang 复制代码
$ 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放在iis上访问。

测试没有问题。

相关推荐
陈随易2 分钟前
薪资跳动,VSCode实时显示今日打工收入
前端·后端·程序员
七灵微6 分钟前
【前端】SPA v.s. MPA
前端
fqq314 分钟前
CSS级联样式(基础知识)备忘录
前端·css
前端小巷子14 分钟前
JS深拷贝与浅拷贝
前端·javascript·面试
用户214118326360215 分钟前
N8N教程-手把手教你搭建 N8N 自动化工作流:从安装到云部署全流程实战
前端·vue.js
Mintopia39 分钟前
Three.js 环境贴图:给你的 3D 世界加个梦幻滤镜
前端·javascript·three.js
Mintopia1 小时前
JavaScript 里的光影魔术师:光线投射
前端·javascript·计算机图形学
呆呆的心1 小时前
深入探索 JavaScript 字符串处理:从基础到高阶 🚀
前端·javascript
zhangbao90s1 小时前
react-window:学习如何高效地渲染大型列表
前端·javascript·react.js
x291 小时前
全栈视角重塑 Electron 应用开发体验:Nest 架构、多窗口、IPC 通信全解耦
前端