使用VitePress设计具有个人风格的博客

前言 ​

之前一直想自己写一个博客，之前尝试过使用vue+nodejs使用前端+后台的方式搭建博客，但是这种方式局限性太大而且非常麻烦，还需要支付服务器的费用，所以就放弃了。 后来又研究了一段时间的hexo，不得不说，确实非常方便，但是hexo有点太“花哨”了，而且配置项太多，太繁琐，自己也没有时间去研究。 再后来发现了vitepress，怎么说呢，就是非常符合我对写博客网址的要求：自定义程度高，写作方便，不需要服务器，用markdown写完博客后自动生成html非常方便，而且样式和布局完全可以自定义，可以设计出属于自己风格的博客。

在线尝试 ​

可以直接在 StackBlitz 上进行在线尝试。

安装 ​

前置准备 ​

• Node.js 18 及以上版本。
• 通过命令行界面 (CLI) 访问 VitePress 的终端。
• 支持 Markdown 语法的编辑器。
  • 推荐 VSCode 及其官方 Vue 扩展。

VitePress 可以单独使用，也可以安装到现有项目中。在这两种情况下，都可以使用以下方式安装它：

npm add -D vitepress

pnpm add -D vitepress

yarn add -D vitepress

yarn add -D vitepress vue

bun add -D vitepress

"pnpm": {
  "peerDependencyRules": {
    "ignoreMissing": [
      "@algolia/client-search",
      "search-insights"
    ]
  }
}

安装向导 ​

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

npx vitepress init

pnpm vitepress init

yarn vitepress init

bun vitepress init

文件结构 ​

如果正在构建一个独立的 VitePress 站点，可以在当前目录 (./) 中搭建站点。但是，如果在现有项目中与其他源代码一起安装 VitePress，建议将站点搭建在嵌套目录 (例如 ./docs) 中，以便它与项目的其余部分分开。

假设选择在 ./docs 中搭建 VitePress 项目，生成的文件结构应该是这样的：

├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

docs 目录作为 VitePress 站点的项目根目录。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的位置。

配置文件 ​

配置文件 (.vitepress/config.js) 让你能够自定义 VitePress 站点的各个方面，最基本的选项是站点的标题和描述：

// .vitepress/config.js
export default {
  // 站点级选项
  title: 'VitePress',
  description: 'Just playing around.',

  themeConfig: {
    // 主题级选项
  }
}

源文件 ​

.vitepress 目录之外的 Markdown 文件被视为源文件。

VitePress 使用 基于文件的路由：每个 .md 文件将在相同的路径被编译成为 .html 文件。例如，index.md 将会被编译成 index.html，可以在生成的 VitePress 站点的根路径 / 进行访问。

启动并运行 ​

该工具还应该将以下 npm 脚本注入到 package.json 中：

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：

npm run docs:dev

pnpm run docs:dev

yarn docs:dev

bun run docs:dev

除了 npm 脚本，还可以直接调用 VitePress：

npx vitepress dev docs

pnpm vitepress dev docs

yarn vitepress dev docs

bun vitepress dev docs

开发服务应该会运行在 http://localhost:5173 上。在浏览器中访问 URL 以查看新站点的运行情况吧！