VitePress从0到1搭建博客技术文档 | 搜索、评论、访问统计俱全！

前端

2023-05-29 02:33:12

用 VitePress 构建您的博客或技术文档：从头到尾的指南

使用 VitePress 的优势

VitePress 是一款基于 Vue.js 和 Vite 构建的静态网站生成器，以其卓越的性能、简洁性和强大功能而备受推崇。无论您是需要创建一个个人博客还是全面的技术文档，VitePress 都能提供一个完美的解决方案。

安装和设置

要开始使用 VitePress，请执行以下步骤：

安装 VitePress CLI：npm install -g vitepress
初始化一个新项目：mkdir my-project && cd my-project && vitepress init
安装依赖项：npm install

创建和编辑内容

VitePress 使用 Markdown 文件来创建文档内容。在 docs 目录下创建新的 Markdown 文件，并使用 .md 扩展名。例如，touch docs/hello-world.md。

增强功能

VitePress 提供各种插件来增强您的网站，包括：

搜索：vitepress-plugin-search
评论：vitepress-plugin-comment
访问量统计：vitepress-plugin-baidu-analytics

在 package.json 中添加依赖项并配置 vitepress.config.js 文件以启用这些插件。

部署

GitHub Pages：

创建一个 GitHub 仓库
克隆 VitePress 项目到本地
运行 npm run build
将 dist 目录复制到 GitHub 仓库的 gh-pages 分支

其他平台：

按照相应平台的官方文档进行部署，例如 Netlify、Vercel 或 Surge。

代码示例：

// 安装 VitePress CLI
npm install -g vitepress

// 初始化新项目
mkdir my-project && cd my-project && vitepress init

// 安装依赖项
npm install

// 创建 Markdown 文件
touch docs/hello-world.md

// 安装搜索插件
npm install vitepress-plugin-search --save-dev

// 配置 VitePress
// vitepress.config.js
module.exports = {
  plugins: ['vitepress-plugin-search']
};

// 部署到 GitHub Pages
npm run build
cp -r dist/* .git/user/content/docs

// 推送更改
git add .
git commit -m "Deploy to GitHub Pages"
git push origin gh-pages