VitePress博客搭建与个性化美化全攻略

1. 为什么选择VitePress搭建博客第一次接触VitePress是在去年重构个人博客的时候。当时我的Hexo博客已经用了三年多虽然稳定但总觉得启动速度慢、配置复杂。偶然在GitHub Trending上看到VitePress试用了下就被它的极速启动和简洁配置吸引了。VitePress基于Vite构建最大的优势就是快。相比其他静态网站生成器它的冷启动速度提升了10倍以上。我实测下来一个包含50篇文章的博客本地开发服务器能在300ms内启动完成热更新更是快到几乎无感。对于经常需要修改文章的技术博主来说这个体验太重要了。另一个吸引我的点是它的Markdown扩展能力。VitePress支持直接在Markdown中使用Vue组件这意味着我们可以轻松实现各种动态效果。比如在文章中嵌入可交互的代码示例或者添加自定义的提示框样式。我之前用Hexo时想要实现类似功能得折腾半天插件配置。2. 从零开始搭建VitePress博客2.1 环境准备与初始化在开始之前确保你的电脑已经安装了Node.js建议18.x以上版本和npm/yarn/pnpm中的任意一个包管理工具。我习惯用pnpm因为它的磁盘占用更小安装速度更快。打开终端执行以下命令创建项目目录并初始化mkdir my-blog cd my-blog pnpm init接着安装VitePresspnpm add -D vitepress初始化项目配置npx vitepress init这个命令会引导你完成几个简单的配置选项配置文件位置直接回车使用默认值网站标题比如My Tech Blog网站描述简单介绍你的博客主题选择建议先选默认主题后续再自定义初始化完成后你会看到这样的目录结构my-blog ├── .vitepress │ └── config.mts ├── api-examples.md ├── index.md ├── markdown-examples.md ├── package.json └── pnpm-lock.yaml2.2 开发服务器与基础配置启动开发服务器pnpm docs:dev打开浏览器访问http://localhost:5173就能看到默认的博客首页了。现在我们来修改基础配置。打开.vitepress/config.mts文件这里定义了博客的所有核心配置。一个完整的配置示例如下import { defineConfig } from vitepress export default defineConfig({ title: 我的技术博客, description: 分享前端开发与AI技术实践, themeConfig: { nav: [ { text: 首页, link: / }, { text: 前端, link: /frontend/ }, { text: AI, link: /ai/ } ], sidebar: { /frontend/: [ { text: 前端基础, items: [ { text: CSS技巧, link: /frontend/css-tips }, { text: JavaScript进阶, link: /frontend/js-advanced } ] } ], /ai/: [ { text: 机器学习, items: [ { text: TensorFlow入门, link: /ai/tensorflow }, { text: PyTorch实战, link: /ai/pytorch } ] } ] }, socialLinks: [ { icon: github, link: https://github.com/yourname } ] } })3. 深度美化你的VitePress博客3.1 自定义主题样式VitePress的默认主题已经很美观但想要与众不同我们需要自定义样式。首先在.vitepress目录下创建theme文件夹.vitepress └── theme ├── style │ ├── index.css │ └── var.css └── index.ts在var.css中定义CSS变量:root { --vp-c-brand-1: #646cff; --vp-c-brand-2: #747bff; --vp-c-brand-3: #9499ff; --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff); --vp-button-brand-bg: var(--vp-c-brand-1); --vp-button-brand-hover-bg: var(--vp-c-brand-2); }然后在index.ts中引入样式import DefaultTheme from vitepress/theme import ./style/index.css export default { extends: DefaultTheme }3.2 实现高级视觉效果彩虹背景动画效果创建rainbow.css文件keyframes rainbow { 0% { --vp-c-brand-1: #ff0000; } 16% { --vp-c-brand-1: #ffff00; } 33% { --vp-c-brand-1: #00ff00; } 50% { --vp-c-brand-1: #00ffff; } 66% { --vp-c-brand-1: #0000ff; } 83% { --vp-c-brand-1: #ff00ff; } 100% { --vp-c-brand-1: #ff0000; } } :root { animation: rainbow 10s linear infinite; }毛玻璃导航栏创建blur.css文件.VPNavBar { background-color: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(10px); } .dark .VPNavBar { background-color: rgba(30, 30, 30, 0.7) !important; }4. 实用插件与功能增强4.1 评论系统集成推荐使用Waline作为评论系统它支持多种登录方式且配置简单。首先安装依赖pnpm add waline/client然后在.vitepress/theme/components下创建Comment.vuescript setup import { onMounted } from vue import { useRoute } from vitepress import waline/client/dist/waline.css onMounted(() { const route useRoute() const Waline require(waline/client) Waline.init({ el: #waline-comment, serverURL: 你的服务端地址, path: route.path }) }) /script template div idwaline-comment classmt-8 / /template4.2 文章阅读统计使用不蒜子实现简单的访问统计script async src//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js/script div classvisit-count 访问量: span idbusuanzi_value_site_pv/span 访客数: span idbusuanzi_value_site_uv/span /div4.3 自动生成侧边栏手动维护侧边栏很麻烦可以使用vitepress-sidebar插件自动生成pnpm add -D vitepress-sidebar配置vite.config.tsimport { defineConfig } from vitepress import { sidebar } from vitepress-sidebar export default defineConfig({ themeConfig: { sidebar: sidebar({ documentRootPath: /docs, useTitleFromFileHeading: true }) } })5. 部署与持续集成5.1 静态资源部署VitePress生成的静态文件可以部署到各种平台。以Vercel为例在项目根目录创建vercel.json{ rewrites: [{ source: /(.*), destination: /index.html }] }安装Vercel CLI并登录npm i -g vercel vercel login部署项目pnpm docs:build vercel --prod5.2 GitHub Pages自动化在GitHub仓库的Actions中创建新工作流name: Deploy to GitHub Pages on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: pnpm/action-setupv2 - uses: actions/setup-nodev3 with: node-version: 18 - run: pnpm install - run: pnpm docs:build - name: Deploy uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: .vitepress/dist这样每次push到main分支时GitHub Actions会自动构建并部署你的博客。